Dialog is not opening up for the second time (after closing) when using the Dynamic data
I am writing a dialog popup to perform some task through it. Popup is opening up fine for the first time but its not showing up for the second click. Here is the code I am using to open the popup, Can you please let me know whats wrong here?
$(document).ready( function() {
$( "#ALERT_POPUP" ).dialog({
autoOpen: false,
height:400,
width:900,
modal:true,
show: 'slide',
hide: 'slide',
close: function(ev, ui) {$(this).remove();}
});
});
$( "#alertPopup").click(function() {
$.ajax({
url: "alertAction.do?reqCode=alertSearch",
success: function(returnedData){
$('#ALERT_POPUP').empty().append(returnedData).dialog('open');
return false;
}
});
});
Question: Also i Want to multiple operation on dialog single window. Can so开发者_JAVA技巧me one give me some pointer to submit the dialog form multiple time without going to parent window? Please help!!!
In the dialog's close event $(this).remove() means that you remove the "#ALERT_POPUP" div from the DOM, so the second time you want to open the dialog, it does not exist. There's no need for the close event I think.
EDIT
A working example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
$( "#ALERT_POPUP" ).dialog({
autoOpen: false,
height:400,
width:900,
modal:true,
show: 'slide',
hide: 'slide'
});
$("#alertPopup").click(function() {
$.ajax({
url: "test.html",
success: function(returnedData){
$('#ALERT_POPUP').empty().append(returnedData).dialog('open');
return false;
}
});
});
});
</script>
</head>
<body>
<div id="ALERT_POPUP"></div>
<button id="alertPopup">Click!</button>
</body>
</html>
Note that the close event is removed and the "#alertPopup" click init is inside the $(document).ready function.
精彩评论