Question

I have read a ton before posting this and tried what i could to get it to work. SO basically I am trying to use ajaxStop() as a sort of hook to do stuff after all other jQuery ajax requests have been loaded so I can manipulate and add more to it.

But It seems when I do use ajaxStop() it seems to execute my additional added on requests multiple times…

Now after a bit of trial and error. I learned that this is because within my ajaxStop() function I am calling another ajax post to grab data once something has been clicked, to populate a pop up. I need this click event handler to be registered after all other ajax has been loaded… Because if I take it out of the ajaxStop() method the multiplicity error goes away but if I refresh the content via ajax than the click event doesn’t register anymore. I am most likely going about this wrong but could use some help. It’s getting late and my brain hurts so I’ll take a fresh look at it tomorrow.

jQuery('.content').one('ajaxStop', function() {

 setInterval(doPopUpOptionsMenu , 1000);
 return false;

 });

Inside of doPopUpOptionsMenu is another ajax call to grab the content for the option pop up.

  function doPopUpOptionsMenu() {
 jQuery(".activity-popUpMenu").one('click',function(e) {
 var activityId = jQuery(this).parent().attr('id').split('-');
 //code to grab options and show the user the Options box.

   jQuery("#optionsPopUpContainer").css({'display': 'block', 'position' :'absolute',   'top' : e.pageY , 'left' : e.pageX});
var myAjaxURL = "example.com";
  var jqxhr = jQuery.post(myAjaxURL, { menuOptions : true, id : activityId[1] } ,     function($response) {
 jQuery("#optionsPopUpContainer").html($response);
})
.success(function() { alert("second success"); })
.error(function() { alert("error"); })
.complete(function() { alert("complete"); });

 });
 jQuery(".activity_update").hover(
 function(){
 jQuery(this).children('.activity-popUpMenu').addClass('activated');

 } ,
function() {
 jQuery(this).children('.activity-popUpMenu').removeClass('activated');
 //jQuery(".activity-popUpMenu").unbind('click');
  });

 }

now the alert for this pops up twice on the first click as it should once for success and once for complete. Than I click on the pop up options again and it pops up four alerts than eight than 16 and keeps doubling pop ups. Like I said I imagined this is due to ajax within the ajaxStop call but how can i get around it or do something better…?

Answer 1

If you want to work with something after all ajax calls complete in the document use $(document).ajaxComplete(function(){handler}); It’s probably not the best approach but it does work pretty well if you want to listen for all ajax to finish.