Ajax submit在首次提交后发布完整帖子

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.

第一次提交按预期工作,但下次完全回发。我正在使用jQuery.form插件,特别是.ajaxSubmit(options)调用来提交表单。有几个级别的包装div,但是我调试了button.click绑定,我无法弄清楚为什么第二次,即使使用相同的变量,它也会发布一个完整的帖子,我的部分视图会返回全新页。

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)

这里,buttonid和screenid在两个帖子上是相同的。我指出这是因为它们是根据命名约定计算的,如 Outer(包装器), (更新目标)和 Form(要提交的表单)

$('.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)

请注意.formButton元素不在表单内部,这就是为什么我必须绑定提交事件的原因。我的局部视图只返回表单而不是按钮(它们是动态的)

here is the .ajaxSubmit:

这是.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:

和我的MVC行动如果相关:

    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() {:

编辑:在我的$(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?

我能够停止完整的回发。在Firebug中,现在我看到ajax回发到/ CSR / Home / CSR?这是所有这些东西开始的地方。这就像表格失去了它的动作属性。我的活动是否会以某种方式交火?

3 个解决方案

#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:

您可以使用jQuery的live()事件绑定,而不是绑定到click事件,该事件绑定可以在AJAX加载后继续存在。您可以通过替换:

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

With

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

#2

This could happen if you replace the original form in the success callback with the partial view.

如果使用局部视图替换成功回调中的原始表单,则可能会发生这种情况。

So when you remove some HTML elements (as in replace existing HTML with partial view from the server) all their events are gone as well. Re-adding the same HTML (from your point of view) is just some new HTML to the browser. It doesn't make assumptions whether this new HTML is related to old code or not. That's why you have to re-add all functionality and events if you want the new form to work as it did before.

因此,当您删除一些HTML元素时(如从服务器替换部分视图的现有HTML),所有事件也都消失了。重新添加相同的HTML(从您的角度来看)只是浏览器的一些新HTML。它不会假设这个新HTML是否与旧代码相关。这就是为什么如果您希望新表单像以前一样工作,则必须重新添加所有功能和事件。

If this is your case the form will no longer have the submit Ajax action attached and therefore the second time it will perform a full post. For this to work you need to reattach the submit event in the success function:

如果是这种情况,表单将不再附加提交Ajax操作,因此第二次执行完整帖子。为此,您需要在success函数中重新连接submit事件:

$(function() {
    ajaxifyForm();
});

function ajaxifyForm() {
    $('#AccountSetup').ajaxForm({
        target: '#AccountSetup',
        replaceTarget: false,
        success: stepCallWithForm
    });
}

function stepCallWithForm(result) {
    // If you replace the #AccountSetup form with the 
    // returned partial result you need to reattach the AJAX submit:
    ajaxifyForm();
}

#3

I know this is an old question but I just wanted to add my 2 cents.

我知道这是一个老问题,但我只想加2美分。

@Sohnee's answer will work: live() does the job. However, it has been deprecated. It should be replaced with on:

@ Sohnee的答案将起作用:live()完成工作。但是,它已被弃用。它应该替换为:

$("#WrapperDiv").on({
      click:myFunction
   },"#formButton");

#1