Question

我的应用程序有几个jquery-ui对话框，所有这些都做了很多不同的事情。以下是它们之间的通用模板：

<div class="dialog-content">    
<form accept-charset="UTF-8" action="/NOT-UNIQUE" class="NOT-UNIQUE" data-remote="true" id="NOT-UNIQUE" method="post">
    <div class="ui-dialog-body">
 all the fields
    </div>
    <div class="ui-dialog-footer">
        <input class="button" id="NOT-UNIQUE" name="commit" type="submit" value="NOT-UNIQUE">
        <input type="button" class="button" name="cancel" value="Cancel">
    </div>
</form>
</div>

我想做的是随时提交.dialog-content表单，禁用提交按钮以便用户不多次提交。

到目前为止，我有：

$(".dialog-content").live("submit",function(){

    // Comment AJAX UI, spinner, disable - Needs to be inside the submit to work dynamically
    $("form", this).ajaxStart(function() {
        // Disable button
        $("input[type=submit]", this).attr("disabled", true);
    });
    $("form", this).ajaxComplete(function() {
        // Re-enable button
        $("input[type=submit]", this).removeAttr("disabled");
    });
});

但这似乎不起作用。目标是不必为每个对话框编写此文件，但一旦适用于所有对话框。

思想？

Answer 1

ajaxStart / Complete是一个全局事件，因此您无法分辨它的形式。

jQuery UI对话框是自动执行AJAX还是在其他地方调用它？如果它是自动执行的，请查看API ...它可能会触发表单上的自定义事件，比如说“formSubmitted”，所以改为绑定到它：

$("form", this).bind("formSubmitted", function() {
    // Re-enable button
    $("input[type=submit]", this).removeAttr("disabled");
});

如果你自己调用AJAX，那么只需在AJAX成功处理程序中的表单上触发“formSubmitted”。

Answer 2

今天碰到了这个，想和其他人分享。

虽然您无法调用未知表单，但您可以像我一样创建“Ajax Wrapper”。它具有压缩代码的优点，同时不影响功能。缺点是性能开销很小。

在函数中定义所需的所有默认值。我喜欢这个，因为我在对话框中使用了一些近乎全局的成功/错误句柄。

function ajaxWrapper(srcForm,overrides) {
  var ret = $.extend(true,{type: "POST",
    url: $(srcForm).attr('action'),
    contentType: "application/x-www-form-urlencoded",
    data: {
        tzOffset: new Date().getTimezoneOffset(),
    },
    success: // success handler,
    error: // error handler,
    beforeSend: function(jqXhr,plainObject) {
        $(srcForm).find("button[type=submit], button[type=reset], input[type=submit], input[type=reset]").prop("disabled", true);
    },
    complete: function(jqXHR, textStatus) {
        $(srcForm).find("button[type=submit], button[type=reset], input[type=submit], input[type=reset]").prop("disabled", false);
    }
  },overrides);
  $.ajax(ret);
}

它使用$.extend(true,,)来合并对象。 True将其发送到深层副本，使两个对象都具有data对象并从两者继承属性，同时覆盖overrides，其中两个对象的data可能会发生冲突

如果您不想覆盖，删除true,。根据当前的文档，不支持False。

我把这个函数简单地称为

ajaxWrapper($(this),{url: $(this).attr('action'), // I choose to leave action in just to make clear to me where this ajax is submitting
    data: {ObjectID: $('#myID').val(),
        f1: $('#f1').val(),
        f2: $('#f2').val(),
        someCheckbox: $('#someCheckbox').prop('checked')}
});

jQuery将ajaxStart和ajaxComplete绑定到表单类型？

2 个答案: