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");
}
});
});
});
1 Answer
Reset to default 2This 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 :-)