Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS, PHP] Zmiana elementów strony bez przeładowania
Forum PHP.pl > Forum > Po stronie przeglądarki
R_Przemek
11.03.2016, 21:40:00
Witam

Chciałem zmieniać pewne elementy strony bez jej przeładowania. Zasadniczo ładowanie pliku PHP do div jest proste, jednak ja chciałem zmieniać na przykład background-color jakiegoś elementu albo na przykład value jakiegoś buttona.

Konkrety:

Mam 16 divów, które wyświetlam o tak:

[PHP] pobierz, plaintext 
  1. <?php 
  2.  for ($i = 1; $i <= 16; $i++) { 
  3. ?>
  4. 	<div  class="pozition_ster_manual_c" id="<?php echo "pozition_ster_manual_c_$i"; ?>"> <?php echo "zawartosc diwa"; ?>
  5. 	</div>
  6. <?php 
  7. }
  8. ?>
[PHP] pobierz, plaintext


I teraz aby moje divy miały odpowiedni kolor tła, który ma się zmieniać w zależności od efektu działania skryptu php z interwałem co sekundę (to znaczy z opóźnieniem sekundowym) powyżej robię tak:


najpierw:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <html lang="pl">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>Sterownik v1.0</title>
  6. <link rel="Stylesheet" type="text/css" href="style.css" />
  7. <script src="jquery.min.js"></script>
[HTML] pobierz, plaintext


potem:

[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2.  
  3. var my_v;
  4. var stepp;
  5.  
  6.  
  7. function bla() {
  8.  
  9. for (step = 1; step <= 16; step++) {
  10.  
  11. 	stepp = step;
  12.  
  13. //dane z php do zmiennej
  14.  $.get('wykonaj.php?action=read&pin='+stepp, function( my_var ) {
  15.  
  16. 	 my_v = my_var;
  17.  
  18. 	    if (my_v == '0') {
  19. 	   document.getElementById("pozition_ster_manual_c_"+stepp).style.backgroundColor = "green";
  20.       }
  21.         if (my_v == '1') {
  22. 	   document.getElementById("pozition_ster_manual_c_"+stepp).style.backgroundColor = "red";
  23.       }
  24.  
  25. }); 
  26. //dane z php do zmiennej
  27.  
  28.  
  29.  
  30. }//-for
  31.  
  32.     setTimeout("bla()", 1000); //<--- czas odswiezania
  33. }
  34. $(document).ready(function(){ // wyzwolenie autoodswierzania
  35.   bla();
  36. });
  37.  
  38. </script>
[HTML] pobierz, plaintext


W obecnej postaci skrypt szaleje, albo po prostu nie działa.

Jak to ma działać:

Skrypt wykonaj.php sprawdza stan pinów gpio, w efekcie zwraca "0" bądź "1".
czyli jeśli chcę znać stan pinu 1 wykonuję "wykonaj.php?action=read&pin=1" i dostaję 0 albo 1 i od tego uzależniam kolor tła wyświetlonego później diva.

skrypt działa jeśli testowo usuwam pętle "for (step = 1; step <= 16; step++) {" i na sztywno definiuję zmienną $stepp na przykład na "6"
wtedy div o id xyz_6 zmienia kolor tła.

Czy ktoś ma pomysł gdzie popełniam błąd ?
kajzur
14.03.2016, 19:24:31
$.get jest asynchroniczne więc nim wykona się Twój callback pętla przejdzie już dalej. Stąd dostajesz średni efekt tongue.gif rozwiązanie to np. niech Twój plik php zwraca wszystkie 16 wartości a nie jedną dla każdego. Wtedy masz jednego $.get'a i w jego callbacku zrobisz tego fora ;p
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.