MVC 4, Jquery Mobile, Ajax.BeginForm causing forms to submit twice

Question

Does anyone know of any bugs or other insight to explain why when using MVC4 with jquery mobile, any form that is created using Ajax.BeginForm results in the form being submitted twice to the controller.

I had originally thought that since I am using the js bundling that the same js file might have been being included twice and might be triggering on form submit, however thats not the case, my list of js files are:

jquery-1.6.4.js
jquery-ui.1.8.11.js
jquery.mobile-1.1.0.js
jquery.unobtrusive-ajax.js
jquery.validate.js
knockout-2.0.0.js
MicrosoftAjax.js
MicrosoftMvcAjax.js
MicrosoftMvcValidation.js
Modernizr.js

Within the project Ajax is fully enabled for everything i.e. i'm not disabling anything through mobileinit.

I have not posted any form code because it literally happens with every form - a form with one field and a submit button will cause the submission twice - but only where Ajax.BeginForm is being used.

Html.BeginForm doesn't exhibit any of these problems.

I've been stuck on this for a few days now so any help would be greatly appreciated

Answer 1

jQuery Mobile by default hi-jacks any form submission and performs its own AJAX request. To stop this behavior you can place the data-ajax="false" attribute on any <form> tag. Also make sure to stop the regular behavior of the form so it doesn't submit normally, something like:

$('#my-form').on('submit', false);

Docs: http://jquerymobile.com/demos/1.1.0/docs/forms/forms-sample.html

You could also just use the built-in jQuery Mobile AJAX rather than including extra JS for it. Which would only require you to make the action attributes of the forms to the server-side file to which they posts.