MVC3 Ajax.BeginForm OnSuccess Doesn't Run in Firefox

Question

FINAL EDIT:

After following the answer from Darin Dimitrov, I have found that the problem ended up being that the AJAX call to the Controller's method UpdateForm() was returning an empty string. This was a modification that I found necessary some time ago after experiencing a different problem. Passing an empty string was causing Firefox's parser to choke (while Chrome and IE didn't care, apparently) so I replaced the empty string with an empty div.

Edit:

Thanks to Darin Dimitrov's suggestions below, I have found that the reason I was having trouble is due to an error being thrown whenever the form in question is being submitted.

JQuery Error

The error reads "Node cannot be inserted at the specified point in the heirarchy". This is thrown each and every time the form is submitted. I noticed in the POST data that it seems to think this is an XMLHttpRequest. Is that the cause (the AJAX request in question is just returning HTML)? Here is the POST data from Firebug:

POST Data 1

POST Data 2

POST Data 3

This error reads "XML Parsing Error -- No Element Found".

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

I have an MVC3 application running on IIS7. In one of my views, I have a form being built using a 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 take the text inside the TextArea called txtInput and append it to the end of the Div called TargetDiv whenever the Send button above is clicked and clear out the text from txtInput after the appending is complete by means of the ClearTextBox() method (Javascript). The append always works in every browser; and when I run in Internet Explorer or Chrome, the clearing of the text works just fine. However, Firefox doesn't seem to want to call the ClearTextBox() method.

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

Things I've Tried

I found this guy: Ajax.BeginForm doesn't call onSuccess

The solution is to add this script:

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

I am calling this script:

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

...but I tried swapping it out just in case. No joy.

I was asked to try changing the method call to include parentheses by some folks in the C# chat room so that the HTML came out 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 that didn't help.

The folks in C# Chat also suggested I replace the Javascript call with an alert - 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 pops the message box, Firefox does not!

"data-ajax-success" looks like a custom attribute just telling it what method to call, so I doubt it's an issue with the attribute itself. I'm not sure what dev. tools firefox has (I use Chrome mostly), but I'd check there to see if it shows any JS errors elsewhere in the code. — justinb138, Jun 22 '12 at 18:44
I am using Firebug but it hasn't pointed anything out to me... =( — Chris Barlow, Jun 22 '12 at 18:54
Could you post you `ClearTextBox()` method? Just tried this (file-> new mvc3 project, used `jquery.unobtrusive-ajax.min.js`), and works fine in FF. My version of the ClearTextBox is this: `function ClearTextBox() { $("#txtInput").val(""); }` — Akos Lukacs, Jun 22 '12 at 19:32
Here is my method... but I should note that I can call this method from elsewhere on this same page and it works in Firefox, it just doesn't get called on success of the AJAX call. `function ClearTextBox() { $('textarea').val(''); }` (The `textarea` in question is the only one on the page) — Chris Barlow, Jun 22 '12 at 20:20
Could you show your `UpdateForm` action? Also you mention that you were using FireBug but you didn't say what you see in FireBug? Do you see the AJAX request being trigerred? Do you see the request? Do you see the response? Do you see an error? I have just tested the code and it worked perfectly fine in FireFox. — Darin Dimitrov, Jun 22 '12 at 21:09
You're on to something - I didn't know you could see the request results like that - freakin' sweet. — Chris Barlow, Jun 22 '12 at 21:57
Hmm... I'm getting this error --> http://stackoverflow.com/questions/8159640/node-cannot-be-inserted-at-the-specified-point-in-the-hierarchy ...but, of course, I am not using a function to call the AJAX request but a form instead. Not sure how the solution can be applied... can you specify data type in a form submit? I'm not seeing a way to do that... — Chris Barlow, Jun 25 '12 at 12:54
AHHHH - this is what you mean, maybe? "Content-Type application/x-www-form-urlencoded; charset=UTF-8" How can I tell if that is incorrect? — Chris Barlow, Jun 25 '12 at 12:58

score 1 · Accepted Answer · answered Jun 22 '12 at 21:11

Status no repro 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 perfectly fine in Chrome, FF and IE.

Also you might want to ensure that the Content-Type response HTTP header matches the actual response that you are sending. For example I have seen so many people send the application/json response header with some invalid JSON in the response body which produces the more sensitive parsers to choke.

Thanks for all your help! (Future readers: see my edits in the question) — Chris Barlow, Jun 25 '12 at 17:35

MVC3 Ajax.BeginForm OnSuccess Doesn't Run in Firefox

1 Answers1