Additional jQuery events representing my Ajax.BeginForm

Question

I have an ASP.Net MVC Ajax.BeginForm that correctly displays and refreshes my page when I click the submit button.

The problem is that I need additional events to do the same, for example, when they change the input text. Extra events properly represent the form, but they bypass the javascript onsubmit generated in the form tag Ajax.BeginForm.

Here is the form tag generated by Ajax.BeingForm:

<form action="/Store/UpdateCart" method="post" onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: 'updatedContent' });"> 

And here is jQuery to bind my other events that should submit the form via Ajax:

  $("#ShippingType, #ViewCart .ddl").bind("change", function() { $("#ViewCartPage form").submit() }); 

Any ideas on how to get these extra events to trigger onsubmit, like him to me too?

Answer 1

I decided to just use the regular form and then the jQuery.Form plugin, and it worked in 2 seconds! I wish I had just set off on this route.

 var options = { target: '#updatedContent', // target element(s) to be updated with server response beforeSubmit: showRequest, // pre-submit callback success: showResponse // post-submit callback }; $('#ViewCartPage form').ajaxForm(options); 

The Man I Love jQuery

Answer 2

Microsoft is likely to break us, but:

 function SubmitMvcAjaxForm(formName) { eval('var event = new Object(); event.type="keypress"; ' + document.forms[formName].attributes["onsubmit"].value.replace('(this,', '(document.forms["' + formName + '"],')); } 

Answer 3

This is a bit of a problem in the current beta version of MVC. You cannot use the submit () function because it will not run the onsubmit handler. Instead, you should call the onsubmit handler directly. The only trick is that you need to pass the onsubmit () argument when you call it. This argument is what becomes an “event” in the handler (see Section “new part of Sys.UI.DomEvent (event)”). The event parameter is used by Ajax MVC scripts to override the default behavior when you click the Submit button so that Ajax stuff can break.

So, if you change your code to this:

 $("#ShippingType, #ViewCart .ddl").bind("change", function() { $("#ViewCartPage form").onsubmit({ preventDefault: function() {} }) }); 

The onsubmit () event will fire when the form fields change. The code creates a "fake" event object that implements the preventDefault () method (which is the only one that uses the MVC Ajax helpers), so you get no errors.

Answer 4

Edit -

 bind("change", function() { $("#ViewCartPage form").submit() }); 

to -

 bind("change", function() { $("#ViewCartPage form").onsubmit() }); 

Answer 5

I used Sichbo's answer in MVC2, but I found that with MVC3 you no longer need these workarounds (i.e. $ ('# yourformid'). Submit () will now work for ajax calls).