MVC3 Ajax.BeginForm OnSuccess not working in Firefox

Question

COMPLETION:

After Darin Dimitrov’s answer, I found that the problem is that the AJAX call to the Controller UpdateForm() method returned an empty string. This was a modification that I found necessary some time ago after another problem arose. Passing an empty line caused the Firefox parser to suffocate (so far, apparently, Chrome and IE did not care), so I replaced the empty line with an empty div .

Edit:

Thanks to the suggestions of Darin Dimitrov below, I found that the reason I had problems is due to an error that occurs when submitting the form.

Read error "Node cannot be inserted at the specified point in the hierarchy." This is thrown every time a form is submitted. I noticed in the POST data that this seems to be XMLHttpRequest. Is that the reason (the AJAX request in question just returns HTML)? Here are the POST data from Firebug:

This error reads "XML parsing error - element not found".

FYI - the returned HTML is always an empty string ...

---

I have an MVC3 application running on IIS7. In one of my views, I have a form created using the Microsoft HTML helper function:

 @using (Ajax.BeginForm("UpdateForm", new AjaxOptions { UpdateTargetId = "TargetDiv", InsertionMode = InsertionMode.InsertAfter, OnSuccess = "ClearTextBox" })) { @Html.TextArea("txtInput", new { id = "txtInput", cols = "20", rows = "5", wrap = "virtual" }) <input id="send" class="button" type="submit" value="Send"/><br /> } 

This generates the following HTML when the controller provides this view:

 <form action="/RootName/ControllerName/UpdateForm" data-ajax="true" data-ajax-mode="after" data-ajax-success="ClearTextBox" data-ajax-update="#TargetDiv" id="form0" method="post"> <textarea cols="20" id="txtInput" name="txtInput" rows="5" wrap="virtual"></textarea> <input id="send" class="button" type="submit" value="Send"><br> </form> 

What I'm basically trying to do here is to take the text inside the TextArea called txtInput and add it to the end of the div called TargetDiv when the Send button above is pressed and remove the text from txtInput after the completion of the addition using the ClearTextBox() (Javascript) method . The application always works in every browser; and when I run in Internet Explorer or Chrome, text clearing works fine. However, Firefox does not seem to want to call the ClearTextBox() method.

Firefox not compatible with this data-ajax-success option in form signature?

---

Things i tried

I found this guy: Ajax.BeginForm does not call onSuccess

The solution is to add this script:

 <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script> 

I call this script:

 <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> 

... but I tried to change it just in case. There is no joy.

I was asked to try changing the method call to include parentheses by some people in the C # chat room so that the HTML looks like this:

 <form action="/WebChat/TMWC/UpdateForm" data-ajax="true" data-ajax-mode="after" data-ajax-success="ClearTextBox()" data-ajax-update="#chatText" id="form0" method="post"> <textarea cols="20" id="txtInput" name="txtInput" rows="5" wrap="virtual"></textarea> <input id="send" class="button" type="submit" value="Send"><br> </form> 

But it did not help.

People in C # Chat also suggested that I replace the Javascript call with a warning - something like this:

 <form action="/WebChat/TMWC/UpdateForm" data-ajax="true" data-ajax-mode="after" data-ajax-success="alert('yo!')" data-ajax-update="#chatText" id="form0" method="post"> <textarea cols="20" id="txtInput" name="txtInput" rows="5" wrap="virtual"></textarea> <input id="send" class="button" type="submit" value="Send"><br> </form> 

While Chrome appears in the message box, Firefox does not.

Answer 1

Status is not reproduced in a newly created ASP.NET MVC 3 application.

Controller:

 public class HomeController : Controller { public ActionResult Index() { return View(); } [HttpPost] public ActionResult UpdateForm() { return Content(DateTime.Now.ToLongTimeString()); } } 

View ( ~/Views/Home/Index.cshtml ):

 <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script> <script type="text/javascript"> function ClearTextBox() { $('textarea').val(''); } </script> <form action="/Home/UpdateForm" data-ajax="true" data-ajax-mode="after" data-ajax-success="ClearTextBox" data-ajax-update="#TargetDiv" id="form0" method="post"> <textarea cols="20" id="txtInput" name="txtInput" rows="5" wrap="virtual"></textarea> <input id="send" class="button" type="submit" value="Send"><br> </form> <div id="TargetDiv"></div> 

Works great in Chrome, FF, and IE.

You can also verify that the HTTP header of the Content-Type response matches the actual response you are sending. For example, I saw how many people send an application/json response header with some invalid JSON in the response body, which creates more sensitive parsers for the throttle.