Jquery dialog : Form submission
I am trying to do a search form using jquery dialog. Please see the complete program below. I do have a server running in my pc, and http://localhost/search. there are few doubts
- 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.
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>
You probably need this.
// include modal into form
$(this).parent().appendTo($("form:first"));
EDIT:
With this, you add your dialog into the form, making it possible to postBack
you can add this in the Open event.
Try use json as dataType, jSon is an amazing tool with ajax =)
加载中,请稍侯......
精彩评论