Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][AJAX] Problem z danymi zwróconymi przez AJAX
Forum PHP.pl > Forum > Przedszkole
maciek257
Dzień dobry,

Mam pewien problem z danymi zwracanymi przez AJAX.
Skrypt pobiera obiekt JSON, wyciąga z tego tablice i wywołuje w pętli:

  1. success: function(response){
  2. table = [];
  3. for (i = 0; i < response.length; i++){
  4. table[i] = $.map(response[i], function(el) { return el });
  5.  
  6. title = table[i][1];
  7. description = table[i][2];
  8. date= table[i][3];
  9. autor = table[i][7];
  10.  
  11. table[i] = ('<h2>'+title+'</h2><p class="content">'+description+'</p><p class="data">Data: <strong>'+date+'</strong></p>
  12. <p class="autor">Autor: <strong>'+autor+'</strong></p> <button onclick="$("#popup-edit").fadeIn();">Edytuj</button>');
  13. }
  14. $('#results').html(table);
  15. }


Pojawia się jednak problem z tym fragmentem:

  1. <button onclick="$("#popup-edit").fadeIn();">Edytuj</button>


Ponieważ pobrane dane są umieszczane w DIV'ie '#results' dynamicznie i nie ma ich w kodzie źródłowym (DOM) to wywołanie przyciskiem okna '#popup-edit' (znajdującego się w DOM) jest nie możliwe.

Czy jest możliwość wywołania elementu '#popup-edit' z dynamicznie wczytywanej treści bez przechodzenia na inną podstronę i bez odświeżania aktualnej?
Przeładowanie nie wchodzi w grę.

Najlepiej gdyby istniała możliwość dodania pobranych danych do DOM, ale z tego co wiem to raczej nie możliwe.

Będę wdzięczny za pomoc.

Pozdrawiam.
viking
https://prophp.pl/article/15/jquery%2C_zdar...e_metoda_%24.on
fragment Delegacja zdarzeń
trueblue
1. DOM to nie źródło strony.
2. Dane dodawane za pomocą metody html są w DOM, pod warunkiem, że przekazujesz tej metodzie string.
3. Zobacz gdzie otwierasz cudzysłowy i gdzie zamykasz.
4. Wywołanie przyciskiem okna '#popup-edit' jest możliwe nawet Twoją metodą (vide punkt 3). Ale zapoznaj się z tym co Ci viking sugeruje.
maciek257
Dziękuję za podpowiedzi. Delegacja zadziałała bezproblemowo.

Miałbym prośbę o jeszcze jedną podpowiedź.

W jaki sposób przekazać do linijek 24-27 (zamiast X) numer wpisu przy którym został kliknięty przycisk Edytuj?

  1. success: function(response){
  2.  
  3. table = [];
  4. values = [];
  5.  
  6. for (i = 0; i < response.length; i++){
  7.  
  8. table[i] = $.map(response[i], function(el){return el});
  9.  
  10. id = table[i][0];
  11. title = table[i][1];
  12. description = table[i][2];
  13. deadline = table[i][3];
  14. autor = table[i][7];
  15.  
  16. values[i] = [id, title, description, deadline];
  17.  
  18. table[i] = '<div id="task"><h2>'+title+'</h2><p class="content">'+description+'</p><p class="deadline">Termin wykonania: <strong>'+deadline+'</strong></p><p class="deadline">Autor: <strong>'+autor+'</strong></p><button>Edytuj</button></task>';
  19.  
  20. }
  21.  
  22. $("#tasks").delegate("button", "click", function(){
  23. $("#edit").fadeIn();
  24. $(".edit_id").val(values[X][0]);
  25. $(".edit_title").val(values[X][1]);
  26. $(".edit_description").val(values[X][2]);
  27. $(".edit_deadline").val(values[X][3]);
  28.  
  29. });
  30.  
  31. $("#tasks").html(table);
  32. }

viking
Kombinuj z "this". Tylko dlaczego używasz delegate zamiast on? "As of jQuery 3.0, .delegate() has been deprecated"
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.