Ajax submit在第一次提交後發出完整的帖子

第一次提交按預期工作，但下一次完全發回。我正在使用jQuery.form插件，特別是.ajaxSubmit(options)調用來提交表單。有幾個級別的包裝div，但我調試button.click綁定，我無法弄清楚爲什麼第二次，即使有相同的變量，它做了一個完整的帖子，我的部分視圖返回一個全新的頁。Ajax submit在第一次提交後發出完整的帖子

這裏，buttonid和screenid在兩個帖子上都是一樣的。我指出這一點，因爲他們是按照命名約定一樣<name>Outer（包裝），<name>（更新目標），以及<name>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(); 
});

記.formButton元素不內表單，這就是爲什麼我必須將提交事件綁定爲此。我的局部視圖只返回的形式，而不是按鈕（它們是動態的）

這裏是.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; 
    } 
});

和我的MVC的行動，如果是相關的：

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

編輯： 將此線立即插入我的$(function() {之後：

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

我能夠阻止完整的回發。在Firebug中，現在我看到ajax回覆到/CSR/Home/CSR?，這是所有這些東西的起點。就像表單失去了它的動作屬性。我的活動是不是交叉火力？

來源

2010-09-07 David Fox

而是結合的Click事件，你可以使用jQuery的現場（）事件結合，能經受住AJAX加載。您可以通過替換做到這一點：

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

隨着

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

來源

2010-09-08 07:05:47 Fenton

我很驚訝我是第一個+1。生活（）岩石 – Ulises 2012-07-19 00:09:29

如果您使用局部視圖替換成功回調中的原始表單，則可能會發生這種情況。

所以，當你刪除一些HTML元素（如用從服務器部分視圖替換現有的HTML），他們的所有事件都不見了。重新添加相同的HTML（從您的角度來看）只是瀏覽器的一些新HTML。它不會假設這個新的HTML是否與舊代碼相關。這就是爲什麼你必須重新添加所有的功能和事件，如果你想新的表單像以前一樣工作。

如果這是您的情況，表單將不再有submit Ajax操作附加，因此第二次將執行完整的發佈。對於這個工作，你需要重新安裝的功能成功提交事件：

$(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(); 
}

來源

2010-09-08 06:26:56

我要補充額外信息：*「當你刪除現有的HTML（表單），它的所有元素及其事件被刪除，以及因此，當重新添加相同的HTML。（基本上可以是任何東西），你必須重新操縱它（附加事件和類似事件）。「*這將更好地解釋爲什麼他必須重新附加事件的情況。 – 2010-09-08 06:36:40

@羅伯特，好點，隨時編輯我的帖子，以包括這個有價值的信息。 – 2010-09-08 06:40:02

我應該指出，我在這個頁面上有'.CSRForm'類的多個表單，所以我應該使用Sohnee的解決方案嗎？ **或**，我可以在.ajaxSubmit成功回調中使用'$ form'參數嗎？我在最近的一篇文章中提到了這個參數，具體來說我不確定它是如何使用的，但也許它是新的形式。 Sohnee的解決方案聽起來更簡單 - 就像我可以綁定一次並忘記它。 – 2010-09-08 12:09:48

我知道這是一個老問題，但我只是想補充我的2美分。

@ Sohnee的答案將工作：live()可以完成這項工作。但是，它一直是deprecated。它應與on更換：

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

來源

2012-07-19 03:04:15 Ulises

Ajax submit在第一次提交後發出完整的帖子

回答

相關問題