Question

The first submit works as expected, but the next time it’s fully posted back. I’m using jQuery.form plugin, specifically the .ajaxSubmit(options) call to submit the form. There are a couple levels of wrapper div’s, but I debug the button.click binds and I can’t figure out why the second time, even with the same variables, it does a full post and my partial view is returned on a brand new page.

here, buttonid and screenid are the same on both posts. I indicate this because they’re calculated as per a naming convention like <name>Outer (wrapper), <name> (update target), and <name>Form (form to be submitted)

$('.formButton').click(function () {
    var buttonid = $(this).attr('id');
    var screenid = $('#' + buttonid).closest('div:not(.CSRForm)').attr('id').replace('Outer', '');
    //appends a hidden element so I know which button was pressed when posted
    $('#' + screenid + 'Form').append('<input type="hidden" name="submitButton" value="' + buttonid.replace(screenid, '') + '" />');
    $('#' + screenid + 'Form').submit();
}); 

mind the .formButton elements are not inside the form, which is why I had to bind the submit event as such. My partial view only returns the form and not the buttons (they are dynamic)

here is the .ajaxSubmit:

$('.CSRForm').submit(function () {
    var needsValidation = "yes";
    if (needsValidation) {
        $(this).ajaxSubmit({
            target: '#AccountSetup',
            replaceTarget: false,
            success: StepCallWithForm //to check whether the response is valid for redirecting
        });
        return false;
    }
}); 

and my MVC action if it’s relevant:

    public ActionResult AccountSetup(AccountSetupViewModel vm, string submitButton)
    {
        if (!ModelState.IsValid)
        {
            return PartialView(vm);
        }
        else
        {
            return Content(submitButton + ",AccountSetup");
        }
    }

Edit:
After inserting this line immediately inside my $(function() {:

$('#AccountSetup').ajaxForm();

I was able to stop the full postback. In Firebug, now I see ajax postback to /CSR/Home/CSR? which is where all this stuff is to begin with. It’s like the form lost its action property. Are my events somehow crossfiring?

Answer 1

Instead of binding to the click event, you could use jQuery’s live() event binding, which survives AJAX loading. You can do this by replacing:

$('.formButton').click(function () {

With

$('.formButton').live("click", function () {