Question

我有以下代码。我向用户显示一个fancybox，他们点击Form I上的提交关闭fancybox并在页面上显示它们处理并使用JQuery做一个AJAX帖子。但是有些fancybox会在AJAX表单发布完成之前保持打开状态。这会给用户造成混淆。

   function BeginProcess(){
       $.fancybox.close();
       $("#imgProcess").attr("src", "/admin/images/loading_animation.gif");
       $('#imgProcess').show();
       PostAJAXForm();
}

function PostForm(FormData){
               $.ajax({
                type: "POST",
                url: "process_image.jsp",
                data: FormData,
                contentType: "application/x-www-form-urlencoded",
                async: false,
                success: function(response) {
                    response = $.trim(response);
                    $('#imgProcess').delay(10000).hide();
                    return response;                    
                 },
                error: function(xhr, ajaxOptions, thrownError) {
                     alert("There was an error. Please undo image and perform action again. " );
                     $('#lblProcess').delay(5000).hide();
                     return;
                   }
                });
}

Answer 1

这是一个片段：

var params = $(this).serialize();
var self = this;

$.ajax({
            type: 'POST',
            url: self.action,
            data: params,
            beforeSend: function(){
                    alert('Closing');
                    $.fancybox.close();
            },
            success: function(data){
                    alert('Finished processing form');
                    return false;
            },
            dataType: 'json'
    });

很抱歉，如果某些内容被搞砸了或从该代码段中遗漏了 - 但您应该明白这一点。

Answer 2

你需要在Jquery'Ajax的beforeSend函数中添加$.fancybox.close()。

http://api.jquery.com/jQuery.ajax/ http://api.jquery.com/ajaxSend/

这也可以帮到你 http://snipplr.com/view/47979/close-a-fancybox-when-you-submit-a-form-with-ajax

在AJAX Post之前关闭FancyBox

2 个答案: