Why does my jquery ajax form submit once on first submit, twice on second submit...?
Form submitted twice after updating from ASP MVC 3 Preview to Beta
ASP.NET AJAX.BeginForm sends multiple requests
My form has OnBegin and OnSuccess handlers as shown below. The first time I submit it works fine. The second time I submit OnBegin and OnSuccess are called twice. The third time the event handlers are called three times, and so on.
@using (Ajax.BeginForm("SaveTaxpayer", "Taxpayer",
null,
new AjaxOptions { HttpMethod = "Post", OnBegin = "SaveTaxpayerBegin", OnSuccess = "SaveTaxpayerSuccess", OnFailure = "radarApp.formSubmitFailure" },
new { id="tpForm", style = "form-horizontal" }))
{...}
I've found several posts on SO that describe a similar problem and it turns out the developer was loadng jquery-unobtrusive multiple times. I am not loading jquery multiple times. I beleive if I were the event handlers would fire twice every time. I am only loading jQuery in my layout page and that page is called once.
I've also found a post where the answerer suggests
$("#myform").unbind('submit');
This does not work for me when placed in OnBegin, OnSuccess, or both.
Several posters have faced a similar problem and resolved it returning PartialView versus View. I am returning a Json object so I dont think that is my problem either.
I've removed all code from my form event handlers for debugging:
function SaveTaxpayerBegin() {
debugger;
}
function SaveTaxpayerSuccess(response) {
debugger;
$.get(response.RedirectURL, function (data) { $('#content').empty().html(data); }, 'html');
}
My controller returns a simple Json object with a string property that should be self evident: RedirectURL.
'#content' is a div in index.cshtml that is the content div for all partial pages in my single page application. The page that hosts my form is called using the same $.get... that you see in the SaveTaxpayerSuccess function above. This is why this problem is so confusing for me. The content div is completely blown away every time my page is loaded. It appears jquery or some javascript class is holding on to the form submit event handlers.
Note also that I am calling .empty() in my $.get success handler (AND in the page that loads my form). The jquery documentation for .empty() says "To avoid memory leaks, jQuery removes other constructs such as data and event handlers from the child elements before removing the elements themselves." This does not appear to be happening.
