jQuery launch a fancybox AFTER ajax form submission

问题

I currently have a page which has a form being submitted by ajax.

The ajax submission works fine, but i can't seem to get it to work so that the FancyBox only opens AFTER the form has submitted.

Ajax form submission code is:

$('#create-card-process').ajaxForm({
       dataType: 'json',

        success: function(data) {
            if (data.success) {
            console.log(data);
            $('#card-saved-success').fadeIn();
            $('#card-saved-success').delay(3000).fadeOut(); 

               } else {
                    alert('Failed with the following errors: '+data.errors.join(', '));
                     }
                  }
 });

Then i have the function which activates the FancyBox:

$('#card-preview-link').click(function(){
  $(".fancybox").fancybox({
    beforeLoad: function(){$('#create-card-process').submit();return true;},
    maxWidth    : 1200,
    maxHeight   : 800,
    preload:true,
    fitToView   : false,
    width       : '1200px',
    height      : '100%',
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none'

    });

});

What is happening is that the FancyBox loads at the same time as the form submission, so the contents inside the fancy box do not show the new changes.

Many thanks.

回答1:

Could you update you code to open fancybox in the success callback of your Ajax Object, something like:

$('#create-card-process').ajaxForm({
   dataType: 'json',
   success: function(data) {
        if(data.success){
            console.log(data);
            $('#card-saved-success').fadeIn();
            $('#card-saved-success').delay(3000).fadeOut(); 

            //Open Fancy Box
            $(".fancybox").fancybox({
                maxWidth    : 1200,
                maxHeight   : 800,
                preload     : true,
                fitToView   : false,
                width       : '1200px',
                height      : '100%',
                autoSize    : false,
                closeClick  : false,
                openEffect  : 'none',
                closeEffect : 'none'
            });
        } else {
            alert('Failed with the following errors: '+data.errors.join(', '));
        }
   }
});

$('#card-preview-link').click(function(){
    $('#create-card-process').submit();
    return true;
});

回答2:

OK - managed to get this working. I used trigger to activate the FancyBox on form submission success....

$(document).ready(function(){

//Open Fancy Box
        $(".fancybox").fancybox({
            maxWidth    : 1200,
            maxHeight   : 800,
            preload     : true,
            fitToView   : false,
            width       : '1200px',
            height      : '100%',
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'none',
            closeEffect : 'none'
        });



$('#create-card-process').ajaxForm({
dataType: 'json',
success: function(data) {
    if(data.success){
        console.log(data);
        $('#card-saved-success').fadeIn();
        $('#card-saved-success').delay(3000).fadeOut(); 
       // TRIGGER!!! 
 $(".fancybox").trigger('click');
        } else {
        alert('Failed with the following errors: '+data.errors.join(', '));
    }
}


});

});

来源：https://stackoverflow.com/questions/25069208/jquery-launch-a-fancybox-after-ajax-form-submission