Fancybox Not Closing After Ajax Call

I'm having trouble closing my fancy box in some cases after an ajax call. $(document).ajaxStop(function() { function(){$.fancybox.close()}; }); $(document).ajaxStart(functi

Solution 1:

It seems like you have a race condition and maybe the fancybox isn't finished being created and doesn't have it's close function defined yet when your AJAX call is attempting to fire off that close function.

I recommend a 2 step process that triggers the fancybox to close. Create 2 global variables ajaxStop = false; and fancyboxDone = false;

create a function like:

functioncloseFancyBox(){
    if(ajaxStop && fancyboxDone){
        $.fancybox.close();
        ajaxStop = fancyboxDone = false;
    }
}

Then change your ajax stop to :

 $(document).ajaxStop(function() {
    function(){
      ajaxStop = true;
      closeFancyBox()
    };
 });

And finally add an onComplete function to your fancybox that does the same as the ajax Stop but sets fancyboxDone = true instead of ajaxStop.

So now no matter which one finishes first and second they will be able to check on each other's status and fire the close appropriately.