Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Czy i jak zastosować LIVE
Regss
post 23.08.2011, 19:47:42
Post #1





Grupa: Zarejestrowani
Postów: 60
Pomógł: 0
Dołączył: 7.05.2006

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
wookieb
post 23.08.2011, 20:01:26
Post #2





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk




 
[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
Powód edycji: [wookieb]:


--------------------
9marshals.com, Fantastyka, Parser bbcode ( UPDATE 1.2 ), Kalkulator wielkości informatycznych
Go to the top of the page
+Quote Post
kamil4u
post 23.08.2011, 20:25:35
Post #3





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----

Ty nie zacząłeś interesować się AJAX-em, a biblioteką JavaScript o nazwie jQuery.

Przynajmniej tak wynika z kodu przedstawionego tutaj - na forum.


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
Regss
post 23.08.2011, 20:28:30
Post #4





Grupa: Zarejestrowani
Postów: 60
Pomógł: 0
Dołączył: 7.05.2006

Ostrzeżenie: (0%)
-----

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)

Ten post edytował Regss 23.08.2011, 20:34:24
Go to the top of the page
+Quote Post
kamil4u
post 23.08.2011, 20:36:27
Post #5





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----

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.

Ten post edytował kamil4u 23.08.2011, 22:04:11


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
Regss
post 24.08.2011, 20:25:22
Post #6





Grupa: Zarejestrowani
Postów: 60
Pomógł: 0
Dołączył: 7.05.2006

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
kamil4u
post 24.08.2011, 21:58:54
Post #7





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----

Pokaż jak wygląda kod wynikowy z index.php - czyli bez PHP, a jedynie to co z niego "wyszło"


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
Regss
post 24.08.2011, 22:21:49
Post #8





Grupa: Zarejestrowani
Postów: 60
Pomógł: 0
Dołączył: 7.05.2006

Ostrzeżenie: (0%)
----- 

[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
Go to the top of the page
+Quote Post
kamil4u
post 24.08.2011, 22:28:51
Post #9





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----

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.


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
Regss
post 25.08.2011, 18:54:42
Post #10





Grupa: Zarejestrowani
Postów: 60
Pomógł: 0
Dołączył: 7.05.2006

Ostrzeżenie: (0%)
-----

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ć?
Go to the top of the page
+Quote Post
kamil4u
post 25.08.2011, 19:02:53
Post #11





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----

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/


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
« Następny starszy · XML, AJAX · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 11:46
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn