1

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.

2
  • call your fancy box function from within the success callback of the ajax request? Commented Jul 31, 2014 at 21:29
  • 1
    You must call fancybox inside the success method. The box is showing just after the click, not after the server responds the request.
    – Fals
    Commented Jul 31, 2014 at 21:31

2 Answers 2

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;
});
5
  • Thank you for your comments. I have tried this - and it doesn't work. The form submits, and the fancy box loads....but at the same time and not after the form submission!!
    – Matt Price
    Commented Jul 31, 2014 at 21:44
  • Can you update your answer to include how you generate .fancybox and how you update it after the form has been submitted? Commented Jul 31, 2014 at 21:53
  • I currently have the exact code you have placed above. It should work - but i can't figure out why it's not triggering after form submission.
    – Matt Price
    Commented Jul 31, 2014 at 22:01
  • Sorry I meant the HTML, presumably your showing dynamic data in there. - Also querying how you update the data after the form has been submitted. Commented Jul 31, 2014 at 22:02
  • this $(".fancybox").fancybox({}) doesn't open fancybox, only binds the selector .fancybox to fancybox. To open fancybox programmatically you should either use $.fancybox({}) or $.fancybox.open({})
    – JFK
    Commented Jul 31, 2014 at 23:58
1

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(', '));
    }
}


});

});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.