使用带有$ post的Jquery Dialog时显示Loader div

Question

这是一个简单的任务，显示了loader.gif，但不知何故，这段代码片段仅在firefox中有效，在其他浏览器中失败。

我想要实现的是当用户点击“发送电子邮件”按钮时，他们应该看到一个加载器gif图像。 加载程序gif图像是id为valid的div的一部分。

我已经投入了大约8个小时，并尝试测试所有替代品，如$ ajaxsetup，$ ajaxsend，$ ajaxstart等，但没有一个对我有用。

一个适用于流行浏览器的简单示例是我需要的

这是我的代码

 $j("#dialog-form").dialog({
                autoOpen: false,
                height: 435,
                width: 400,
                modal: true,
                buttons: {
                    "Send Email": function() {

            $j("#validate").show();
            setTimeout(ProcessRequest(),5000);


                        }
                    },
                    Cancel: function() {
                        $j(this).dialog("close");
                    }
                },
                close: function() {
                    allFields.val("").removeClass("ui-state-error");
                }

function ProcessRequest()
            {

                            var jqxhr = $j.post(
                                   "posturl.aspx",
                                   { name: name.val(), email: email.val(), phone: phone.val(), date: date.val() },

                           function(data) {
                                result=data;
                           }).success(function() { OnSuccess(); })
                             .error(function() { OnError(); });

                            jqxhr.success(function() { OnSuccess(); });
                            jqxhr.error(function() { OnError(); });

            }

        <div id="validate" style="display:none">
               <img src='trns_loader.gif' /> Your Order is being processed
 </div>

Answer 1

我使用loader.gif的方式技术极低，效果非常好。

我把loader.gif作为主div的背景，中心位置。

然后加载任何内容，我将背景设为白色。

这样，加载器会显示，直到内容被附加到对话框中。

适用于所有浏览器。