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

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?

From stackoverflow

• 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'); 
  });
  

  Craig Shearer : Thanks - that was useful though not completely what I needed. I really wanted the dialog to show while the POST was happening.

  andres descalzo : in that case you can see the example of "@Craig Shearer", that would complete what you need.

• 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);
  });