Submit button doesn't work for ajax form rendered in dynamic partial view

Question

I have some jQuery that loads a partial view and inserts it into the DOM. So far, all good.

But now I've made some changes to the rendered user control to include an Ajax form. However, the submit button for this form doesn't appear to trigger the Ajax call. From what I can tell, it's not doing anything at all. My breakpoints in the controller aren't getting triggered either.

If I use a link and add onclick="submit()", the form gets submitted, and triggers the action in my controller fine, but of course, this is doing a plain post and not an ajax post.

The form is like:

<% using(Ajax.BeginForm("actionName", new AjaxOptions {
           OnSuccess = "updatePanel" })) { %>
  <!-- form elements in here -->
  <input type="submit" />
<% } %>

I've just discovered that it does the post if I change OnSuccess to OnComplete, which I don't understand at all.

However, even though changing it to OnComplete is working, I get an exception in the microsoft ajax library, somewhere in:

try {
  a._webRequest.completed(Sys.EventArgs.Empty)
} finally {
  if (a._xmlHttpRequest!=null) {
    a._xmlHttpRequest.onreadystatechange = Function.emptyMethod;
    a._xmlHttpRequest = null
  }
}

The cursor is higlighted at the end of finally, says Object doesn't this property or method.

I suppose I could live with that; it's just annoying testing stuff when it keeps throwing an exception in MicrosoftAjax.js and tripping the debugger in VS.

Answer 1

If you are using OnSuccess do you not need to have UpdateTarget also which is why it wasnt firing in the first place?

Answer 2

Have you made sure you're referencing the Microsoft AJAX JS files?

You need to make sure you have...

<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

Somewhere in your site. By default I don't think the ASP.NET MVC Project adds these JS references.