ASP.NET MVC shows ajax result in a new page instead of UpdateTargetId

Question

I am using Ajax.BeginForm to make an ajax request but asp.net mvc displays results in a new page instead of the div I set in UpdateTargetId. I ensured that I have only one div with the same name on the page.

The generated markup is:

<form action="/MyController/MyAction" id="myform" method="post" onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: 'myDiv', onSuccess: Function.createDelegate(this, someJsFunction) });">
    <input type="text" name="name" id="userInput" value="" />
    <input type="submit" id="mySubmit" style="display:none" />
    </form><div id="myDiv"></div>

Here, the submit button is not displayed because I am clicking it with javascript (I am using the same method on another page, which works):

$(document).ready(function() {
            $("[name:'name']").bind("keyup", function() {
                $("#mySubmit").click();
            })

I am using latest version of asp.net mvc. I get no script errors, I double checked all id's are unique, all js functions exist and work without errors. The markup is html strict valid except that inputs cannot be directly in the form but that works fine on other pages. Serverside code runs successfully and the returned markup is perfectly correct. Everything seems fine except that the result is displayed on a new page instead of inside my div. What am I doing wrong?

Answer 1

First of all a general tip: why do you click an invisible submit button in order to submit? You could also just use:

 $("#myform").submit();

And relating to your problem, it must be some problem with the javascript code, maybe you didn't include the ajax js library on the page... Because if the javascript fails , the form will submit normally using the post method on the supplied action. Try turning on client script debugging in IE (actually you have to disable "disable script debugging" in the advanced panel in Tools/Internet Options. Or use Firebug for Firefox.

Answer 2

I had the very same problem, and the solution was referencing MicrosoftAjax.js and MicrosoftMvcAjax.js, which I had forgotten.