Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][PHP] Problem z odświeżaniem elementu
Forum PHP.pl > Forum > Przedszkole
koxu1996
16.09.2012, 12:15:45
Witam. Napisałem w php kod który pokazuje czas do danego wydarzenia, a javacripcie dałem interwał który to ma pobrać i wyświetlić. Część działa bo onload ładuje to co zwraca funkcja, lecz dalej już się nie odświerza.

Kod:
[PHP] pobierz, plaintext 
  1. <html>
  2. <body>
  3. <div id=time></div>
  4.  
  5.  
  6. <script type="text/javascript">
  7. window.onload = function()
  8. {
  9. 	idElement = "time";
  10. 	document.getElementById(idElement).innerHTML = "<?php countdown(21,00,00,9,15,2012) ?>" ;
  11. 	setInterval("document.getElementById(idElement).innerHTML = '<?php countdown(21,00,00,9,15,2012) ?>'", 1000);
  12. };
  13. </script>
  14.  
  15.  
  16.  
  17. <?php
  18. function countdown($godzina,$minuta,$sekunda,$miesiac,$dzien,$rok)
  19. {
  20. $target = mktime($godzina,$minuta,$sekunda,$miesiac,$dzien,$rok);
  21. $now = time() ;
  22. $sekundy =($target-$now) ;
  23. //$sekundy =(int) ($sekundy) ;
  24.  
  25.  
  26. $check=0;
  27. if ($sekundy>0)
  28. {
  29. 	if ($check==0)
  30. 	{
  31. 		if ($sekundy<=10000)
  32. 		{
  33. 		// zmien klase
  34. 		$check=1;
  35. 		}
  36. 	}
  37. 	$hours=floor($sekundy/3600);
  38. 	$minutes=floor(($sekundy/60)-($hours*60));
  39. 	$seconds=floor(($sekundy)-($hours*3600)-($minutes*60));
  40.  
  41.  
  42. 	 if($hours < 10)
  43. 	 $hours='0'.$hours;
  44.  
  45. 	 if($minutes < 10)
  46. 	 $minutes='0'.$minutes;
  47.  
  48. 	 if ($seconds < 10)
  49. 	 $seconds='0'.$seconds;
  50.  
  51.  
  52.  
  53.  
  54. 	$all= $hours . " : " . $minutes . " : " . $seconds;
  55. 	echo $all;
  56. }
  57. else
  58. {
  59. echo "Aukcja zakończona!";
  60. }
  61. }
  62. ?>
  63.  
  64.  
  65.  
  66. </body>
  67. </html>
[PHP] pobierz, plaintext

Podejrzewam że coś źle połączyłem js z php, ale to tylko moje przypuszczenia ;p Czemu to może nie działać?

P.s Demo: -> KLIK <-
jaslanin
16.09.2012, 12:38:20
bo PHP i JS działają w różnych kontekstach, tj PHP działa po stronie serwera, a JS po stronie użytkownika

Jak wchodzisz na stronę to kod PHP jest generowany tylko raz, przy odpowiedzi z serwera (wejściu na stronę), a potem JS zawsze używa tej samej, pierwszej odpowiedzi z serwera. Zobacz to w źródle strony masz, odp funkcji PHP wpisane w kod strony.

Musisz albo posłużyć się AJAX albo całkowicie liczyć to po stronie JS, bazując jedynie na danych przekazanych przez PHP.

Bardziej obrazowo można to porównać do drukarki i ołówka. PHP jest drukarką która drukuje stronę raz. A ołówek to JS który możesz pisać po książce i mazać, zmieniać tekst czy dorysowywać wąsy do portretów ludzi, stosunkowo łatwo.

poszukaj w google przykładów odliczania np. na frazę: js countdown timer
koxu1996
16.09.2012, 12:45:07
Dzięki wielkie za świetne wytłumaczenie smile.gif Mam jeszcze jedno pytanie co do js z php. Jak mam na przykład funkcje w js:
funcion x(arg) to jak uzyc zmiennej arg w php questionmark.gif
markonix
16.09.2012, 13:57:56
Cytat(koxu1996 @ 16.09.2012, 13:45:07 ) *
funcion x(arg) to jak uzyc zmiennej arg w php questionmark.gif

Tak jak zrobiłeś to w 10 i 11 linii - po prostu wyświetliłeś.
koxu1996
16.09.2012, 15:29:41
Ale ja nie chce wstawić zmiennej php do js tylko zmienna z js do php. Mniej więcej coś takiego
[PHP] pobierz, plaintext 
  1. <script>
  2. var zmienna=1
  3. <?php funkcja(zmienna) ?>
  4. </script>
[PHP] pobierz, plaintext

Zresztą i tak się nie da chyba tego zrobić... Ciekawi mnie tylko czy są jakieś funkcje w javascript typu mktime czy time które nie korzystają z systemowego zegarka... Może znacie jakieś sposoby na pobranie czasu rzeczywistego?
markonix
16.09.2012, 19:32:16
Funkcje PHP wykonują się PRZED jakimkolwiek JS i tę kolej rzeczy zmienia się AJAXem, który właśnie wykonuje skrypt PHP z dowolnymi parametrami (GET, POST).

Co do pytania o zegarek to JS nie ma nic wspólnego ze serwerem, działa na TWOIM KOMPUTERZE.
Żeby w JS otrzymać czas serwerowy przekazujesz przy załadowaniu do niego zmienną za pomocą PHP.
Najprościej będzie przekazać coś takiego.

[PHP] pobierz, plaintext 
  1. var unix = <?= time(); ?>
[PHP] pobierz, plaintext


I w JS masz dostęp do czasu unix realnego i na podstawie jego robisz zegarek z odliczaniem sekundowym albo minutowym.
koxu1996
24.09.2012, 07:56:25
Próbowałem zrobić to za pomocą liczenia różnicy czasu między komputerem i serwerem, ale to nie za dobrze działało. Teraz zrobiłem plik time.php który zwraca czasy oddzielone średnikami, lecz nie wiem za bardzo jak pliku index.php pobrać to co zwraca time.php. Jak to zrobić?

Edit: Znalazłem coś takiego:

[PHP] pobierz, plaintext 
  1. var isIE = false;
  2. var requests = new Array();
  3. function getRequestObject() {
  4. 	if (requests.length < 1) {
  5. 		//log("new request " + typeof XMLHttpRequest);
  6. 		if (window.XMLHttpRequest && !(window.ActiveXObject)) {
  7. 			try {
  8. 				return new XMLHttpRequest();
  9. 			} catch (e) {log("to nie jest FF");}
  10. 		}
  11. 		isIE = true;
  12. 		//log("IE");
  13. 		// Internet Explorer
  14. 		try {
  15. 			return new ActiveXObject("Msxml2.XMLHTTP.6.0");
  16. 		} catch(e) {}
  17. 		try {
  18. 			return new ActiveXObject("Msxml2.XMLHTTP.3.0");
  19. 		} catch(e) {}
  20. 		try {
  21. 			return new ActiveXObject("Msxml2.XMLHTTP");
  22. 		} catch(e) {}
  23. 		try {
  24. 			return new ActiveXObject("Microsoft.XMLHTTP");
  25. 		} catch(e) {}
  26. 		//log("This browser does not support XMLHttpRequest." );
  27. 		return undefined;
  28. 	} else {
  29. 		//log("reuse request");
  30. 		return requests.pop();
  31. 	}	
  32. }
  33. function releaseRequestObject(request) {
  34. 	//log("releasing request");
  35. 	requests.push(request);
  36. }
  37. function sendRequest(callback, url, id) {
  38. 	var request = getRequestObject();
  39. 	if (request != undefined) {
  40. 		var d = new Date();
  41. 		url = url + "t=" + d.getTime();
  42. 		if (isIE) {
  43. 			request.open("GET", url, true);
  44. 			if (callback != null) {
  45. 				if (id != null) {
  46. 					request.onreadystatechange = function() { callback(request, id);};
  47. 				} else {
  48. 					request.onreadystatechange = function() { callback(request);};
  49. 				}
  50. 			} else {
  51. 				request.onreadystatechange = function() {};
  52. 			}
  53. 		} else {
  54. 			if (callback != null) {
  55. 				if (id != null) {
  56. 					request.onload = function() { callback(request, id);};
  57. 				} else {
  58. 					request.onload = function() { callback(request);};
  59. 				}
  60. 			} else {
  61. 				request.onload = function() {};
  62. 			}
  63. 			request.open("GET", url, true);
  64. 		}
  65. 		request.send(null);
  66. 		//log("request sent " + typeof request + ", " + isIE);
  67. 	} else {
  68. 		//log("nic nie wysyłamy bo się nie da");
  69. 	}
  70. }
[PHP] pobierz, plaintext

Jakby to wykorzystać?
markonix
24.09.2012, 11:49:42
Pobieranie co sekundę godziny ze serwera?
Nie brzmi to jak horror bo to nie zapytanie do bazy czy coś ale jednak wciąż mało optymalnie poza tym mniej odporne na opóźnienia - nie zawsze skrypt wykona się natychmiastowo, dostanie laga itp.

Po pierwsze nie pisz w surowym JS, pisz w jQuery i ta sieczka zmieni się w szacuje... 4 linie kodu.

Zastosuj się do mojej sugestii z przypisaniem godziny na początku, przypisujesz czas w momencie załadowania kodu RAZ i potem co sekundę zmieniasz czas za pomocą setInterval.
koxu1996
25.09.2012, 09:46:23
markonix, potrzebuje odliczaczy czasu które są dynamiczne (każde podbicie aukcji zwiększa czas) więc aktualizacja co sekundę jest potrzebna. Co do mysql to plik time.php pobierane czasy z bazy i je wyświetla. Mógłbyś pomóc trochę z jQuery? Bo nie ogarniam tego...
markonix
25.09.2012, 11:36:59
Czy to są liczniki widoczne dla wszystkich czy tylko dla osoby podbijającej w danym momencie?

Ale co mam pomóc z jQuery? Nie proponowałbym jakby to było coś trudnego i mało znanego, a jest wręcz przeciwnie - to prostsza wersja JS z mnóstwem przykładów i tutoriali w internecie.
koxu1996
25.09.2012, 15:56:50
Czasy maja byc wyswietlane wszystkim uzytkownikom. Jesli chodzi o pomoc z jquery to mam kod do ciaglej aktualizacji diva, ale nie wiem za bardzo jak go przerobic aby auktalizowal wszystkie divy. Jak wroce do domu kolo 18 to wrzuce kod jaki mam
markonix
25.09.2012, 16:46:01
Każdy div niech ma atrybut określający z jakim czasem jest połączony - czyli id aukcji.
[HTML] pobierz, plaintext 
  1. <div rel="123">10:00</div>.
[HTML] pobierz, plaintext

Tworzysz zapytanie ajaxowe, najoptymalniej zrobić jedno dla wszystkich aukcji.
Pobierasz wszystkie czasy w postaci tablicy np. ID Aukcji => Czas.
Oczywiście tablicę trzeba w jakiś tekstowy sposób zwrócić do skryptu, robi się to za pomocą formatu JSON.
Gdy mamy tablicę już w JavaScript robimy foreach'a JS:
[JAVASCRIPT] pobierz, plaintext 
  1. $('div[rel="'+ id_aukcji +'"]').text(czas_aukcji);
[JAVASCRIPT] pobierz, plaintext

To wszystko w pętli co sekundę.
koxu1996
25.09.2012, 17:33:16
Dodałem w pliku do divów atrybuty, i w pliku mam taki kod:
[HTML] pobierz, plaintext 
  1.  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> 
  2. <script> 
  3. var auto_refresh = setInterval( function() {
  4. $.ajax(
  5. {
  6.     url: "time.php",
  7.     success: function(result) 
  8.     {
  9.            // pobranie elementów do tablicy i ich wyswietlenie
  10.     }
  11. });
  12. }, 1000);
  13. </script>
[HTML] pobierz, plaintext

plik time.php zwraca tekst w postaci: id;czas;price;winner|id;czas;price;winner|

Co w skrypcie wstawić w miejscu komentarza by wczytać dane do tablicy i wyswietlić je?
markonix
25.09.2012, 20:26:53
Taki format wymusza na Tobie przerobienie tego na tablicę za pomocą explode w JS.

W PHP traktujesz tablicę za pomocą json_encode.
Potem w JS już masz gotową tablicę i już można iść dalej.
koxu1996
25.09.2012, 20:37:37
Explode w JS? A nie chodziło ci o split()?
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.