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

jquery对话框通过ajax加载表单，将表单提交回模态对话框

2 个答案: