jQuery在ajax表单提交后启动fancybox [英] jQuery launch a fancybox AFTER ajax form submission

问题描述

我目前有一个页面，其中包含一个由ajax提交的表单.

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

ajax提交工作正常，但是我似乎无法使其正常工作，因此FancyBox仅在表单提交后才打开.

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表单提交代码为:

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

然后我具有激活FancyBox的功能:

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'

    });

});

发生的情况是FancyBox与表单提交同时加载，因此，fancyBox中的内容未显示新更改.

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.

非常感谢.

推荐答案

确定-设法使此工作正常.我使用触发器在表单提交成功时激活FancyBox....

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


});

});

这篇关于jQuery在ajax表单提交后启动fancybox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！