I have loop foreach, where i write data and buttons. This code work only from one button, first in loop and the rest does not work.

JS:

 jQuery(document).ready(function($) {

     jQuery('#przyciskUlubione').click(function() {  

        var data = {
            'action': 'UlubioneDodaj',
            'id_plik': $("#przyciskUlubione").val() 

        };   

        jQuery.post(ajaxurl, data, function(response) {

           if(response == "1"){                                 

                   $("#przyciskUlubione").css('background-color','#4hui7d'); 

                alert("wybor 1");

           } 

            if(response == "2"){

                   $("#przyciskUlubione").css('background-color','#f47121');

                alert("wybor 2");

           }           

        });  

    }); 

    });

PHP:

public function execute(){

         add_action( 'wp_ajax_nopriv_UlubioneDodaj', array( $this, 'UlubioneNiezalogowany' ));
         add_action( 'wp_ajax_UlubioneDodaj', array( $this, 'UlubioneZalogowany' ));

 }

  public function UlubioneNiezalogowany(){

  echo '1';

       wp_die();

  } 

  public function UlubioneZalogowany(){

   echo '2';

        wp_die();

  }   

some_function(){

    foreach(){

         echo '<button id="przyciskUlubione" value="'.$plik['id'].'"> Ulubione </button>';

    }

}

SOLUTION

 jQuery(document).ready(function($) {

     jQuery('#przyciskUlubione').click(function() {  

        var data = {
            'action': 'UlubioneDodaj',
            'id_plik': $("#przyciskUlubione").val() 
             var $element = $(this);
        };   

        jQuery.post(ajaxurl, data, function(response) {

           if(response == "1"){                                 

                   $element.css("background-color", "#974269")

                alert("wybor 1");

           } 


        });  

    }); 

    });

I have loop foreach, where i write data and buttons. This code work only from one button, first in loop and the rest does not work.

JS:

 jQuery(document).ready(function($) {

     jQuery('#przyciskUlubione').click(function() {  

        var data = {
            'action': 'UlubioneDodaj',
            'id_plik': $("#przyciskUlubione").val() 

        };   

        jQuery.post(ajaxurl, data, function(response) {

           if(response == "1"){                                 

                   $("#przyciskUlubione").css('background-color','#4hui7d'); 

                alert("wybor 1");

           } 

            if(response == "2"){

                   $("#przyciskUlubione").css('background-color','#f47121');

                alert("wybor 2");

           }           

        });  

    }); 

    });

PHP:

public function execute(){

         add_action( 'wp_ajax_nopriv_UlubioneDodaj', array( $this, 'UlubioneNiezalogowany' ));
         add_action( 'wp_ajax_UlubioneDodaj', array( $this, 'UlubioneZalogowany' ));

 }

  public function UlubioneNiezalogowany(){

  echo '1';

       wp_die();

  } 

  public function UlubioneZalogowany(){

   echo '2';

        wp_die();

  }   

some_function(){

    foreach(){

         echo '<button id="przyciskUlubione" value="'.$plik['id'].'"> Ulubione </button>';

    }

}

SOLUTION

 jQuery(document).ready(function($) {

     jQuery('#przyciskUlubione').click(function() {  

        var data = {
            'action': 'UlubioneDodaj',
            'id_plik': $("#przyciskUlubione").val() 
             var $element = $(this);
        };   

        jQuery.post(ajaxurl, data, function(response) {

           if(response == "1"){                                 

                   $element.css("background-color", "#974269")

                alert("wybor 1");

           } 


        });  

    }); 

    });

• php
• ajax
• buttons

Share Improve this question edited Jul 21, 2019 at 23:08 Jaron asked Jun 6, 2019 at 16:49 JaronJaron 4588 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

This is happening because you have click event firing on ID

jQuery('#przyciskUlubione').click(function() {

The ID is always unique, there should never be more than one same ID in the HTML.

You can achieve this using class. Assign the same class to all the buttons.

Change your selector to class:

jQuery('.przyciskUlubione').click(function() {

add value attribute or data attribute to your buttons.

Now, When you will click on any button the click event will be triggered. You now need to fetch value using this.

Next step: replace your line

$("#przyciskUlubione").val()

With this:

$(this).val()

This should work properly :-)