Question

When the user clicks on a button i show a fancybox that indicates that user should wait till the action is completed:

jQuery(document).ready(function () {
             $.fancybox('Please Wait...',{'modal':true});
        });

now i check the requested action via $.post function and return the result message (either action was successful or the error why the action failed) and now i want to close the first fancybox and show the new fancybox with the response i got from ajax:

$.post('someurl.aspx',{'somethingtopost':'value'},
function(data){
jQuery(document).ready(function () {
$.fancybox(data);
         });
     }
);

The problem is the second fancybox doesn’t show. there are many examples on showing a second fancybox when closing the first one (adding to onClosed attribute) but as in this one I don’t want to show the second fanybox after closing the first one, I want to show it when the action is completed.

Answer 1

You can trigger a second Fancybox any time regardless that there is one already opened (and without closing it first). Just try firing a second Fancybox when the action is completed.

The second Fancybox window (once is triggered) will replace the first one without any further closing command.

function openFancybox() {
    setTimeout( function() {$('#delayed').trigger('click'); },10000);
}
$(document).ready(function() {
    $('#pageLoad').fancybox({
        helpers: {overlay:{opacity: 0.3}}
    }).click();
    openFancybox();
    $('#delayed').fancybox({
        helpers: {overlay:{opacity: 0.3}}
    });
}); // ready

I set an example page here that starts Fancybox on page load, then it fires a second Fancybox after 10 seconds.

The first Fancybox closes automatically after the second is fired.

UPDATE

Or maybe you would prefer this version

function openFancybox() {
    setTimeout( function() {$('#delayed').trigger('click'); },10000);
}
$(document).ready(function() {
    $('#goProcess').click(function(){
        $.fancybox({
            href: '#wait',
            modal: true,
            helpers: {overlay:{opacity: 0.3}},
            afterLoad: function() {
                openFancybox();
            }
        }); // fancybox
    });
    $('#delayed').fancybox({
        helpers: {overlay:{opacity: 0.3}}
    });
}); // ready

Open fancybox on a button click, then triggers a second fancybox after 10 seconds
(or after a process in the background is completed.)