Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Ajax i JS
Forum PHP.pl > Forum > XML, AJAX
nc715
16.08.2012, 12:59:25
Witam,
zacząłem właśnie stosować ajaxa i na dzień dobry mam problem smile.gif

poniżej jest funkcja która działa dobrze łączy się z bazą i wyświetla tabelkę. ( w pliku wyszukaj_produkt.php jest łączenie z bazą i wypisanie tabelki )

[PHP] pobierz, plaintext 
  1. function wyszukajProdukt() {
  2.   var adres_url = "include/wyszukaj_produkt.php";
  3.   var parametry = "wyrazenie=" + encodeURI(document.getElementById('wyrazenie').value);
  4.   mojeZadanie.open("POST", adres_url, true);
  5.   mojeZadanie.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  6.   mojeZadanie.setRequestHeader("Content-length", parametry.length);
  7.   mojeZadanie.setRequestHeader("Connection", "close");
  8.   mojeZadanie.onreadystatechange = wyniki;
  9.   mojeZadanie.send(parametry);
  10. }
  11.  
  12. function wyniki() {
  13.   if (mojeZadanie.readyState == 4) {
  14.     if(mojeZadanie.status == 200) {
  15.        wynik = mojeZadanie.responseText;
  16.        document.getElementById('tabela_produkty').innerHTML = wynik;
  17.     } else {
  18.       document.getElementById('tabela_produkty').innerHTML = '<img src="images/ajax-ladowanie.gif"/>';
  19.     }
  20.   }
  21. }
[PHP] pobierz, plaintext


Problem jest gdy chcę zrobić coś na tej tabelce za pomocą js.

[PHP] pobierz, plaintext 
  1. $("#tabela_produkty tr").hover(function(){$(this).addClass("active");},function(){$(this).removeClass("active");});
[PHP] pobierz, plaintext


i nie działa, js nie widzi tej tabelki w ogóle, chociaż na ekranie jest wyświetlona
co robię źle, może to nie ma prawa działać? i jak to ewentualnie zrobić

Pozdrawiam serdecznie
erix
16.08.2012, 13:01:21
A cały kod? Bez kontekstu, to możemy sobie gdybać.

Najlepiej na jsFiddle.
nc715
16.08.2012, 13:37:09
nie da rady na jsFiddle bo w kodzie jest php

index.php

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  3.  
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/xml; charset=utf-8" />
  6. <meta http-equiv="Content-Language" content="pl" />
  7. <link rel="stylesheet" type="text/css" href="css/styles.css" />
  8. <script type="text/javascript" src="js/jquery.min.js"></script>
  9.  
  10. </head>
  11. <body>
  12.  
  13. <script type="text/javascript">
  14. function pobierzZadanieXMLHTTP() {
  15.    var zadanie =  false;
  16.    try {
  17.       /* dla przeglądarki Firefox */
  18.       zadanie = new XMLHttpRequest();
  19.    } catch (blad) {
  20.       try {
  21.          /* dla niektórych wersji przeglądarki IE */
  22.          zadanie = new ActiveXObject("Msxml2.XMLHTTP");
  23.       } catch (blad) {
  24.          try {
  25.             /* dla pozostałych wersji przeglądarki IE */
  26.             zadanie = new ActiveXObject("Microsoft.XMLHTTP");
  27.          } catch (blad) {
  28.             zadanie = false;
  29.          }
  30.      }
  31.    }
  32.    return zadanie;
  33. }
  34.  
  35. function wyszukajProdukt() {
  36.   var adres_url = "include/wyszukaj_produkt.php";
  37.   var parametry = "wyrazenie=" + encodeURI(document.getElementById('wyrazenie').value);
  38.   mojeZadanie.open("POST", adres_url, true);
  39.   mojeZadanie.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  40.   mojeZadanie.setRequestHeader("Content-length", parametry.length);
  41.   mojeZadanie.setRequestHeader("Connection", "close");
  42.   mojeZadanie.onreadystatechange = wyniki;
  43.   mojeZadanie.send(parametry);
  44. }
  45.  
  46. function wyniki() {
  47.   if (mojeZadanie.readyState == 4) {
  48.     if(mojeZadanie.status == 200) {
  49.        wynik = mojeZadanie.responseText;
  50.        document.getElementById('tabela_produkty').innerHTML = wynik;
  51.     } else {
  52.       document.getElementById('prezentacjawynikow').innerHTML = '<img src="images/ajax-ladowanie.gif"/>';
  53.     }
  54.   }
  55. }
  56.  
  57. var mojeZadanie = pobierzZadanieXMLHTTP();
  58. </script>
  59. <form action="" method="post">
  60. 	<input type="text" id="wyrazenie" name="wyrazenie" />
  61. 	<input type="button" value="wyślij" onclick="java script:wyszukajProdukt();" />
  62. </form>
  63. <table id="tabela_produkty"></table>
  64.  
  65.  
  66. <script type="text/javascript">
  67. $("#tabela_produkty tr").hover(function(){$(this).addClass("active");},function(){$(this).removeClass("active");});
  68. </script>
  69. <?php
  70. </body>
  71. </html>
  72.  
[HTML] pobierz, plaintext


a plik wyszukaj_produkt.php :
[PHP] pobierz, plaintext 
  1. $db = db_connect();
  2.  
  3. $zapytanie = "select * from produkty where produkt like '%".$wyrazenie."%'";
  4. $wynik = $db->query($zapytanie);
  5.  
  6. while ($wiersz = $wynik->fetch_assoc()) {
  7.    echo "<tr><td>".$wiersz['produkt_id']."</td><td>".$wiersz['produkt']."</td></tr>";
  8. }
[PHP] pobierz, plaintext
nospor
16.08.2012, 13:42:48
Przecież o to:
$("#tabela_produkty tr").hover(function(){$(this).addClass("active");},function(){$(this).removeClass("active");});
wykona się dużo wcześniej niż załaduje się tabelka w AJAX więc nie ma się dziwić że ci to nie działa, skoro to operuje na tabeli, której jeszcze nie ma....
nc715
16.08.2012, 14:16:36
czyli co mam zrobić, aby takie coś działało? arrowheadsmiley.png
nospor
16.08.2012, 14:28:35
No nie wiem.... może trochę pomyślećquestionmark.gif
Skoro przed pojawieniem się to zły pomysł, to moze warto wykonywać ten kod po pojawieniu się tabeli?
erix
16.08.2012, 14:33:57
Zacząć myśleć i zrozumieć własny kod.

Podpowiedź: jest wykonywany od góry do dołu.
nc715
16.08.2012, 14:40:38
dzieki...
nospor
16.08.2012, 15:03:35
erix twoja podpowiedź jest nie prawidłowa. Co z tego że od góry do dołu? Wg takiego schematu to jego kod powinien działać. A nie działa, bo AJAX wykonuje się dłużej, dlatego kod, który jest poniżej, i tak wykonuje się przed zwrotem AJAX, który jest powyżej.

@autor: daj ten kod albo w kodzie zwracanym z ajax, albo podepnij się pod zdarzenie kończące ajax
nc715
16.08.2012, 15:33:18
Cytat(nospor @ 16.08.2012, 16:03:35 ) *
daj ten kod albo w kodzie zwracanym z ajax, albo podepnij się pod zdarzenie kończące ajax


zadziałało jak się podpiąłem pod zdarzenie końcowe ajax

Problem rozwiązany

Dzięki nospor smile.gif
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.