Using jQuery UI Dialog, how can I load content from another webpage?

Question

The title says everything exept one thing: I dont want to add a <div id="something"></div> in the body of my webpage.

I found this on the internet:

var $mklib = $('<div></div>')
        .html('test')
        .dialog({
            title: "Create a library",
            autoOpen: false,
            show: "fade",
            hide: "fade",
            draggable: false,
            resizable: false,
            height: 150,
            width: 300,
            buttons: { "Create": function() {
                $(this).dialog("close"); }
                },      
        });
$( ".open_mklib" ).click(function() {
    $mklib.dialog( "open" );
    return false;
});

But I need the .html('test') to be 'load_that_*****_page.php'

And off topic, I need the create button to send the form that will be inside the load_that_*****_page.php...

Any superhuman to the rescue?

Thanks a lot!

---

Okay guys I got it on the internet, here is the code, but when I click Submit, it doesnt work! :P (URL: http://magix-cjquery.com/post/2010/08/01/jquery-ui-dialog-avec-soumission-de-formulaire-ajax)

$('.open_mklib').live("click",function(){
        var box_url = "./functions/modal.php";
            var form_url = "./";
        $("#mklib").load(box_url, function() {
                $(this).dialog({
                            title: 'New Library',
                        height: 'auto',
                        width:'auto',
                            resizable: false,
                        modal: true,
                        position: 'center',
                        overlay: {
                                backgroundColor: '#000',
                                opacity: 0.5
                        },
                        buttons: {
                                'Submit': function() {
                                        $("#mklib form").ajaxSubmit({
                                                url: box_url,
                                                type: "post",
                                                error: function(){
                                                        alert("theres an error with AJAX");
                                                },
                                                beforeSubmit:function(){},
                                                success: function(e){}
                                        });
                                        $(this).dialog('close');
                                },
                                'Cancel': function() {
                                        $(this).dialog('close');
                                }
                        }
                });
        });
});

Answer 1

Would this fancy you? Never did this before, but theoretically, I would assume you have to load your php first, and then wrap that in the dialog on success.

Also I included a second ajax call in your close.

var $mklib = $('<div></div>')
    .ajax({type: "GET", url: blah_blah.php,  dataType: "script", success: function(){
      .dialog({
          title: "Create a library",
          autoOpen: false,
          show: "fade",
          hide: "fade",
          draggable: false,
          resizable: false,
          height: 150,
          width: 300,
          buttons: { "Create": function() {
              $.ajax({type: "POST", url: "whever_this_goes.php", data: $("#yourForm").serialize(), success: function(){$(this).dialog("close") })}
              },      
      }); 
   }
});

$( ".open_mklib" ).click(function() {
    $mklib.dialog( "open" );
    return false;
});