Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Czy i jak zastosować LIVE
Forum PHP.pl > Forum > XML, AJAX
Regss
23.08.2011, 19:47:42
Witam!
Zacząłem interesować się AJAX'em i stworzyłem coś takiego:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>Proba</title>
  4. <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
  5. <script type="text/javascript">
  6.   $(document).ready(function(){
  7.  
  8.   $('img[src="star_no.png"]').click(function(){
  9.     $("#o").attr("src", "star.png");   
  10.   });    
  11.    $('img[src="star.png"]').click(function(){
  12.     $("#o").attr("src", "star_no.png");   
  13.   }); 
  14. });
  15. </script>
  16. </head>
  17. <body>
  18. <img id="o" src="star_no.png">
  19. </body>
  20. </html>  
[HTML] pobierz, plaintext


Chciałbym aby obrazek zmieniał się na przemian po każdym kliknięciu przypuszczam, że trzeba użyć live jednak nie mam pojęcia jak. Ktoś może mnie oświecić bo to dla mnie na razie czarna magia.
wookieb
23.08.2011, 20:01:26 
[JAVASCRIPT] pobierz, plaintext 
  1. $('img#o').click(function(){
  2.      var here = $(this);
  3.      here.attr('src', here.attr('src') == 'star_no.png' ? 'star.png' : 'star_no.png');
  4. });
[JAVASCRIPT] pobierz, plaintext
kamil4u
23.08.2011, 20:25:35
Ty nie zacząłeś interesować się AJAX-em, a biblioteką JavaScript o nazwie jQuery.

Przynajmniej tak wynika z kodu przedstawionego tutaj - na forum.
Regss
23.08.2011, 20:28:30
Dzięki za odpowiedź.
Zapomniałem dodać, że rozbudowując ten skrypt będę chciał aby po kliknięciu w star_no.png oprócz zmiany na star.png zostały wykonane inne funkcje (dodanie do bazy mysql wiersza), a po ponownym kliknięciu w zmieniony obrazek zostały wykonane jeszcze inne funkcje (usunięcie z tabeli wiersza). Oczywiście funkcje te będą zapisane w oddzielnych plikach php. Dlatego moja struktura skryptu wydawała mi się lepsza do późniejszej modyfikacji.

kamil4u To może mnie pokierujcie czym mam się zainteresować. Efektem mojej pracy ma być lista filmów na bazie mysql i php którą już posiadam. Obecnie chcę przy każdym filmie dodać gwiazdkę (ulubione) po której naciśnięciu skrypt bez przeładowania strony doda do bazy danych wiersz z id filmu i id użytkownika i zapali żółtą gwiazdkę (star.png). Po ponownym naciśnięciu wykona odwrotną sytuację usuwając wiersz z bazy i ściemni gwiazdkę (star_no.png)
kamil4u
23.08.2011, 20:36:27
Wtedy zrób tak:
[JAVASCRIPT] pobierz, plaintext 
  1. $('img#o').click(function(){
  2.      var here = $(this);
  3.      if( here.attr('src') == 'star_no.png'){
  4.        here.attr("src", "star.png");  
  5.        //operacje
  6.      } else {
  7.         here.attr("src", "star_no.png");  
  8.        //operacje
  9.      }
  10. });
[JAVASCRIPT] pobierz, plaintext


Z live korzystasz wtedy, gdy chcesz przypisać akcję/zdarzenie wszystkim elementom, nawet tym co dopiero będą stworzone. W tym przypadku, jedynie zmieniasz atrybut src, a nie tworzysz nowego elementu, więc live, nie jest potrzebne. Dokumentacja jQuery jest dość dobra.

--edit--
Po prostu wiele osób często myli jQuery czy nawet JS z AJAX-em. Chciałem Ci zwrócić uwagę, na poprawne nazwy, ale po opisie w 2 poście, rzeczywiście będziesz korzystał z AJAX-u.

W skrócie:
- JavaScript to język "główny"
- AJAX to część JavyScript, która w wielkim skrócie, może w tyle wykonać żądanie do serwera - np. żeby odpalić skrypt PHP
- jQuery to biblioteka JS, która znacznie ułatwia pracę i przy okazji ma wbudowaną prostszą obsługę AJAX-u.

Osobiście staram się pisać wszystko sam, ale jak jesteś początkujący i chciałbyś w miarę sprawnie napisać ten skrypt, to jQuery to znakomity wybór.
Regss
24.08.2011, 20:25:22
Wielkie dzięki na tym przykładzie sporo zrozumiałem. Po prostu muszę się oswoić z kodem jQuery i AJAX'em

Nie mogę poradzić sobie z kolejną rzeczą. Nie wiem jak przekazać zmienną:

index.php:

[PHP] pobierz, plaintext 
  1. <?PHP
  2. session_start();
  3. mysql_connect("localhost","root","vertrigo");
  4. mysql_select_db("xbmc5");
  5.  
  6. $lista_wynik = mysql_query('SELECT COUNT, MOVIENAME FROM movie');
  7. $panel_lista = '<table>';
  8. while ($lista = mysql_fetch_array($lista_wynik))
  9. 	{
  10. 	if(mysql_num_rows(mysql_query('SELECT login_id, movie_id FROM konto_id WHERE movie_id = "'.$lista["COUNT"].'" AND login_id = "'.$_SESSION['id'].'"')) > 0)
  11. 		{
  12. 		$lista_star = '<td><img id="o" src="star.png" width="14" height="14"></td>';
  13. 		}
  14. 	else
  15. 		{
  16. 		$lista_star = '<td><img id="o" src="star_no.png" width="14" height="14"></td>';
  17. 		}
  18. 	$panel_lista.= '<tr><td><a href="index.php?count='.$lista["COUNT"].'">'.$lista["MOVIENAME"].'</a></td>'.$lista_star.'</tr>';
  19. 	}
  20. $panel_lista.= '</table>';
  21. ?>
  22.  
  23. <html>
  24. <head>
  25. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  26. <title>Proba</title>
  27. <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
  28. <script type="text/javascript">
  29. $(document).ready(function(){
  30.     $('img#o').click(function(){
  31.     var here = $(this);
  32.     if( here.attr('src') == 'star_no.png'){
  33.     here.attr("src", "star.png");
  34.     here.load("dodaj.php?jak=dodaj");
  35.     } else {
  36.     here.attr("src", "star_no.png");
  37. 	here.load("dodaj.php?jak=usun");
  38. 	}
  39.     });
  40. });
  41. </script>
  42. </head>
  43. <body>
  44. <? echo $panel_lista ?>
  45. </body>
  46. </html> 
[PHP] pobierz, plaintext


dodaj.php:

[PHP] pobierz, plaintext 
  1. <?PHP
  2. session_start();
  3. mysql_connect("localhost","root","vertrigo");
  4. mysql_select_db("xbmc5");
  5.  
  6. if (($_GET["jak"]) == "dodaj")
  7. 	{
  8. 	mysql_query ('INSERT INTO konto_id (`login_id`, `movie_id`) VALUES ("'.$_SESSION['id'].'", "'.$lista["COUNT"].'");');
  9. 	}
  10. else
  11. 	{
  12. 	mysql_query ('DELETE FROM konto_id WHERE login_id = "'.$_SESSION['id'].'" AND movie_id = "'.$lista["COUNT"].'"');
  13. 	}
  14. ?>
[PHP] pobierz, plaintext


Zmiena sesyjna jest dobrze przekazywana ponieważ jest stała dla każdej pozycji. Natomiast nie wiem jak przekazać zmienną $lista["COUNT"] do pliku dodaj.php
kamil4u
24.08.2011, 21:58:54
Pokaż jak wygląda kod wynikowy z index.php - czyli bez PHP, a jedynie to co z niego "wyszło"
Regss
24.08.2011, 22:21:49 
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4. <title>Proba</title>
  5. <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
  6. <script type="text/javascript">
  7. $(document).ready(function(){
  8.     $('img#o').click(function(){
  9.     var here = $(this);
  10.     if( here.attr('src') == 'star_no.png'){
  11.     here.attr("src", "star.png");
  12.     here.load("dodaj.php?jak=dodaj");
  13.     } else {
  14.     here.attr("src", "star_no.png");
  15. 	here.load("dodaj.php?jak=usun");
  16. 	}
  17.     });
  18. });
  19. </script>
  20. </head>
  21. <body>
  22. <table>
  23. <tr><td><a href="index.php?count=1">10.000 BC</a></td><td><img id="o" src="star_no.png" width="14" height="14"></td></tr>
  24. <tr><td><a href="index.php?count=2">100 dziewczyn i ja</a></td><td><img id="o" src="star_no.png" width="14" height="14"></td></tr>
  25. <tr><td><a href="index.php?count=3">101 dalmatyńczyków</a></td><td><img id="o" src="star_no.png" width="14" height="14"></td></tr>
  26. <tr><td><a href="index.php?count=4">13 Dzielnica</a></td><td><img id="o" src="star_no.png" width="14" height="14"></td></tr>
  27. <tr><td><a href="index.php?count=5">13 dzielnica - Ultimatum</a></td><td><img id="o" src="star_no.png" width="14" height="14"></td></tr>
  28. <tr><td><a href="index.php?count=6">17 Again</a></td><td><img id="o" src="star_no.png" width="14" height="14"></td></tr>
  29. <tr><td><a href="index.php?count=653">Życie od kuchni</a></td><td><img id="o" src="star_no.png" width="14" height="14"></td></tr>
  30. </table>
  31. </body>
  32. </html> 
[HTML] pobierz, plaintext


Rekordów jest więcej ale zmienna count leci kolejno od 1 do 653
kamil4u
24.08.2011, 22:28:51
ID musi być unikalne. Użyj klasy

Najprościej:
- w index.php tam gdzie drukujesz:
Kod
<img id="o" src="star_no.png" width="14" height="14">
i ten drugi obrazek dodaj atrybut alt, a w nim $lista["COUNT"]
- następnie w JS w obrębie tej funkcji:
Kod
$('img#o').click(function(){ //pamiętaj, że id musi być unikalne, popraw to na klasę: img.o

zobacz co masz pod this.alt.
Regss
25.08.2011, 18:54:42
Pozmieniałem na klasy, przerobiłem skrypt i działa bez zarzutu.

[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3.     $('img.o').click(function(){
  4.     var here = $(this);
  5.     if( here.attr('src') == 'star_no.png'){
  6.     here.attr("src", "star.png");
  7.     here.load("dodaj.php?jak=dodaj&count="+here.attr('alt'));
  8.     } else {
  9.     here.attr("src", "star_no.png");
  10. 	here.load("dodaj.php?jak=usun&count="+here.attr('alt'));
  11. 	}
  12.     });
  13. });
  14. </script>
[HTML] pobierz, plaintext


Chciałbym jeszcze dodać po każdej akcji wyskakujący w rogu mały DIV z informacją "Dodano" "Usunięto" Udaje mi się to zrobić z prostymi alertami jednak w jQuery isnieje chyba jeszcze coś innego? Czego mam szukać?
kamil4u
25.08.2011, 19:02:53
Poczytaj o DOM: http://kurs.browsehappy.pl/Definicja/DOM i http://kurs.browsehappy.pl/JavaScript/DOM

A w jQuery: http://api.jquery.com/category/manipulation/ -> http://api.jquery.com/appendTo/
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.