jQuery launch a fancybox AFTER ajax form submission

Question

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.

call your fancy box function from within the success callback of the ajax request? — William George
You must call fancybox inside the success method. The box is showing just after the click, not after the server responds the request. — Fals

William George William George · Accepted Answer · 2014-07-31T21:38:30

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;
});

jQuery launch a fancybox AFTER ajax form submission

2 Answers