Question

Ok, here is the setup for this example:

I have 50 results, so I run:

function divcount() {
 mycount =  $('div.item').length; 
}

divcount();
$('div#test').append(mycount);

To get the count of those results…and then display that count-fine. The issue is the page uses AJAX calls to filter results and remove div.item’s off the DOM. For this example, it gets cut to 3 results. After a mouseclick (click that activates the AJAX call) I want to count the results, 3, and display 3 results in #test…but it is using the original 50 and not 3.

I thought about putting:

function updatedivcount() {
 updatedcount =  $('div.item').length; 
}

into the mouseclick action, but that didn’t work. Thanks!

Answer 1

You need to put the update code at the success callback of the $.ajax() call. Something like this:

$("#id_of_button").click(function () {
  $.ajax({
    // ...
    success: function (data) {
      // Do something with the results...
      $('div#test').text($('div.item').length);
    }
  });
});