Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX][PHP]Pętla Foreach oraz wywołanie zmiennej przez ajax
Forum PHP.pl > Forum > Przedszkole
hejkumkejkum
2.01.2014, 02:26:27
Mam sobie w pętli w PHP wygenerowany form z polami input ukrytymi do przesłania $_POSTem.
Chciałem się dobrac do nich poprzez ajax.

Na przykład coś takiego

[HTML] pobierz, plaintext 
  1. <form class="sss_dodaj_class" action="" method="post">
  2. 			<input type="hidden" id="sss_product_id" name="sss_product_id" value="<?php echo $id; ?>" />
  3. 			<input type="hidden" id="sss_action"  name="sss_action" value="dodaj" />
  4. 			<input type="image" name="dodaj" class="sss_podsumowanie_dodaj" value="dodaj" title="dodaj"/>
  5. </form>
  6.  
  7.  
  8. <form class="sss_dodaj_class" action="" method="post">
  9. 			<input type="hidden" id="sss_product_id" name="sss_product_id" value="<?php echo $id; ?>" />
  10. 			<input type="hidden" id="sss_action"  name="sss_action" value="dodaj" />
  11. 			<input type="image" name="dodaj" class="sss_podsumowanie_dodaj" value="dodaj" title="dodaj"/>
  12. </form>
  13.  
  14. <form class="sss_dodaj_class" action="" method="post">
  15. 			<input type="hidden" id="sss_product_id" name="sss_product_id" value="<?php echo $id; ?>" />
  16. 			<input type="hidden" id="sss_action"  name="sss_action" value="dodaj" />
  17. 			<input type="image" name="dodaj" class="sss_podsumowanie_dodaj" value="dodaj" title="dodaj"/>
  18. </form>
[HTML] pobierz, plaintext

Problem polega na tym, że obecnie w pętli mam tylko clasy, czyli nie mam się jak odwołać do każdego form z osobna.
I po wywołaniu 
[HTML] pobierz, plaintext 
  1. jQuery(".sss_dodaj_class").click(function(){
[HTML] pobierz, plaintext


Za każdym razem zwróci ten sam wynik, czyli prawdopodobnie elementu pierwszego z pętli.
W jaki sposób zrobić, żeby to działało jak należy.
Wiem, że mogę do pętli dodać zmienną $i=0 $i++ i dodać to do class "sss_dodaj_class<?php echo $i; ?>"
Ale może istnieje lepszy sposób?
Jak to ugryźć?
bostaf
2.01.2014, 09:47:29
Cytat(hejkumkejkum @ 2.01.2014, 02:26:27 ) *
Problem polega na tym, że obecnie w pętli mam tylko clasy, czyli nie mam się jak odwołać do każdego form z osobna.
I po wywołaniu 
[HTML] pobierz, plaintext 
  1. jQuery(".sss_dodaj_class").click(function(){
[HTML] pobierz, plaintext


Za każdym razem zwróci ten sam wynik, czyli prawdopodobnie elementu pierwszego z pętli.
W jaki sposób zrobić, żeby to działało jak należy.

Jest OK. To co zrobiłeś w jQuery powoduje przypięcie do każdego elementu z klasą sss_dodaj_class (czyli do 3 formularzy) obsługi zdarzenia click. Każdy z tych detektorów jest świadomy swojego położenia - wie, do którego formularza należy. Dla przykładu, jeśli umieścisz w tamtej funkcji obsługi zdarzenia taką instrukcję:
[JAVASCRIPT] pobierz, plaintext 
  1. jQuery(".sss_dodaj_class").click(function(){
  2.     var a = $("input[name='sss_product_id']", this);
  3.     alert(a.val());
  4. });
[JAVASCRIPT] pobierz, plaintext

... to klikając gdziekolwiek wewnątrz tych trzech formularzy otrzymasz wartość (to co ustawiasz w atrybucie value, ze zmiennej PHP $id) odpowiedniego inputa o nazwie sss_product_id. Dzieje się tak bo selektor this dokładnie określa z którego formularza został wywołany (tak jak pisałem - jest "świadomy" swojego położenia).

Jeśli chcesz zrezygnować a określania elementów za pomocą ich atrybutów (class, name, itd) to przyjąwszy, że struktura formularzy jest stała, możesz odwołać się do kolejności elementów i wykorzystać funkcję jQuery eq(), która pozwoli Ci wybrać konkretny element z zestawu inputów:
[JAVASCRIPT] pobierz, plaintext 
  1. jQuery(".sss_dodaj_class").click(function(){
  2.     var a = $(this).find('input').eq(0); // 0 - pierwszy ze znalezionych inputów, 1 - drugi, ...
  3.     alert(a.val());
  4. });
[JAVASCRIPT] pobierz, plaintext

Metoda inna ale efekt identyczny.
Jak poczytasz rozdział o selektorach (http://api.jquery.com/category/selectors/) to odkryjesz jeszcze więcej sposobów.
owca_82
2.01.2014, 12:44:05
Cytat(hejkumkejkum @ 2.01.2014, 02:26:27 ) *
Problem polega na tym, że obecnie w pętli mam tylko clasy, czyli nie mam się jak odwołać do każdego form z osobna.


document.forms

Cytat(hejkumkejkum @ 2.01.2014, 02:26:27 ) *
I po wywołaniu ..... Za każdym razem zwróci ten sam wynik, czyli prawdopodobnie elementu pierwszego z pętli.


Nie, nie zwróci, jeżeli wewnątrz funkcji obsługującej zdarzenie odwołasz się za pomocą "this" ;p ... (this = kliknięty element)

hejkumkejkum
2.01.2014, 22:01:11
Kurcze faktycznie gdy zrobiłem test kodem:

[PHP] pobierz, plaintext 
  1. jQuery(".sss_dodaj_classs").click(function(){
  2. var a = jQuery('#sss_product_id',this);
  3. alert(a.val());
  4. });
[PHP] pobierz, plaintext


To wyniki są odrębne dla każdejgo elementu form. I rzeczywiście działa to bez problemu.


Ale gdy podpiąłem to:


[PHP] pobierz, plaintext 
  1. jQuery(".sss_dodaj_class").click(function(){
  2.  
  3. var sss_product_id = jQuery('#sss_product_id', this).val();
  4. var sss_action = jQuery('#sss_action', this).val();
  5.  
  6. jQuery.ajax({
  7. type: 'POST',
  8. url: MyAjax.ajaxurl,
  9. data: {
  10. action: "jakas_funkcja",
  11. product_id: sss_product_id,
  12. sss_action: sss_action
  13. },
  14. success: function(data){ 
  15. //alert(data);
  16. jQuery('.sss_koszyk_button_v').replaceWith(data);
  17. }
  18. });
  19. return false;
  20. });
[PHP] pobierz, plaintext



To zwraca mi wartość tylko pierwszego form, bez względu na który guzik nacisnę.

Dodam, że chodzi o Wordpressa.
Usiłuję rozgryźć ajaxa i trafiłem na ścianę właśnie z tym problemem.

Czyli gdzieś popełniłem błąd ale nie wiem gdzie smile.gif
bostaf
2.01.2014, 22:13:25
Wiem, że poucinałeś niepotrzebne fragmenty kodu, ale czy w liniach 11 i 12 nie powinno być:
[JAVASCRIPT] pobierz, plaintext 
  1. product_id: dkfp_product_id,
  2. sss_action: dkfp_action
[JAVASCRIPT] pobierz, plaintext
questionmark.gif
hejkumkejkum
2.01.2014, 22:47:49
Cytat(bostaf @ 2.01.2014, 22:13:25 ) *
Wiem, że poucinałeś niepotrzebne fragmenty kodu, ale czy w liniach 11 i 12 nie powinno być:
[JAVASCRIPT] pobierz, plaintext 
  1. product_id: dkfp_product_id,
  2. sss_action: dkfp_action
[JAVASCRIPT] pobierz, plaintext
questionmark.gif



To jest prefix który dodaje, ale zastąpiłem go sss. Tutaj zapomniałem go zastąpić przed wklejeniem smile.gif
Czyli wszędzie tam gdzie jest dkfp to powinno byc sss.
Ale błąd popełniłem tylko przy wklejaniu na forum.
Już poprawiłem post.


Znalazłem coś takiego.
http://stackoverflow.com/questions/2066980...hp-foreach-loop

W zasadzie to ten sam problem co mój z ta różnicą, że tam miał każde ID takie samo.
Czyżby jednak wynikało z tego, że dla ajaxa musi to być inaczej rozwiązane niż u mnie?

Czyli dodanie id z przyrastającą zmienną $i?
bostaf
2.01.2014, 23:06:53
HTML jest dokładnie taki jak ten, który wkleiłeś w pierwszej wiadomości?
hejkumkejkum
30.01.2014, 14:04:02
Ok chyba znalazłem problem.

I chyba szukałem nie tam gdzie trzeba.
Prawdopodobnie problemem jest funkcja jquery 
[HTML] pobierz, plaintext 
  1. replaceWith
[HTML] pobierz, plaintext
, która po prostu kasuje diva (podmienia), zatem drugie kliknięcie nie znajduje miejsca do którego może załadowac wynik.

Dzieki panowie za w pewnym sensie nakierowanie na rozwiązanie smile.gif



Panowie jeszcze pociągnę temat:


[HTML] pobierz, plaintext 
  1. <tr>
  2.   <td class="form_thumb"></td>
  3.   <td class="dkfp_tytul" valign="middle"></td>
  4.   <td class="srodek odstep_dkfp"></td>
  5.   <td class="srodek odstep_dkfp"></td>
  6.   <td class="srodek odstep_dkfp"></td>
  7.   <td class="srodek odstep_dkfp"></td>
  8.   <td class="srodek odstep_dkfp">
  9. <div class="list_select_form">
  10. <form  method="post" class="dkfp_add_to_cart" >
  11. 	<?php dkfp_select_price(); ?>
  12.  </div></td>
  13.   <td style="text-align:right;">
  14.                 	<input type="hidden" id="dkfp_qty" name="dkfp_qty" class="dkfp_cart_qty" value="1" />
  15. 	                <input type="hidden" id="dkfp_product_id" name="dkfp_product_id" value="<?php echo $post->ID; ?>" />
  16.                         <input type="hidden" id="dkfp_action" name="dkfp_action" value="add" />
  17. 	                <input  class="wyr_prawo do_koszyka_button" type="submit" value="Dodaj do koszyka" /></form>  
  18.  </td>
  19.   </tr>
[HTML] pobierz, plaintext


Jak w tym wypadku mając pętlę przesyłać formularz po kliknięciu na SUBMIT .do_koszyka_button"?
Jak się do tego dobrać?
Czy muszę nadać jakiemuś elementowi ID? Mogę to zrobić jedynie przez użycie zmiennej $post->ID.
Chyba, ze da się poprzez selektory jquery odwołać do każdego przycisku z osobna.
Obecnie dodaje mi do koszyka tylko pierwszą pozycję bez względu na to który przycisk nacisnę.

Przkład jest podobny do tego z tematu jednak tam o tyle wystąpiła pomyłka, że odwołanie było do klasy przypisanej do form, a nie do przycisku submit.


[PHP] pobierz, plaintext 
  1.     jQuery(".do_koszyka_button").click(function(){
  2.     var a = jQuery('#dkfp_product_id',this);
  3.     alert(a.val());
  4.     });
[PHP] pobierz, plaintext


Powyższe zwróci oczywiście undefined.
W zasadzie tylko ten problem mi pozostał by uruchomić dodawanie do koszyka za pomocą ajaxa.
phpion
30.01.2014, 14:27:33
Spróbuj tak:
[HTML] pobierz, plaintext 
  1. var a = jQuery('#dkfp_product_id', $(this).closest('form'));
[HTML] pobierz, plaintext

Inna sprawa, że mieszać tu może nadawanie takich samych id elementom. Zamień #dkfp_product_id na .dkfp_product_id (+ zmiana w kodzie HTML). Równie dobrze możesz pobrać całą zawartość formularz (nie pole po polu) i wysłać ją AJAXem. Zrobisz to poprzez:
[HTML] pobierz, plaintext 
  1. $(this).closest('form').serialize()
[HTML] pobierz, plaintext

To wysyłasz AJAXem jako data.
hejkumkejkum
30.01.2014, 15:33:12
Ok działa zrobiłem tak, lecz miałem problem z serialize(); bo o ile serialize zwraca wszystko ok tak nie wiem w jaki sposób mam wstawić zmienną z serialize do ajaxa w data: gdzie mam też wywołanie funkcji action: "dkfp_dodaj_do_koszykaa".
Zmieniłem również id na class.

[HTML] pobierz, plaintext 
  1. jQuery('.do_koszyka_button').live('click', function(e){
  2. e.preventDefault();
  3.  
  4. var dkfp_qty = jQuery(this).closest('tr').find('.dkfp_qty').val();
  5. var dkfp_product_id = jQuery(this).closest('tr').find('.dkfp_product_id').val();
  6. var wybor_ceny = jQuery(this).closest('tr').find('.wybor_ceny').val();
  7. var dkfp_action = jQuery(this).closest('tr').find('.dkfp_action').val();
  8.  
  9. jQuery.ajax({
  10. type: 'POST',   // Adding Post method
  11. url: MyAjax.ajaxurl, // Including ajax file
  12. data: {
  13. action: "dkfp_dodaj_do_koszykaa",
  14. dkfp_qty: dkfp_qty,
  15. dkfp_product_id: dkfp_product_id,
  16. wybor_ceny: wybor_ceny,
  17. dkfp_action: dkfp_action
  18. }, // Sending data dname to dkfp_dodaj_jedenn function.
  19. success: function(data){ // Show returned data using the function.
[HTML] pobierz, plaintext

phpion
31.01.2014, 08:30:49
Zamiast tego:
[HTML] pobierz, plaintext 
  1. data: {
  2. action: "dkfp_dodaj_do_koszykaa",
  3. dkfp_qty: dkfp_qty,
  4. dkfp_product_id: dkfp_product_id,
  5. wybor_ceny: wybor_ceny,
  6. dkfp_action: dkfp_action
  7. }
[HTML] pobierz, plaintext

możesz użyć (już bez { i }):
[HTML] pobierz, plaintext 
  1. data: $(this).closest('form').serialize()
[HTML] pobierz, plaintext

Nie musisz wówczas wklepywać pole po polu - po prostu przesyłasz cały formularz.
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.