Ajax changing onclick event image inside the loop - php

Question

I was trying to change the Image inside the loop for example If I click the button that is also inside the loop it is perfectly changing the image but other data's that are in the loop was also changing to zero(0). I also add an id to a clickable button to change the image only that I clicked..
This is what iv'e tried:
HTML
<div class="ult_tabitemname current">
<div id="dashboard">
<ul class="slider-20" style="width: 5215%; position: relative; transition-duration: 0.2s; transform: translate3d(0px, 0px, 0px);">
<li aria-hidden="false" style="float: left; list-style: none; position: relative; width: 779px;"><img src="http://myurl.com/temp/wp-content/uploads/SAVED.png"><img src="http://myurl.com/temp/wp-content/uploads/1234-1.jpg" class="image-gallery"><input class="mytravel-img-id" img-cat="20" type="hidden" value="1058"></li>
<li aria-hidden="true" style="float: left; list-style: none; position: relative; width: 779px;"><img src="http://myurl.com/temp/wp-content/uploads/SAVE.png"><img src="http://myurl.com/temp/wp-content/uploads/Travel-Personality-FAQ-image-5_09-1.jpg" class="image-gallery"><input class="mytravel-img-id" img-cat="20" type="hidden" value="1059"></li>
<li aria-hidden="true" style="float: left; list-style: none; position: relative; width: 779px;">\<img src="http://myurl.com/temp/wp-content/uploads/SAVED.png"><img src="http://myurl.com/temp/wp-content/uploads/Travel-Personality-FAQ-image-3_03-1.jpg" class="image-gallery"><input class="mytravel-img-id" img-cat="20" type="hidden" value="1060"></li>
</ul>
</div>
</div>
Ajax
$('#dashboard').on("click", 'li a.save', function(){
var img_id = $('.ult_tabitemname.current li[aria-hidden=false] .mytravel-img-id').val();
var img_cat = $('.ult_tabitemname.current li[aria-hidden=false] .mytravel-img-id').attr('img-cat');
var curr_data = $('.ult_tabitemname.current li[aria-hidden=false] a.save').attr('current-data');
$.ajax({
type : "POST",
url : stats_area_load.ajax_url,
dataType : 'json',
data : {
action : 'update_save_ajax',
img_id : img_id,
img_cat : img_cat,
curr_data : curr_data
},
beforeSend: function( response ) {
//$('.ult_tabitemname.current div#dashboard').html('<div class="loading-wrap"><img src="/wp-includes/images/spinner-2x.gif"><p class="stat-loading">Loading, Please Wait...</p></div>');
},
success: function( response ) {
$('a#img-'+img_id).html('<img src="'+response.get_img_url+'" />');
}
});
});
}
PHP
add_action( 'wp_ajax_nopriv_update_save_ajax', 'update_save_ajax', 20 );
add_action( 'wp_ajax_update_save_ajax', 'update_save_ajax', 20 );
function update_save_ajax(){
$img_id = $_REQUEST['img_id'];
$img_cat = $_REQUEST['img_cat'];
$curr_data = $_REQUEST['curr_data'];
$get_curr_uid = get_current_user_id();
$url = get_bloginfo( 'url' );
$uploads = $url . '/wp-content/uploads';
$save = $uploads. '/SAVE.png';
$saved = $uploads. '/SAVED.png';
if($curr_data == 'save'){
$get_save_url = $saved;
$curr_data_save = 'saved';
}else{
$get_save_url = $save;
$curr_data_save = 'save';
}
$param = array(
'get_img_url' => $get_save_url,
'change_curr_data' => $curr_data_save,
'get_curr_img_cat' => $img_cat
);
echo json_encode($param);
die();
}
Just to make it more clear this is the sample output.. The first Image if I clicked that violet button it works perfectly and changing the Image.. In the second photo that is the other image also changing to zero.. They are on the loop..

Answer 1

Are you sure there is only one li[aria-hidden=false] within the entire html?
The correct approach should be like finding the unique element in order to retrieve the properties you want, by specifying the immediate parent() of the element, for e.g.
$('#dashboard').on("click", 'li > a.save', function(){
// $( this ).parent() is the immediate parent of 'a.save' which is 'li'
var img_id = $( this ).parent().find('.mytravel-img-id').val();
var img_cat = $( this ).parent().find('.mytravel-img-id').attr('img-cat');
var curr_data = $( this ).attr('current-data');
...
See also:
.val() Returns: String or Number or Array
Description: Get the current value of the first element in the set of matched elements.
.attr( attributeName ) Returns: String
Description: Get the value of an attribute for the first element in the set of matched elements.