jQuery - Ajax post result in html displaying in wrong position

Question

I have a site with user posted threads that get voted on (up or down), and a vote count is displayed next to each thread.

The voting up and down process is being done through jQuery/Ajax, and using something like this:

$.ajax({
  url: 'vote.php',
  success: function(data) {
    $('.result').html(data);

  }
});

the html of the vote count is being updated (.result being the class of the div that holds the vote count number)

Also, the threads are being sorted first by vote count descending, and then alphabetically.

I'm having a problem with the ajax updating the HTML vote count in real time, i have a hunch that the issue is due to the fact that the order of the threads are changing when the vote count is being updated, but I'm not certain.

I know the database is being updated, and when I refresh the page, it's also being updated correctly, but I'm not seeing the real-time behavior that I expect from jQuery/Ajax.

What might be the problem?

Answer 1

Try

$.ajax({
  url: 'vote.php',
  success: function(data) {
    $('.result').text(data);

  }
});

If the server is just sending the number you probably should be just setting the text.

Answer 2

$('.result') will reference all items with the "result" class in the entire document. Are you selectively assigning that class to the item to be updated? In that case you need to show us the code for that.

Otherwise, you probably want to look at accessing the proper container by something like an ID, that is not affected by how the ordering of items change

$('#item-' + id).find('.result').html(data);