jQuery對話框通過Ajax加載表單，將表單提交回模式對話框

Question

我結合了幾個stackoverflow問題來獲取下面的代碼。 這些鏈接通過ajax以模式罰款的方式加載編輯表單，但是在提交表單時，整個頁面都會提交並重新加載。 我只想重新加載模態。

<script charset="utf-8" type="text/javascript">
$(document).ready(function() {

jQuery(".ajax").click( showDialog );

//variable to reference window
$myWindow = jQuery('##myDiv');

//instantiate the dialog
$myWindow.dialog({ height: 350,
width: 400,
modal: true,
position: 'center',
autoOpen:false,
title:'Edit Policy',
overlay: { opacity: 0.5, background: 'black'},
open: function(type,data) { $(this).parent().appendTo("form"); }
});
}
);

//function to show dialog   
var showDialog = function() {
$('##myDiv').load(
this.href,
{},
function (responseText, textStatus, XMLHttpRequest) {
//if the contents have been hidden with css, you need this
$myWindow.show(); 
//open the dialog
$myWindow.dialog("open");
}
);

//prevent the browser to follow the link
return false;
}

//function to close dialog, probably called by a button in the dialog
var closeDialog = function() {
$myWindow.dialog("close");
}
</script>

Answer 1

您有兩種選擇：

• 通過AJAX提交表單
• 提交表單到隱藏的iframe

提交后，處理更新模型內容。

Answer 2

嘗試通過jQuery load方法提交表單，如下所示：

$("#myDiv").load("your_submit_page_url_here", $("#yourFormIdHere").serializeArray());

serializeArray方法會將表單內容轉換為load方法接受的JSON格式。 整個調用將基本上將提交后的頁面內容加載到myDiv 。 yourFormIdHere是您賦予<form>標記的ID