Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Odświeżanie (ale nie całej strony!)
Forum PHP.pl > Forum > Przedszkole
ignas1987
5.06.2009, 21:17:12
Hej winksmiley.jpg Mam pytanko za 100 pkt. Chciałem odświeżyć zawartość jednego diva... Jednak... jak się okazuje potrzeba jakiegoś ajaxa (nie śmiać się ;P) no i w necie wyczytyałem że coś takiego można zrobić w java script -> InnerHTML... ale żadnych konkretów... Czy jest ktoś w stanie mi wytłumaczyć? Widziałem także, że są gotowe skrypty js ajax(...).js, ale już te linki nie działają. Dzięki za pomoc winksmiley.jpg A tak wogle to przyznam wam się do czego mi to potrzebne ;P CZAT ;P na stronce

Mam taki kod, ale on mi nie odświeża tego diva co sekunde, tylko to trwa znacznie dłużej:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script language=javascript>
  4. // tworzymy zmienna
  5. var object = false;
  6.  
  7. // tworzymy obiekt XMLHttpRequest (dla IE jest troche inaczej, stad funkcja warunkowa)
  8. if (window.XMLHttpRequest) object = new XMLHttpRequest();
  9. else if (window.ActiveXObject) object = new ActiveXObject("Microsoft.XMLHTTP");
  10.  
  11. // ponizsza funkcja pobiera dane ze wskazanego zrodla (pliku lub skryptu php) do wskazanego 
  12. // DIVa poprzez obiekt XMLHttpRequest 
  13. function getData(dataSource, divID)
  14. {
  15. // kontynuuje wylacznie gdy obiekt nie jest zajety
  16. if (object.readyState==4 || object.readyState==0) 
  17. {
  18. // tworzy zmienna odpowiadajaca konkretnemu obiektowi na stronie
  19. var obj = document.getElementById(divID);
  20.  
  21. // czyta z pliku lub wykonuje skrypt
  22. object.open("GET", dataSource);
  23.  
  24. // definiuje metode obslugi odpowiedzi serwera
  25. object.onreadystatechange = function()
  26. {
  27. // kontynuuje jesli transmisja zostala zakonczona powodzeniem
  28. if (object.readyState == 4 && object.status == 200) 
  29. obj.innerHTML= object.responseText;
  30. }
  31. // wysyla zadanie do serwera
  32. object.send(null);
  33. }
  34. }
  35.  
  36. // w ponizszej funkcji wywolujemy funkcje getData z odpowiednimi parametrami
  37. // oraz wywolujemy ja sama rekurencyjnie po co okreslony czas (w naszym wypadku 1000 ms)
  38. function odswiezaj()
  39. {
  40. getData('ajax.php','mojDIVIK');
  41. setTimeout("odswiezaj()", 1000);
  42. }
  43.  
  44. </script>
  45. </head>
  46. <body>
  47.  
  48. <script language=javascript>
  49. odswiezaj();
  50. </script>
  51.  
  52. <div id="mojDIVIK">
  53. </div>
  54.  
  55.  
  56.  
  57. </body>
  58. </html>
[HTML] pobierz, plaintext


[EDIT] Może to z moim localhostem jest cuś nie tak?? :/ ju.z zgłupiałem... niby działa ale nie do końca, bo za długo aktualizuje tego diva [/EDIT]
Chyba jednak temat nie do przejścia... albo tak prosty, że nikomu nie chce sie napisać wstydnis.gif
marcio
5.06.2009, 23:12:50 
[PHP] pobierz, plaintext 
  1. <?php
  2.  
  3. $js_scripts = '<script type="text/javascript" src="../cms/mintAjax.js"></script>
  4.                <script type="text/javascript">
  5.  
  6. function refresh() {
  7.     var req = mint.Request();
  8.     req.evalScripts = true;
  9.     req.AddParam("shout", "shout");
  10.     
  11.     req.OnSuccess = function() {
  12.         $("response").innerHTML = this.responseText;
  13.     }
  14.     
  15.     req.Send("./system/check.php");
  16.     setTimeout("refresh()",5000);
  17. }
  18.  
  19. function dodaj() {
  20.  
  21.     var req = mint.Request();
  22.              
  23.        req.OnLoading = function() {
  24.         $("loading").innerHTML = "<center><img src='./grafiki/administration/spinner.gif'> Trwa dodawanie wpisu...</center>";
  25.     }
  26.   
  27.        req.OnLoaded = function() {
  28.         $("loading").innerHTML = "";
  29.     }
  30.  
  31.     req.OnSuccess = function() {
  32.         $("response").innerHTML = this.responseText;
  33.     }
  34.                
  35.     req.SendForm("form");
  36.     window.document.forms.sb.wpis.value="";
  37.     }
  38.  
  39. setTimeout("refresh()",1000);
  40.  
  41. function show(div, div_img) {
  42.  
  43. if(document.getElementById(div).style.display == "none") {
  44. document.getElementById(div).style.display = "block";
  45. document.getElementById(div_img).src="./grafiki/administration/min.gif"; 
  46.   }
  47. else {
  48. document.getElementById(div).style.display = "none";
  49. document.getElementById(div_img).src="./grafiki/administration/plus.gif"; 
  50.   }
  51.  
  52. }
  53.  
  54.  
  55. function emoticon() {
  56.  
  57. if(document.getElementById('emoticon').style.display == "none") {
  58. document.getElementById('emoticon').style.display = "block"; 
  59.   }
  60. else {
  61. document.getElementById('emoticon').style.display = "none";
  62.   }
  63.  
  64. }
  65.  
  66. function insertAtCursor(myField, myValueStart, myValueEnd) {
  67. //IE support
  68. if (document.selection) {
  69. myField.focus();
  70. sel = document.selection.createRange();
  71. sel.text = myValueStart+sel.text+myValueEnd;
  72. }
  73. //MOZILLA/NETSCAPE support
  74. else if (myField.selectionStart || myField.selectionStart == 0) {
  75. var startPos = myField.selectionStart;
  76. var endPos = myField.selectionEnd;
  77. myField.value = myField.value.substring(0, startPos)+ myValueStart+myField.value.substring(startPos,endPos)+myValueEnd+myField.value.substring(endPos, myField.value.length);
  78. } else {
  79. myField.value += myValue;
  80. }
  81. }
  82.  
  83.                </script>';
  84.  
  85.  
  86. ?>
[PHP] pobierz, plaintext 

[PHP] pobierz, plaintext 
  1. <?php
  2. include('./system/modules/f_m_shout.php');
  3.  
  4. $zawartosc = $js_scripts;
  5.  
  6. if(isset($_COOKIE['username']) && isset($_COOKIE['usercode']) && isset($_COOKIE['userlvl'])) {
  7.  
  8. $zawartosc .= '<table align="center">
  9.                <form action="./system/check.php" method="post" id="form" name="sb">
  10.                <tr><td align="center">
  11.                <textarea name="wpis" rows="3" cols="20" style="background-color:#FFFFFF; color:#bdbdbd; border: 1px solid #bdbdbd;">Wpis</textarea>
  12.                </form>
  13.                </td></tr>
  14.                <tr><td align="center">
  15.                <button onclick="dodaj()" style="background-color:#FFFFFF; color:#bdbdbd; border: 1px solid #000000;width:70%;">Dodaj</button> <img src="./grafiki/administration/smile.gif" onclick="emoticon();" border="0"> <img src="./grafiki/administration/min.gif" id="pokaz" onclick="show('response', 'pokaz'); refresh();" border="0">
  16.                </td></tr></table>';
  17.  
  18. }
  19.  
  20. $zawartosc .= '<div id="emoticon" style="display:none;">
  21.                <fieldset><legend align="center"><b>Emotikony</b></legend>
  22.                <center>
  23.                <img onclick="java script:insertAtCursor(sb.wpis, '',':)')" src="./grafiki/administration/smile.gif" border="0">
  24.                <img onclick="java script:insertAtCursor(sb.wpis, '',';)')" src="./grafiki/administration/wink.gif" border="0">
  25.                <img onclick="java script:insertAtCursor(sb.wpis, '','tongue.gif')" src="./grafiki/administration/pfft.gif" border="0">
  26.                <img onclick="java script:insertAtCursor(sb.wpis, '',':(')" src="./grafiki/administration/sad.gif" border="0">
  27.                <img onclick="java script:insertAtCursor(sb.wpis, '','haha')" src="./grafiki/administration/grin.gif" border="0">
  28.                <img onclick="java script:insertAtCursor(sb.wpis, '',':]')" src="./grafiki/administration/frown.gif" border="0">
  29.                <img onclick="java script:insertAtCursor(sb.wpis, '',';]')" src="./grafiki/administration/cool.gif" border="0">
  30.                </center>
  31.                </fieldset>
  32.                </div> 
  33.                <div id="response" style="display:block"></div>';
  34. ?>
[PHP] pobierz, plaintext

Przeanalizuj kod i uzyj jakis FW Ajax'a oczywiscie do tego dochodzi obsluga usuwania/dodawania wpisu do shout'a
ignas1987
5.06.2009, 23:20:11
hmmm.... z tego co widze to jest kod do shouboxa... jednak mnie chodzi o prostszy kod, bez emotikonek itd... chodzi o samo odświeżanie diva... bo w tym konkretnym divie ma wyświetlać się tekst, jeżeli chodzi o emoty to używam str_replace
marcio
5.06.2009, 23:25:05
Man wszystko podane na tacy look at the function refresh() and think a little bit tongue.gif

A myslisz ze ja dla emotikon to co uzywam nawet ze str_replacwe to nie najlepsze wyjscie
ignas1987
5.06.2009, 23:30:54
spoko loko winksmiley.jpg Dzięki... jednak dzisiaj już dokładnie nie przeanalizuje kodu tongue.gif bo juz mi mózg paruje, hehehe. Pozdro
nexis
5.06.2009, 23:40:25
Cytat(ignas1987 @ 5.06.2009, 22:17:12 ) *
Chciałem odświeżyć zawartość jednego diva

Najprościej chyba za pomocą jQuery i funkcji load():

Kod
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
function update(){
    $("#cel").load("/adres/strony.html #zrodlo");
    // Kolejne odświeżenia co sekundę (1s = 1000 ms)
    setTimeout("update()", 1000);
}
$(document).ready(function(){
    // Pierwsze odświeżenie po wczytaniu biblioteki jQuery
    update();
});
</script>
ignas1987
6.06.2009, 13:33:27 
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function refresh() {
  5.  
  6. var req = mint.Request();
  7. req.OnSuccess = function () { document.getElementById("odswiezaj").innerHTML = this.responseText;},
  8. req.OnError = function () {document.getElementById("odswiezaj").innerHTML = "Wystąpił błąd !!! </br>" + this.responseText + "</br>" + req.xmlHttpRequest.statusText ;}
  9. req.Set(config).Send ("plik.php");
  10. }
  11. var ginter=setInterval(refresh, 1000);
  12. </script>
  13. </head>
  14.  
  15. <body>
  16.  
  17. <div id="odwiezaj">
  18. <?php include("plik.php"); ?>
  19. </div>
  20.  
  21. </body>
  22. </html>
[HTML] pobierz, plaintext


Wystąpił błąd na stronie :/ Where?? sciana.gif
kamil4u
6.06.2009, 13:50:25
FF ma dobrą konsolę błędów - pokaż jaki to błąd smile.gif

Masz wczytaną bibliotekę AJAX-a? Z tego co widzę mintAjax-a ?
ignas1987
6.06.2009, 13:57:54
No właśnie o to chodzi że nie wiem tongue.gif bo ten kod ściągnałem z neta ;P nie wiem w jakie znaczniki to umieścić :/ <lol>, na tamtej stronie koleś dał tylko środek... a co nazewnątrz... nie wiem, czy to javascript src... itd to nie wiem... :/ Mógłbyś pomóc...
Spawnm
6.06.2009, 14:02:58
pobierasz z neta pliczek js mintajax i przez <script> dodajesz go przed swoim kodem .

http://mintajax.pl/Przewodnik/
ignas1987
6.06.2009, 14:07:57
NIestety... nie wiem... ale cuś jest źle...

plik index.php
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script type="text/javascript" src="mintAjax.js"></script>
  4. <script type="text/javascript">
  5. function refresh() {
  6.  
  7. var req = mint.Request();
  8. req.OnSuccess = function () { document.getElementById("odswiezaj").innerHTML = this.responseText;},
  9. req.OnError = function () {document.getElementById("odswiezaj").innerHTML = "Wystąpił błąd !!! </br>" + this.responseText + "</br>" + req.xmlHttpRequest.statusText ;}
  10. req.Set(config).Send ("plik.php");
  11. }
  12. var ginter=setInterval(refresh, 1000);
  13. </script>
  14. </head>
  15.  
  16. <body>
  17.  
  18. <div id="odwiezaj">
  19. <?php include("plik.php"); ?>
  20. </div>
  21.  
  22. </body>
  23. </html>
[HTML] pobierz, plaintext

w pliku plik.php jest zapisywana rozmowa pomiędzy ludźmi...
erix
6.06.2009, 14:12:04
Cytat
NIestety... nie wiem... ale cuś jest źle...

Ała, moja szklana kula spadła mi na głowę... sad.gif

Coś, czyli co?
Spawnm
6.06.2009, 14:15:54
a plik mintajax.js jest w tym samym katalogu co index.php ? Bo tak go includujesz .
ignas1987
6.06.2009, 14:19:57
W tym samym katalogu. Po prostu wogle sie nie odświeża i na pasku na dole "wystąpił błąd" :/
kamil4u
6.06.2009, 14:37:26
Patrzyłeś na konsolę błędów w FF ew. w Operze (tylko nie IE, z Chrome nie wiem jaka tam konsola jest i czy się do czegoś nadaje tongue.gif )?
ignas1987
6.06.2009, 14:40:43
Cytat(kamil4u @ 6.06.2009, 15:37:26 ) *
tylko nie IE

hehe :/ używam IE, niestety, ale też chciałbym żeby na IE działało
kamil4u
6.06.2009, 14:47:23
To też podaj błąd (znając życie dużo nie pomoże, ale raz na 100 przypadków się trafia, może Tobie też się uda)
Cytat
req.Set(config).Send ("plik.php");

A gdzie masz zmienną config?
ignas1987
6.06.2009, 15:03:09
hehehe... Powiem szczerze... javascript jest dla mnie jak chiński ;P ja takie skrypty tylko kopiuje ;P a tak naprawde nie wiem co do czego wstydnis.gif
mszm
6.06.2009, 15:07:15
Manual:

Funkcja Set może zostać wywołana z jednym parametrem będącym obiektem zawierającym pary "atrybut: wartość" do ustawienia w obiekcie Request, funkcja ta przydatna jest przede wszystkim w przypadku korzystania z tych samych ustawień w kilku obiektach Request, przykładowo:

Kod
var config = {
        username : "lorem",
        password : "ipsum",
        encoding : "iso-8859-2",
        evalScripts : true
    }

    mint.Request().Set(config).Send("first_request.php");
    mint.Request().Set(config).Send("second_request.php");
kamil4u
6.06.2009, 15:07:33
Spróbuj ta linkę zamienić na:
Kod
req.Send("plik.php");


Przeczytaj "Przewodnik" mintAjax-u i zrób kilka skryptów według przykładów tam zamieszczonych, później wróć do nas już z działającym prawdopodobnie kodem. Poczytaj też problemu z tamtejszego forum. I zmień przeglądarkę jeśli jest taka możliwość lub zainstaluj sobie IE8 (podobno ma dużo mniej błędów)
marcio
6.06.2009, 15:12:42
Podalem ci funkcje refresh(), formularz tu masz obsluge funkcji refersh() z pod php to ponizej ma byc w pliku check.php mozesz nazwe zmienic rob zrobic wszystko w jednym pliku:
[PHP] pobierz, plaintext 
  1. <?php
  2. if(isset($_GET['shout'])) {
  3.  
  4. /*
  5.  
  6. Pobierasz dane z bazy i wyswietlasz wszystko
  7.  
  8. */
  9.  
  10. }
  11. ?>
[PHP] pobierz, plaintext

To co nawet code&paste ci nie dziala??

Tak jak powiedzieli musisz miec lib'a mintajax'a w katalogu gdzie masz index i tyle.
ignas1987
6.06.2009, 16:32:51
Temat do zamknięcia.

Zbieram wszystko w całość

PLIK index.php
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script type="text/javascript" src="mintAjax.js"></script> 
  4.  
  5.  
  6. <script type="text/javascript"> 
  7.  
  8. var config = {
  9. username : "lorem",
  10. password : "ipsum",
  11. encoding : "iso-8859-2",
  12. evalScripts : true
  13. }
  14.  
  15. mint.Request().Set(config).Send("first_request.php");
  16. mint.Request().Set(config).Send("second_request.php");
  17.  
  18. function refresh() { 
  19. var req = mint.Request(); 
  20. req.OnSuccess = function () { document.getElementById("odswiezaj_mnie").innerHTML = this.responseText;}, 
  21. req.OnError = function () {document.getElementById("odswiezaj_mnie").innerHTML = "Wystąpił błąd !! ! </br>" + this.responseText + "</br>" + req.xmlHttpRequest.statusText ;} 
  22. req.Send("plik.php"); 
  23. } 
  24. var ginter=setInterval(refresh, 5000); 
  25.  
  26. </script> 
  27.  
  28.  
  29. </head>
  30.  
  31. <body onload="refresh()" > 
  32.  
  33.  
  34. <div id="odswiezaj_mnie">
  35. <?php include("plik.php"); ?>
  36. </div>
  37.  
  38. </body>
  39. </html>
[HTML] pobierz, plaintext




PLIK plik.php (tu można wstawić wszystko co chce sie odświeżać, ja wstawiłem wczytywanie czasu sekund na serwerze)
[PHP] pobierz, plaintext 
  1. <?php
  2. echo (date(s));
  3. ?>
[PHP] pobierz, plaintext


DZIĘKI WSZYSTKIM guitar.gif

jeezuuu... dlaczego po edycji znika mi część tekstu... zauważyłem literówki - poprawiłem a tu... zonk zjadło mi kod PHP
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.