Submit an action receiving twice when using the jQuery UI Dialog

Question

I am writing an ASP.NET MVC 4 application using jQuery and loading.

My site has modal dialogue features that worked smoothly until recently, when one of the other developers made some design changes to the website.

Below is the code that I wrote in one of my partial views, I open it in the jQuery dialog box:

@using (Ajax.BeginForm("ChangeStatus", new AjaxOptions { UpdateTargetId = "AboutOrderContainer", HttpMethod = "POST" })) { @Html.HiddenFor(m => m.OrderId) <table class="row-fluid"> <tr> <td></td> </tr> <tr> <td> Comments&nbsp;(Optional): </td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td> @Html.TextAreaFor(m => m.Comments, new { @maxlength = 255, @rows=5 }) </td> </tr> <tr> <td> <center> <input type="submit" title="OK" value="OK" class="btn" /> </center> </td> </tr> </table> } 

Previously, it worked fine, since whenever the user clicked the “OK” button, the “ChangeStatus” action was called and the view was updated.

But now, after the developer has made some changes, "ChangeStatus" gets asynchronously twice, which leads to runtime errors. I am not sure what causes the problem.

The following are the script files that load when this dialog box loads:

• ajax.dialog.custom.js
• bootstrap.js
• Jquery-1.9.1.js
• JQuery-port-1.1.1.js
• JQuery-UI-1.10.2.js
• JQuery-unobtrusive-ajax.js
• jquery.validate.js
• jquery.validate.unobtrusive.js
• Modernizr-2.5.3.js
• onmediajquery.js
• ecommercesite-custom.js

All script files (except ecommercesite-custom.js) are libraries from jQuery and boot sites. The following is the code for the ecommercesite-custom.js file:

 $(document).ready(function () { $('input[class*=btn-submit]').click(function (event) { if (($(this).closest('form').valid())) { $(this).attr("disabled", true); $(this).closest('form').submit(); } else { $(this).attr("disabled", false); } }); }); 

I'm not sure what is wrong here. I tried to delete the above js file (i.e. No. 11), but that did not help. Thus, you can ignore any consequences of the above file when thinking of a solution.

Anyone have an idea? Repeating the fact that the same code worked very well until another developer changed some styling features.

Answer 1

I fixed this problem by modifying the jquery.unobtrusive-ajax.js file to skip the asynchronous call if the submit button has a specific user attribute.

Answer 2

It looks like you can submit the form once from your script, and then again because of the default browser behavior. Try adding this to the top of the handler:

 event.preventDefault(); 

Answer 3

You change input type="submit" to input type="button"

Here you submit your form twice, by default by default, and the other from the script