Using Ajax & php to get multiple data onload for items in a wishlist

Question

I am trying to implement, an ajax function that will take the id's of products on load and checks against the db to see if that user has it in their wishlist, then use that information to change the color of wishlist icon.This happens on load of the page.

Currently the function runs but it only looks at the first item, and functions as intended to but not on the remaining products.

Any help on this would be really appreciated, many thanks

The javascript

<script type="text/javascript">
window.onload = function(){

       var link_data = $(".add-wishlist").data('data');   
       $.ajax({
          type: "POST",
          url: '../source/wishlist_control.php',
          data: ({fav_check: link_data}),
          success: function(data) {

               if(data.replace(/\s+/, "")  == 'YES')
               {
                  $('a[data-data="' + link_data + '"] > i.whishstate').css({"color":"#EB686C"})

               }
               else if (data.replace(/\s+/, "")  == 'NO'){
                   $('a[data-data="' + link_data + '"] > i.whishstate').css({"color":"gray"})

               }
               else {

               }
          } 
       });

    }; 

</script>

The icon with the id that is being printed the page

<a class="add-wishlist" href='javascript:;' data-data='<?php echo protect($usri['id']); ?>'>
<i class='fa fa-heart whishstate'></i>
</a>

The php file code

if(isset($_POST['fav_check'])) {  
    $addmemberid = $_SESSION['user_id'];
    $addproductid = $_POST['fav_check'];
    $result = mysql_query("SELECT count(product_id) cnt FROM users_wishlist WHERE user_id = '$addmemberid' AND product_id = '$addproductid'") or die(mysql_error());
    $countid = mysql_fetch_assoc($result);
    if($countid['cnt'] == 1){
        echo 'YES';
    } else {
         echo 'NO';
    }
}

Answer 1

The jquery selector will only select the data first element matched. to do that to all elements you have to loop over them using jQuery each function:

$(".add-wishlist").each(function() {
   var link_data = $(this).data('data');   
   $.ajax({
      type: "POST",
      url: '../source/wishlist_control.php',
      data: ({fav_check: link_data}),
      success: function(data) {

           if(data.replace(/\s+/, "")  == 'YES')
           {
              $('a[data-data="' + link_data + '"] > i.whishstate').css({"color":"#EB686C"})

           }
           else if (data.replace(/\s+/, "")  == 'NO'){
               $('a[data-data="' + link_data + '"] > i.whishstate').css({"color":"gray"})

           }
           else {

           }
      } 
});

Answer 2

Instead of putting AJAX call in a loop, try creating an array of wishlist IDs and POST that to server in a single AJAX call. Then in server you can fetch the respective data and return that as array to the AJAX success function. This will save multiple AJAX request and increase the performance.
So the code will look something like this:

var link_data = [];
$(".add-wishlist").each(function() {
  link_data.push($(this).data('data'));
});
$.ajax({
  type: "POST",
  url: '../source/wishlist_control.php',
  data: ({fav_check: link_data}),
......
......