[PHP][AJAX]shoutbox wyswietlanie wpisów Opcje

[neo1986kk]

Chodzi o to, że mam okienko ze shoutboxem które ma określoną wysokość. Dane do shoutboxa pobieram z bazy mysql, wiadomości pojawiają oczywiście jedna pod drugą. Chcialbym uzyskać coś takiego, żeby były widoczne najnowsze wiadomości, ale nie poprzez odwrotne sortowanie bazy, tylko tak jak jest na czatach.

Ten post edytował neo1986kk 13.04.2010, 08:48:00

[webdice]

Masakra, przeczytaj to jeszcze raz i zastanów się czy ktoś może się przynajmniej domyślać o co Ci chodzi.

[neo1986kk]

znalazlem odpowiednią frazę, jest to przesówanie histori w górę po wpisaniu wiadomości, dokladnie o to mi chodzi, jak to wykonać?

[mortus]

Przy pomocy JavaScript, a najlepiej skorzystaj z gotowego frameworka (np. jQuery). Robisz to w taki sposób, że przez AJAX-a zapisujesz wiadomość w bazie (jQuery ajax), a dodatkowo zmieniasz tylko zawartość konkretnego div-a (jQuery append). Jeżeli w shoutbox-ie ma być zawsze tyle samo wiadomości to pierwszą zawsze możesz usunąć przy pomocy odpowiedniego selektora i funkcji remove (jQuery remove). Możesz się przyglądnąć gotowym rozwiązaniom - zapytaj wujka Google o jQuery shoutbox.

[neo1986kk]

te shoutboxy sa jakies niekompletne ja chce tylko cos takiego jak ma nospor u siebie na stronce zeby nowa wiadomosc pojawiała się na dole a reszta szła do góry.

[nospor]

dopisujesz wiadomosc na koncu (append) a nastepnie przewijasz scroll w dół.

[neo1986kk]

to ze na końcu to chyba nie ma znaczenia bo nie pobieram z txt tylko ze sql. ale własnie jak ustawić scrolla zeby był zawsze na dole?

[nospor]

to ze na końcu to chyba nie ma znaczenia bo nie pobieram z txt tylko ze sql

No ma. Jakbys wstawial na początku to by nie dzialało tak jak chcesz. A to ze z sql czy skąds indziej - co ma piernik do wiatraka? Masz wstawiac na koncu i tyle nie zależnie od źródla danych. Takze dobrze ze wkladasz na koncu (IMG:style_emoticons/default/smile.gif)

ale własnie jak ustawić scrolla zeby był zawsze na dole?

Kod

obj.scrollTop = obj.scrollHeight;

gdzie obj to obiekt DOM twojego diva ze scrollem

[neo1986kk]

a jeszcze jak już jesteśmy tutaj to chcialbym się zapytać o to jak to zrobić żeby kursor (znak karetki) zawsze był w polu textarea, może inaczej żeby zawsze textarea było aktywne

[nospor]

jak to "zawsze"? Jak ktoś kliknie na inne pole na stronie to też textarea ma byc nadal aktywne?

Ustaw focus na textarea i na dzien dobry ci sie kursor w nim ustawi

[neo1986kk]

nie nie, po kliknięciu ENTER żeby kursor był na textarea tak jak jest u ciebie że pisze wiadomość naciskam enter i pisze nastepna bez klikania na pole

[nospor]

U mnie nie ma textarea a input. W input enter nie powoduje przejscia do nowej linii. Skoro wiec ty nie chcesz nowej linii to na grzyba textarea dajesz?

[neo1986kk]

w sumie to masz racje, ale jak to zrobić żeby po napisaniu wiadomości pole było aktywne czyli tak jak napisałeś te focus ja zrobiłem coś takiego

[PHP] pobierz, plaintext 
document.getElementById('mojatextarea').focus;
[PHP] pobierz, plaintext 

ale cos nie bardzo to praży

sorry już wiem

document.getElementById('mojatextarea').focus();

Ten post edytował neo1986kk 14.04.2010, 07:59:43

[nospor]

focus to funkcja.
nie focus
a focus()

[neo1986kk]

jednak jeszcze jedną rzecz bym chciał zmienić o ile się da. Bo to odświeżanie co 3 sek jest fajne dopóki nie zachciało mi się zaznaczać tekstu po odswieżeniu poprostu zaznaczenie znika i nie zdąże nacisnąć crt+c zeby skopiować. chciałbym aby te wiadomości pojawiały się na troche innych zasadach, ale chyba musi być to odświeżanie bo jak inaczej?

[nospor]

tak to jest jak pod pojęciem odswiezania rozumie sie pobieranie wszystkiego na nowo (IMG:style_emoticons/default/winksmiley.jpg)
domysl sie teraz co mam na mysli (IMG:style_emoticons/default/smile.gif)

[neo1986kk]

prawdopodobnie masz na myśli asynchroniczny dostęp do mojego diva, ale przecież wyświetlanie asynchroniczne do mojego diva to nie jest nic innego jak odświeżenie diva

[mortus]

AJAX ma w tym shoutbox-ie jedynie zapisać dane (wiadomości, nicki, czas, itp.) do bazy. Dane są zapisywane do bazy po to, aby osoba która dopiero co wejdzie na stronę mogła zobaczyć czego tyczą się rozmowy. Dane są z bazy pobierane tylko przy pierwszym wejściu na stronę. Natomiast za wyświetlanie kolejnych wiadomości bez przeładowania strony odpowiada JavaScript. Najprostszy przykład:

[HTML] pobierz, plaintext 
<html>
    <head>
        <script type="text/javascript">
            function addToContent() {
                document.getElementById("content").innerHTML += "Kolejna linijka tekstu<br />";
            }
        </script>
    </head>
    <body>
    <a href="#" onclick="addToContent(); return false;">Just add</a>
    <div id="content">
        Treść:<br />
    </div>
    </body>
</html>
[HTML] pobierz, plaintext 

Takie coś należy tylko wzbogacić o AJAX-a, który będzie zapisywał "Kolejną linijkę tekstu<br />" do bazy danych.
EDIT:
Oczywiście zamiast innerHTML powinniśmy użyć jakiejś funkcji (metody), która wstawi nam np. tylko określoną linijkę (wszystko zależy od tego, jak te "kolejne linijki" są wyświetlane). Ogólnie chodzi o to, że w powyższym kodzie nie używam AJAX-a, choć modyfikuje treść.

Ach. Drobna wtopa. AJAX jest również wykorzystywany, do pobierania nowych wiadomości (np. co 30 sekund), ale wiadomości te mają już być dopisane do shoutbox-a w taki sposób, o jakim wspomniałem.

Ten post edytował mortus 14.04.2010, 11:56:42

[neo1986kk]

a po co tu ten <a href...> chciałeś mi pokazać ze wywolujesz funkcje ale ja moge sobie to zastąpić interval() czy potrzebne to jest?

[mortus]

To jest tylko przykład, choć może nie najlepszy. Oczywiście możesz skrypt wywoływać zaraz po załadowaniu strony, co określony czas (i wtedy wykorzystujesz setInterval). Wszystko zależy od Twojej inwencji.

Ale jeśli nadal masz jakiś problem, to najlepiej zrobisz, jak pokażesz kod. Możesz też wrzucić całość na serwer i podesłać link. Zobaczymy, czy działa i czego jeszcze brakuje.