jQuery binding ajaxStart and ajaxComplete to a form type? -
my app has several jquery-ui-dialogs, different things. here's common template between them:
<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"> 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>
what i'd anytime .dialog-content form submitted, disable submit button users don't submit multiple times.
so far have:
$(".dialog-content").live("submit",function(){ // comment ajax ui, spinner, disable - needs inside submit 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"); }); });
but doesn't seem work. goal not have write every dialog once works dialogs.
thoughts?
ajaxstart/complete global event, can't tell form for.
is jquery ui dialog doing ajax automatically or calling somewhere else? if doing automatically, have @ api... fires custom event on form, "formsubmitted", bind instead:
$("form", this).bind("formsubmitted", function() { // re-enable button $("input[type=submit]", this).removeattr("disabled"); });
if you're calling ajax yourself, trigger "formsubmitted" on form in ajax success handler.
Comments
Post a Comment