Dialog is not re-invoked after close

Dialog is not re-invoked after close


Hi guys,
I am a bit of a newbie to jQuery UI. I am playing with the Dialog
widget. And here is the situation.
Basically I have a form that does and ajaxForm submit to get the
results from the server, upon success it invokes the dialog to display
the results. However when the dialog is closed and form is submitted
again, the dialog does not re-appear. I understand it is something
very simple, but I don't see it. :-) Would you be so kind to help out?
Thanks a bunch in advance.
Here is the HTML:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>jQuery LightBox and Tree</title>
<link rel="stylesheet" type="text/css" href="web/css/cupertino/
jquery-ui-1.7.1.custom.css">
<script src="http://www.google.com/jsapi" type="text/javascript"></
script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<script type="text/javascript" src="web/js/jquery.bgiframe.min.js"></
script>
<script type="text/javascript" src="web/js/jquery-
ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="web/js/jquery.form.js"></script>
<script type="text/javascript">
$.ui.dialog.defaults.bgiframe = true;
$(document).ready(function() {
var options = {
success: function(response) {
$('#dialog').dialog({modal:true});
$('#dialogContent').html(response);
}
};
$('#myForm').ajaxForm(options);
});
</script>
</head>
<body>
<form id="myForm" action="web/jsp/sample.jsp" method="post">
Name: <input type="text" name="name" />
Comment: <textarea name="comment"></textarea>
<input type="submit" value="Submit" />
</form>
<div id="dialog">
<p id="dialogContent">
</div>
</body>
</html>