Question posted in
You can find the official documentation here.

View response data from AJAX request for multiple elements – Jquery ajax

I have a like system in my website. Each message has a Like button and a counter next to it.
Now when someone clicks the Like button it should immediately change to 1, and if another user clicks the same message it would change to 2 and so on for each individual message.

I created the AJAX functions required to do this, but I am using document.getElementById which only retrieves the first instance found and views the response from the ajax request.

How can I make it so that it is viewed for each individual message?

Here is my AJAX requests:

jQuery(document).ready(function($){
    $('.msg-icon').on('click', function(e){
    e.preventDefault(); 
 
    var reply_id = $(this).find('input[name="replymsg"]').val();
   var request = reply(reply_id); 
   
    request.done(function() { 
      checkLikes(reply_id);
    });
  });
});
   
  
function reply(reply_id) {
  return $.ajax({ 
    data: reply_id, 
    type: "post", 
    url: "replyfavorite.php?replymsg="+reply_id, 
  });
}

function checkLikes(reply_id) {
  return $.ajax({
    data: { reply: reply_id },
    type: "get",
    url: "checkLikes.php?reply=" + reply_id,
    success: function(data) {
      document.getElementById('likesCount').innerHTML = data; //what can i change here to make the data go to each clicked button?
    }
  });
}

here is my html button that users click for each message:

<a href="" class="msg-icon" >

<i class="fas fa-heart fa-lg" id="favBtn" style="color: #e74f4e !important;"  >
  <span id="likesCount"><?php echo $row3['likes_count'] ?>
</span></i></a>

the code is working fine my only problem is with how to let the response go to the clicked message button only.

Tags:

2

Answers


  1. 0

    Since you are using jquery, why not use $("#likesCount").each(function(){ . . . . .. }); to loop through each item, an inside the each portion you do your ajax request to look for the current value, maybe using $.post() or $.get(), depending on your api.

    Update: (Improving my answer)
    I understand about the uniqueness of the id of an element in a document.

    What I really wanted to say is that you may want change the approach on how to look/search for the details to include inside each span. There you can identify the span objects by grouping them using a Class or a custom attribute, then iterate them using the $.each function. There is no single way to accomplish things, this is just an idea on how to update each element with the correct content.

    Login or Signup to reply.
  2. 0

    As you noticed, ID should be unique. Instead of using document.getElementById('likesCount').innerHTML = data;
    use the data-* attribute

    I.e:

    <span data-id="536">12</span>

    than inside the jQuery success do like:

    success: function(data) {
  $(`[data-id="${reply_id}"]`).text(data)
}

    and such will update any number of data-id="" elements on the page with the newest likes count.

    PS: if you want to make your counts "live" – instead of using AJAX which is one roundtrip-only (request → response), you could use https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API

    By using Web Sockets you’re making sure an initial handshake is made between any client and your server and than small packets are shared between the two – for multiple clients simultaneously. That way you don’t need to have recurring AJAX intervals – and all your guests will see the likes change value "automagically".

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search