Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery][AJAX] Pobranie danych i link przeładowuje stronę
Forum PHP.pl > Forum > XML, AJAX > AJAX
grzesiek_g
25.09.2008, 14:31:54
Witam

Mam prosty błąd. W kodzie z zewnętrznego pliku js:
[HTML] pobierz, plaintext 
  1. $().ready(function() {
  2.     $("#project-nav a").click(function() {
  3.         var project;
  4.         $.ajax({
  5.             type: "GET",
  6.             url: "http://example.com/beta.php",
  7.             data: "ajax=1&project_id=+zmienna,
  8.             success: function(msg){
  9.                 $('#project_inner').replaceWith(msg);
  10.             }
  11.         });
  12.         return false;
  13.     });
  14. });
[HTML] pobierz, plaintext

Wszystko działa ok, ale do pierwszego wywołania kodu, po poprawnym pobraniu danych i zamianie elementu linki, które się znajdują w uaktualnionym elemencie przestają działać zgodnie z założeniem, tzn. nie jest wywoływana akcja zapytania AJAX tylko strona jest przeładowywana.

Wiem, że tak się dzieje ponieważ powyższy kod odnosi się do stanu po załadowaniu strony tradycyjnym żądaniem, po aktualizacji żądania AJAX-em nie ma zastosowania kod w $().ready - ale jedynie do tego uaktualnionego elementu.

Ale zamieszałem, mam nadzieję, że ktoś zrozumie i podpowie jak to rozpisać by działało - dodawanie atrybutów w stylu onclick do linków raczej odpada.
lord_t
25.09.2008, 15:53:49
Podmień swój kod tym:) (pisałem z palca, ale chyba nic nie pokręciłem):
Kod
function aX(ojciecId){

$("#"+ojciecId+" a").click(function() {

var project;

$.ajax({
type: "GET",
url: "http://example.com/beta.php",
data: "ajax=1&project_id=+zmienna,
success: function(msg){
$('#project_inner').replaceWith(msg);
aX('project_inner');
}
});

return false;

});

}

$().ready(function() {
aX('project-nav');
});
sirostr
25.09.2008, 18:47:20
dopiero zaczynam moją przygodę z ajaksem.
Czy moglibyście mi pokazać jak taki kod działa?

edit: wypociłem takie coś, ale ne działa
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html
  2. 	PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  5. <head>
  6. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. 	<title>pierwszy raz z ajaksem</title>
  8. </head>
  9. <script type="text/javascript" src="jquery.js"></script>
  10. <script type="text/javascript">
  11. function aX(ojciecId){
  12.  
  13. $("#"+ojciecId+" a").click(function() {
  14.  
  15. var project;
  16.  
  17. $.ajax({
  18. type: "GET",
  19. url: "http://drzamich.boo.pl/beta.php",
  20. data: "ajax=1&project_id=+zmienna,
  21. success: function(msg){
  22. $('#project_inner').replaceWith(msg);
  23. aX('project_inner');
  24. }
  25. });
  26.  
  27. return false;
  28.  
  29. });
  30.  
  31. }
  32.  
  33. $().ready(function() {
  34. aX('project_nav');
  35. });
  36. </script>
  37. <body>
  38. <div id="project_nav"><a href="#">KLIK</a></div>
  39. <div id="project_inner"><a href="#">KLIK</a></div>
  40. <?php
  41. echo $project_id;
  42. ?>
  43. </body>
  44. </html>
[HTML] pobierz, plaintext
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.