Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][AJAX]shoutbox wyswietlanie wpisów
Forum PHP.pl > Forum > Przedszkole
neo1986kk
13.04.2010, 07:25:53
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.
webdice
13.04.2010, 08:39:17
Masakra, przeczytaj to jeszcze raz i zastanów się czy ktoś może się przynajmniej domyślać o co Ci chodzi.
neo1986kk
13.04.2010, 09:46:11
znalazlem odpowiednią frazę, jest to przesówanie histori w górę po wpisaniu wiadomości, dokladnie o to mi chodzi, jak to wykonać?
mortus
13.04.2010, 10:52:44
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
13.04.2010, 12:20:11
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
13.04.2010, 12:21:33
dopisujesz wiadomosc na koncu (append) a nastepnie przewijasz scroll w dół.
neo1986kk
13.04.2010, 21:40:57
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
14.04.2010, 07:05:02
Cytat
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 smile.gif

Cytat
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
14.04.2010, 07:45:51
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
14.04.2010, 07:47:26
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
14.04.2010, 07:49:59
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
14.04.2010, 07:54:39
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
14.04.2010, 07:56:39
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 
  1. document.getElementById('mojatextarea').focus;
[PHP] pobierz, plaintext

ale cos nie bardzo to praży

sorry już wiem

document.getElementById('mojatextarea').focus();
nospor
14.04.2010, 07:57:39
focus to funkcja.
nie focus
a focus()
neo1986kk
14.04.2010, 10:46:31
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
14.04.2010, 10:50:14
tak to jest jak pod pojęciem odswiezania rozumie sie pobieranie wszystkiego na nowo winksmiley.jpg
domysl sie teraz co mam na mysli smile.gif
neo1986kk
14.04.2010, 11:33:49
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
14.04.2010, 11:45:37
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 
  1. <html>
  2.     <head>
  3.         <script type="text/javascript">
  4.             function addToContent() {
  5.                 document.getElementById("content").innerHTML += "Kolejna linijka tekstu<br />";
  6.             }
  7.         </script>
  8.     </head>
  9.     <body>
  10.     <a href="#" onclick="addToContent(); return false;">Just add</a>
  11.     <div id="content">
  12.         Treść:<br />
  13.     </div>
  14.     </body>
  15. </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.
neo1986kk
14.04.2010, 12:03:00
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
14.04.2010, 12:10:05
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.
neo1986kk
14.04.2010, 12:18:32
dodaje z bazy czyli spróbuję coś takiego wykminić:
[PHP] pobierz, plaintext 
  1. function dodajdoshouta() {
  2.  
  3.  
  4.  var wpis=  document.getElementById('dopisz').value;
  5.  
  6. if (http) {
  7. http.open("POST", "../dodajdoshoutboxa.php"); // tu jest skrypt dodający do bazy.
  8. http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  9.  
  10. http.onreadystatechange = function ()
  11. {
  12. if (http.readyState == 4)
  13.  {
  14. document.getElementById('dopisz').focus();
  15. obj.scrollTop = obj.scrollHeight;
  16. }
  17. }
  18. http.send('do_dodania=' + escape(wpis));}
  19. }       
  20.  
  21.  
[PHP] pobierz, plaintext


i to zapisuje do bazy teraz potrzebuje js zeby wpis dopisac do okienka czyli:

[PHP] pobierz, plaintext 
  1.  
  2.  
  3. function addToContent() {
  4. document.getElementById("shoutbox").innerHTML += wpis;
  5.  
  6. }
[PHP] pobierz, plaintext


ale wpis chcialbym na zasadzie tabeli

-----------|-------------|
kto | data |
--------------------------
tresc |
-------------------------

a taka tabela jest pobierana z bazy danych, to pewnie muszę przy pobieraniu js już sformatować zapis tak żeby wyświetlał go w tabeli?

tylko jak on wtedy będzie to zapisywał do bazy danych?

Chyba cos pokręciłem
nospor
14.04.2010, 12:36:25
Cytat
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
mialem na mysli bys nie odswieżał wszystkiego, a tylko nowe wiadomosci. Wspomnial juz o tym mortus

Cytat
a taka tabela jest pobierana z bazy danych, to pewnie muszę przy pobieraniu js już sformatować zapis tak żeby wyświetlał go w tabeli?

tylko jak on wtedy będzie to zapisywał do bazy danych?
W bazie danych masz miec pole na nick, na date, na IP, na wiadomosc. I teraz masz dwie mozliwosci:
1) zwracasz do shoutboxa te dane w xml lub json a nastepnie w js odpowiednio formatujesz i wyswietlasz
2) formatujesz te dane w php, zwracasz do shoutbox a shoutbox wyswietla jak dostanie

Na poczatku gdy pisałem swego shouta wybrałem opcję pierwszą - wydawała mi się najlepsza. Jednak z czasem okazało się ze nie jest dobra, a zalety jakie dawała okazały się mniejsze od wad. Także w nowych wersjach wszystko przygotowuje już w php a shoutbox jedynie wyswietla to co dostanie - tak w skrócie smile.gif
neo1986kk
14.04.2010, 12:40:39 

[PHP] pobierz, plaintext 
  1. function dodajdoshouta() {
  2. var wpis= document.getElementById('dopisz').value;
  3. if (http) {
  4. http.open("POST", "../dodajdoshoutboxa.php"); // tu jest skrypt dodający do bazy
  5. http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  6. http.onreadystatechange = function ()
  7. {
  8. if (http.readyState == 4)
  9. {
  10. document.getElementById('dopisz').focus();
  11. obj.scrollTop = obj.scrollHeight;
  12. }
  13. }
  14. http.send('do_dodania=' + escape(wpis));}
  15. }
  16. function addToContent() {
  17. var wpis=  document.getElementById('wpis').value;
  18. document.getElementById("shout_content").innerHTML += wpis;
  19. }     
  20.  
  21.  
  22.  
[PHP] pobierz, plaintext


Ok działa, ale tak jak myślalem nie jest to sformatowany text, teraz chodzi o to jak go sformatować do tabeli przed pokazaniem w shoutboxie?

Cytat(nospor @ 14.04.2010, 13:36:25 ) *
2) formatujesz te dane w php, zwracasz do shoutbox a shoutbox wyswietla jak dostanie


Czyli muszę utworzyc jeszcze jeden kod php do którego będe przesyłał zmienną z wiadomością tam to formatował dopiero tą sformatowaną przekazać do js?
nospor
14.04.2010, 12:42:11
Cytat
Czyli muszę utworzyc jeszcze jeden kod php do którego będe przesyłał zmienną z wiadomością tam to formatował dopiero tą sformatowaną przekazać do js?
hmm.... to ty po dodaniu wiadomosci nie leciales do php? To jakim cudem ktoś inny oprócz ciebie miał przeczytać tę wiadomość?
neo1986kk
14.04.2010, 12:51:43
lecialem do php ktory zapisywał do bazy, ale teraz pomyślalem rzeczywiście ze przecież moge zapisywać do bazy i formatować w jednym pliku.


a propo 

[PHP] pobierz, plaintext 
  1. $dowsywietlenia='<tr><td>$imie</td><td>data</td></tr><tr><td>$tresc</td></tr>';
[PHP] pobierz, plaintext


i jak tą zmienną sformatowaną przekazać do shoutboxa albo raczej jak poprać ją js??

Domyślam się że znów coś nie tak wymyślone jest tongue.gif
nospor
14.04.2010, 13:01:56
Cytat
Domyślam się że znów coś nie tak wymyślone jest tongue.gif
Jesli kogoś o coś sie pytasz, potrzebujesz pomocy, proszę - nie pokazuj temu komuś języka...

Jak pobrać? uzywasz ajaxa? No to wlasnie tak. Ajax przeciez wysyla żadanie do serwera i odbiera to co mu serwer zwroci.
neo1986kk
14.04.2010, 20:34:31
no tak ale jeszcze nie pobierałem zmiennych w ten sposób tylko z pól formlarza, to jest teraz dla mnie proste, a w jaki sposób przekazać zmienną?

Ok, muszę użyć ajaxa i wydaje mi się że muszę użyć tu czegoś w tym stylu:


[PHP] pobierz, plaintext 
  1. var books = req.responseXML.getElementsByTagName('book');
  2. 	for (var i=0;i<books.length;i++)
  3. 	{
  4. 		var x = document.createElement('div');
  5. 		x.className = 'book';
  6. 		var y = document.createElement('h3');
  7. 		y.appendChild(document.createTextNode(getNodeValue(books[i],'title')));
  8. 		x.appendChild(y);
  9. 		var z = document.createElement('p');
  10. 		z.className = 'moreInfo';
  11. 		z.appendChild(document.createTextNode('By ' + getNodeValue(books[i],'author') + ', ' + getNodeValue(books[i],'publisher')));
  12. 		x.appendChild(z);
  13. 		var a = document.createElement('img');
  14. 		a.src = books[i].getElementsByTagName('cover')[0].getAttribute('src');
  15. 		x.appendChild(a);
  16. 		var b = document.createElement('p');
  17. 		b.appendChild(document.createTextNode(getNodeValue(books[i],'blurb')));
  18. 		x.appendChild(b);
  19. 		document.getElementById('writeroot').appendChild(x);
  20. 	}
  21.  
[PHP] pobierz, plaintext

znalazlem to na stronie http://www.quirksmode.org/blog/archives/20...jax_respon.html

Jeśli możesz to powiedz mi czy to wlasnie w ten sposób mam kombinować?

ja mam do tego takie pytanie, bo rozumiem że przy odświeżaniu to uzytkownik wchodzi na stronę ja coś napiszę to jemu się odświeży o on to widzi, a przy uzyciu ajax to jak on to widzi skoro Ajax działa tylko po mojej stronie i nie odświeża okna innym uzytkownikom?
mortus
14.04.2010, 20:36:43
Cytat(neo1986kk @ 14.04.2010, 21:34:31 ) *
ja mam do tego takie pytanie, bo rozumiem że przy odświeżaniu to uzytkownik wchodzi na stronę ja coś napiszę to jemu się odświeży o on to widzi, a przy uzyciu ajax to jak on to widzi skoro Ajax działa tylko po mojej stronie i nie odświeża okna innym uzytkownikom?
Skoro działa na Twojej stronie, to działa każdemu, kto na tę stronę wejdzie. Czyż nie?
neo1986kk
14.04.2010, 22:16:37
no tak przecież już wcześniej o tym pisałeś nawet... ehh bo ja już nie mam siły do tego, nie mam pojęcia jak to zrobić i datego już pizse głupoty

Dobra już mam połowę sukcesu.

[PHP] pobierz, plaintext 
  1.  
  2. echo '<div id="shout_content">';
  3. //pobieram z bazy live
  4. include('zbaza.php');
  5. $sb="Select * from sborder by data ASC";
  6. $idsb=mysql_query($sb);
  7. while($row3=mysql_fetch_array($idsb))
  8. {
  9. echo '<table class="sb">';
  10. echo '<tr><td class="person">';
  11. echo '<a class="person" href="../'.$row3[4].'">'.$row3[2].'</a><td class="person1">' .$row3[1];
  12. echo '</td></tr></table>';
  13. echo '<div class="sb1"><font color="gold">';
  14.  echo iconv('windows-1250','utf-8',$row3[3]);
  15. echo '<br></font><br></div>';
  16. }
  17.  
  18. echo '<div id="wiad">Napisz wiadomość<br>';
  19. echo '<textarea id="tresc" class="wiad" name="shout" rows="2" cols="60" onKeyPress="if(event.keyCode == 13) { dodajdoshouta(); }"></textarea><br>';
  20. echo '<button class="contwiadl" type="submit" onclick="dodajdoshouta();" title="dodaj wpis">Dodaj</button> </div>';
  21.  
[PHP] pobierz, plaintext


Ok mam pobrane z bazy teraz chcę dodać nowy wpis więc tworze skrypt php dodający do bazy, i skrypt ajax który pokazuje wiadomość w shoutboxie.

[PHP] pobierz, plaintext 
  1. setInterval("addtocontent();",3000); //W ms
  2.  
  3.  function dodajdoshouta() {
  4.  
  5.  
  6.  var tresc =  document.getElementById('tresc').value;
  7.  
  8. if (http) {
  9. http.open("POST", "../doshouta.php");// plik zapisujący do bazy
  10. http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  11. http.onreadystatechange = function ()
  12. {
  13. if (http.readyState == 4)
  14.  {
  15.  addToContent();
  16. document.getElementById('tresc').focus();
  17. obj.scrollTop = obj.scrollHeight;
  18.  
  19. }
  20. }
  21. http.send('dozapisu=' + escape(tresc));}
  22. }       
  23.  
  24.  
  25. function addToContent() {
  26. var tresc =  document.getElementById('tresc').value;
  27. document.getElementById("shout_content").innerHTML += tresc;
  28. }    
  29.  
[PHP] pobierz, plaintext


I to by było dobrze tylko, że zgodnie z moim poprzednim pytaniem po dodaniu wpisu on się pokazuje tylko i wyłącznie u mnie, a dopiero po odświeżeniu strony ktoś może to zobaczyć, więc jak to zrobić żeby pojawiał się nowy wpis do shouta u każdego uzytkownika, który znajduje sie na tej stronie?

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.