Question

我目前有一个页面，其中包含一个由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在表单提交的同时加载，因此精美框内的内容不会显示新的更改。

非常感谢。

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

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


});

});

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

2 个答案: