Make Submit button not kill my dialog box - ajax

Question

I have a form and I'm trying to perform Ajax posts.
With the default submit button the dialog window closes, with the jQuery button, nothing happens.
I want the dialog window to stay open so I can keep doing Ajax requests uninterrupted and only close when I press Esc or click the big "X".
Thanks
<div id="formBox" style="display: hidden;">
<form>
<fieldset>
<legend>File System Space Calculator</legend>
<p>
<label for="curr_alloc">Current Space Allocation:</label>
<br />
<input type="text" size="5" name="curr_alloc" id="curr_alloc" />
KB <input type="radio" name="curr_unit" value="KB" />
MB <input type="radio" name="curr_unit" value="MB" />
GB <input type="radio" name="curr_unit" value="GB" checked/>
TB <input type="radio" name="curr_unit" value="TB" />
</p>
<p>
<label for="curr_percent">Current Usage Percentage:</label>
<br />
<input type="text" size="5" name="curr_percent" id="curr_percent" />
</p>
<p>
<label for="desired_percent">Desired Usage Percentage:</label>
<br />
<input type="text" size="5" name="desired_percent" id="desired_percent" />
</p>
<br />
<p>
<input type="submit" value="calculate"/></p>
</fieldset>
</form>
</div>
<div id="calcBox" style="display: none;"> </div>
<script>
$(document).ready(function() {
$("#formBox").dialog({
bgiframe: true,
autoOpen: false,
height: 500,
width: 500,
modal: false,
closeOnEscape: true,
title: "Calculator",
closeText: 'Close',
buttons:
{
"Calculate": function()
/* form post */
$("#calcQuery").submit(function(){
$.post("calc.php", $("#calcQuery").serialize(),
function(data){
if (data.length > 0)
{
$("#calcBox").html(data);
$("#calcBox").show();
}
else
{
$("#calcBox").html("<h1>nuttin' here yet</h1>");
}
}, "html");
return false;
});
/* form post */
}
}
});
$('#calcButton').click(function(){
$('#formBox').dialog('open');
return false;
});
});
</script>

Answer 1

In your button method, just make the post. You shouldn't have to do anything else.
buttons:{
"Calculate":function(){
$.post("calc.php", $("#calcQuery").serialize(), function(data){ if (data.length > 0) {
$("#calcBox").html(data);
$("#calcBox").show();
}
else
{
$("#calcBox").html("<h1>nuttin' here yet</h1>");
}
}, "html");
});
}
I apologize for the formatting. I worked with what you gave me without opening an editor. You shouldn't need to return false in a jQuery-UI button.

Answer 2

This works (except for form reset which is addressed in another post)
// form popup
$(document).ready(function()
{
$("#formBox").dialog({
bgiframe: true,
autoOpen: false,
height: 600,
width: 400,
modal: false,
closeOnEscape: true,
title: "Calculator",
buttons: {
"Calculate": function() {
// form post
$.ajax({
type: "POST",
url: "calc.php",
data: $("#calcQuery").serialize(),
dataType: "html",
success: function(response)
{
$("#calcBox").html(response);
$("#calcBox").show();
},
error: function
(xhr, ajaxOptions, thrownError)
{
alert(xhr.status);
alert(thrownError);
}
}).responseText;
// form post
}
}
});
$('#calcButton').click(function(){
$('#formBox').dialog('open');
});
});