how to load a page with jquery ui dialog

Question

is that possible to load another page with jquery ui dialog ?

Like Dialog + Ajax

Thanks

Answer 1

If you want to load content into a dialog using Ajax, you can easily use $.load:

// initialize dialog
var dialog1 = $("#dialog").dialog({ autoOpen: false,
  height: 600,
  width: 350
});

// load content and open dialog
dialog1.load('path/to/otherPage').dialog('open');

Check an example here.

Answer 2

The design of the JQuery UI dialog is such that it needs existing content to operate upon. Typically in examples this is a DIV taken from the existing BODY of the DOM.

There are cases though where adding markup to existing pages just to create a dialog - especially if the content is loaded by AJAX - causes problems. For instance, you may have a JavaScript library that may be called from a number of pages and don't want to add markup to each one of them.

An alternative way (inspired by this) is here :

The difference being that you create the DIV programmatically (will be automatically added to the DOM) - and when the dialog closes we destroy it completely - and remove it from the DOM on the 'close' event.

function JQDialog(title, contentUrl, params) {
  var dialog1 = $("<div>").dialog(
  {
     autoOpen: false,
     modal: true,
     title: title,
     close: function (e, ui) { $(this).remove(); },
     buttons: { "Ok": function () { $(this).dialog("close"); } }
  });
  dialog1.load(contentUrl).dialog('open');
}

---

Replace dialog1.load(contentUrl).dialog('open'); with the following if you do not want the dialog to open (and potentially flicker) until the content is loaded. This will also allow it to be properly centered without additional work.

dialog1.load(contentUrl, function () {
    $(this).dialog('open');
});

Answer 3

I prefer to wait until I have the content to create the dialog. It seems more straightforward to me. Also, auto-sizing doesn't seem to work otherwise:

    $.ajax({
        'url': contentUrl,
        'success': function success(data, textStatus, xhr) {
            $("<div>" + data + "</div>").dialog({
                "width": "auto",
                "height": "auto",
                "close": function (e, ui) { $(this).remove(); }
            });
        }
    });

Answer 4

Sure, just include an iframe in your dialog's HTML.

Answer 5

If you specifically need or want an iFrame instead of injected content into the dom, I have an extension for that here: http://plugins.jquery.com/project/jquery-framedialog