jQuery 在提交 ajax 表单后启动一个 fancybox答案

【问题标题】：jQuery launch a fancybox AFTER ajax form submissionjQuery 在提交 ajax 表单后启动一个 fancybox
【发布时间】：2014-07-31 21:26:41
【问题描述】：

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

ajax 提交工作正常，但我似乎无法让它工作，因此 FancyBox 仅在表单提交后打开。

ajax表单提交代码为：

$('#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 的功能：

$('#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 与表单提交同时加载，因此花式框内的内容不会显示新的变化。

非常感谢。

【问题讨论】：

从 ajax 请求的成功回调中调用你喜欢的盒子函数？
你必须在success方法里面调用fancybox。该框仅在单击后显示，而不是在服务器响应请求后显示。

标签： jquery ajax fancybox-2

【解决方案1】：

能否更新代码以在 Ajax 对象的成功回调中打开 fancybox，例如：

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

【讨论】：

感谢您的 cmets。我已经尝试过了 - 但它不起作用。表单提交，精美的盒子加载......但同时而不是在表单提交之后！
您能否更新您的答案以包括您如何生成.fancybox 以及在提交表单后如何更新它？
我目前有您在上面放置的确切代码。它应该可以工作 - 但我不知道为什么它在提交表单后没有触发。
对不起，我的意思是 HTML，大概是您在其中显示动态数据。 - 还查询您在提交表单后如何更新数据。
这个$(".fancybox").fancybox({}) 不打开fancybox，只将选择器.fancybox绑定到fancybox。要以编程方式打开 fancybox，您应该使用 $.fancybox({}) 或 $.fancybox.open({})

【解决方案2】：

好的 - 设法让这个工作。我使用触发器在表单提交成功时激活 FancyBox....

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


});

});

【讨论】：