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方法将表单的内容转换成JSON格式load方法接受。整个调用将基本上加载提交到myDiv后生成的页面内容。 yourFormIdHere是你给你的id <form>标签