Jquery对话框：表单提交 [英] Jquery dialog : Form submission
本文介绍了Jquery对话框：表单提交的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用jquery对话框执行搜索表单。请参阅下面的完整程序。我的电脑上运行了一台服务器，并且 http：// localhost / search 。很少有人怀疑
- ajax调用有问题，因为我收到错误消息。我也尝试了GET请求。
- 在chrome中，服务器上的请求类型是POST，但在Iceweasel（Firefox）中它是OPTIONS
- 在Iceweasel（Firefox）中，模式窗口保持打开状态，并显示错误。但在谷歌浏览器中，模态窗口关闭。这可能与以下javascript代码有任何问题有关。
- 我不是JS的专家。
- Something is wrong with the ajax call, as I get an error message. I tried GET request as well.
- In chrome, the request type at server is POST , but in Iceweasel (Firefox) it is OPTIONS
- In Iceweasel (Firefox), the modal window stays open, and displays error. But in google chrome, the modal window closes. This may be related 2
- anything wrong with javascript code below. I am not an expert on JS.
非常感谢，
bsr。
thank you very much,
bsr.
<html><head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input id="myButton" name="myButton" value="Click Me" type="button" />
<div id="myDiv" style="display:none">
<form id="myform">
<input name="q" placeholder="Search ..">
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(document).ready( function(){
jQuery("#myButton").click( showDialog );
$myWindow = jQuery('#myDiv');
$myWindow.dialog({ width: 400, autoOpen:false, title:'Hello World',
overlay: { opacity: 0.5, background: 'black'},
buttons: {
"Submit Form": function() { $('form#myform').submit();},
"Cancel": function() {$(this).dialog("close");}
}
});
});
var showDialog = function() {
$myWindow.show();
$myWindow.dialog("open");
}
var closeDialog = function() {
$myWindow.dialog("close");
}
var successFn = function (response) {
$("#myform").parent().html('').html(response);
}
var errorFn = function (xhr, ajaxOptions, thrownError){
$("#myform").parent().html('').html(xhr.statusText);
}
$('form#myform').submit(function(){
$.ajax({
type: 'post',
dataType: 'html',
url: '/search',
async: false,
data: $("#myform").serialize(),
success: successFn,
error: errorFn
});
});
</script>
</body></html>
推荐答案
你可能需要这个。
// include modal into form
$(this).parent().appendTo($("form:first"));
编辑：
有了这个，你将您的对话框添加到表单中，可以使用postBack
With this, you add your dialog into the form, making it possible to postBack
您可以在Open事件中添加它。
you can add this in the Open event.
尝试使用json作为dataType， jSon 是一个令人惊叹的工具，其中包含ajax =）
Try use json as dataType, jSon is an amazing tool with ajax =)
这篇关于Jquery对话框：表单提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
