Question

我正在使用jQuery Validation plug-in验证表单，并且在提交表单后使用状态更新<div>时遇到问题（使用submitHandler调用）。用户单击以提交表单后，应该使用状态（“添加用户”）更新#inviteStatus元素。然后，一旦从服务器收到响应（1-2秒），它应该再次更新#inviteStatus结果（“成功”或“失败”）。但是，我的脚本直接跳转到后一个更新（“成功”或“失败”），并跳过第一个“添加用户”更新。

http://jsfiddle.net/bhall7x/Mf7sq/4/

我尝试在第一次delay(5000);更新后插入<div>，但脚本似乎在此时停止，并且永远不会继续执行第二次结果更新消息。

为什么会发生这种情况？谢谢！

更新：我创建了一个updated Fiddle，其中包含我正在使用的实际代码。我无法让.ajax()查询真正用于JS Fiddle，但这样你就可以看到我想要完成的任务。基本上，我想首先更新#inviteStatus，然后显示它使用我的.ajax()查询的结果更新它。这是在成功验证表单后我在jQuery Validation插件的submitHandler中使用的代码：

// form successfully validated, provide user notification
$("#inviteStatus").html("<div class=\"alert alert-info\">Adding user</div>");
$("#inviteStatus").show(500);

// get form values
var postData = $(form).serializeArray();

// submit form
$.ajax({
    type        : "POST",
    data        : postData,
    async       : false,
    cache       : false,
    url         : "inviteScript.php",
    success: function(result) {
        // Provide the results of the ajax call
        $("#friendInviteStatus").html(result);
        $("#friendInviteStatus").show(500).delay(5000).hide(500);
    }
});

Answer 1

它工作正常，模拟你需要延迟的ajax

// Form actions
$("#addForm").validate({
    debug: true,
    rules: {
        invitee: "required"
    },
    messages: {
        invitee: "Please enter a username"
    },
    submitHandler: function (form) {
        $("#inviteStatus").html("<div class=\"alert alert-info\">Adding user</div>");
        $("#inviteStatus").show(500);

        // submit form here via ajax() call
        //simulate the ajx call
        setTimeout(function () {
            $("#inviteStatus").html("<div class=\"alert alert-success\">Success!</div>");
            $("#inviteStatus").show(500).delay(5000).hide(500);
        }, 2000)
    }
});

演示：Fiddle

另一个稍微修改过的版本是http://jsfiddle.net/arunpjohny/9jLb5/2/ - 不推荐使用它，因为它会延迟发送ajax请求，直到消息完全显示为止

Answer 2

您需要在show()来电添加匿名功能，而不是在另一条线路上更改html。

$("#inviteStatus").show(500);
// submit form here via ajax() call
$("#inviteStatus").html("<div class=\"alert alert-success\">Success!</div>");

应该是

$("#inviteStatus").show(500,function() {
    // submit form here via ajax() call
    $("#inviteStatus").html("<div class=\"alert alert-success\">Success!</div>");
});

http://jsfiddle.net/Mf7sq/7/

Answer 3

我实际上可以通过删除async:false电话上的.ajax()来解决此问题。

使用jQuery Validation插件</div>成功验证后无法更新<div>

3 个答案: