How to use jQuery to show a page returned from a POST in a dialog?

Question

I'm wanting to use the jquery dialog to open a modal dialog, and in it display the returned page from my server that results from a POST.

How can I do this?

Right now I've got something like this:

var ser = Form.serialize();

$.post("myform", ser, function(result) { $j(result).dialog({title: "Add Shift"}); });

But it's shows 2 dialogs, and not until the page has come back from the server, which makes sense as that's the way I've got it coded (i.e. do a post then take the result and put it in a dialog). How do I open the dialog, do the post and put the resulting page in it?

Answer 1

this may be an option:

HTML

<div id="idMyResultDiv" style="display:none"></div>

JS

$("#idMyResultDiv").dialog({
   title: "Add Shift",
   autoOpen: false
});
$.post("myform", ser, function(result) { 
    $("#idMyResultDiv").html(result);
    $("#idMyResultDiv").dialog('open'); 
});

Answer 2

I wanted to open the dialog immediately, then show the result of the POST once it completed. Here's what I did:

$("#idMyResultDiv").dialog({
     title: "Add Shift", modal: true, autoOpen: false });

$("#idMyResultDiv").html("Loading");
$("#idMyResultDiv").dialog("open");

$.post("myform", ser, function(result) {
    $("#idMyResultDiv").html(result);
});