Additional jQuery events submitting my Ajax.BeginForm

Question

I have an ASP.Net MVC Ajax.BeginForm that submits and updates my page properly when I click the submit button.

The problem is I need additional events to do the sa

Answer 1

Change -

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

to -

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

Answer 2

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

Answer 3

Microsoft will probably 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 4

Decided to just use a regular form and then the jQuery.Form plugin and this worked in 2 seconds! Wish i would have just went this route orginally.

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);

Man I love jQuery

Answer 5

This is a bit of a tricky issue in the current Beta of MVC. You can't use the "submit()" function because it won't trigger the onsubmit handler. Instead, you should call the onsubmit handler directly. The only trick is you need to pass an argument to onsubmit() when you call it. This argument is what becomes the "event" parameter in the handler (see the "new Sys.UI.DomEvent(event)" part). The "event" parameter is used by the MVC Ajax scripts to cancel the default behaviour, when you click the Submit button so that the Ajax stuff can happen uninterrupted.

So, if you change your code to this:

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

The onsubmit() event will be triggered when the form fields change. The code creates a "fake" event object that implements the preventDefault() method (which is the only one the MVC Ajax helpers use) so you don't get errors.