3

I'm using MVC 3 with UnobtrusiveJS enabled.

I have a form created with Ajax.BeginForm with a DropDown in there. I have an onchange=this.form.onsubmit handler to submit the form when the value changes.

The problem is that my browser console is showing the message "Uncaught TypeError: Property 'onsubmit' of object # is not a function" when i change the dropdown.

If i change the handler to this.form.submit() it submits the form fine but without ajax.

I've referenced jquery, jquery-unobtrusive-ajax and the MS Ajax js files, but with no luck.

If i disable UnobtrusiveJS, it works fine.

Any ideas?

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

View:

@using (Ajax.BeginForm("AddToGroup", new AjaxOptions() { UpdateTargetId = "statusText" }))
                {
                    @Html.Hidden("username", @friendProfile.Username)
                    @Html.DropDownList("groupId", @Model.UserGroups, "Add to group...", new { @onchange = "this.form.onsubmit()" })
                    <input type="submit" value="Submit" />
                    <span id="statusText"></span>
                }
arrkaye
  • 656
  • 8
  • 22

1 Answers1

0

That should just be this.form.submit() for the "change" handler.

Pointy
  • 405,095
  • 59
  • 585
  • 614
  • Thanks for the response. as mentioned in the original post, changing to submit() does submit the form, but NOT using ajax, hence the entire page updates showing the return string of the action. – arrkaye Jun 25 '11 at 17:48
  • Well, you're getting the error because there's no such thing as "onsubmit" on the form element. I'm not sure what you have to do to get the ASP ajax stuff to work. – Pointy Jun 25 '11 at 21:28
  • The point here is that if I disable UnobtrusiveJavascript, then magically it finds the 'onsubmit' on the form element. I'm guessing that the javascripts its using to do the unobtrusive bit isnt working properly, hence with it enabled, onsubmit no longer exists. – arrkaye Jun 27 '11 at 22:02
  • OK then you might see what happens if instead of calling "onsubmit" you do, `$(this.form).submit()` which will trigger any jQuery-registered submit handlers. – Pointy Jun 27 '11 at 22:03
  • Again, as mentioned in the original post, calling submit() works, but refreshes the entire page. What I think is happening is that the MSAjax code is not assigning the onsubmit() handler when UnobJS is enabled, but as the javascript is integrated into the html page with UnobJs disabled, it works fine. – arrkaye Jun 30 '11 at 11:36
  • There are ways of attaching event handlers that do not involve an "onsubmit" property, and that's probably what the library is doing. That's why I suggested calling the **jQuery** "submit()" method - it's not the same as directly calling "submit()" on the DOM node. – Pointy Jun 30 '11 at 11:39