Loading pages into jQuery UI Dialogboxes

Loading pages into jQuery UI Dialogboxes

Here is a method for loading pages into dialog boxes. Since elements in the loaded pages will arrive after DOM it can be needed to reload and reinit some js/jquery functionality when pulling the page.

function LoadDialog(url, title, ElementId) {
    var Box = $('#dialog_' + ElementId);
    if (Box.length === 0) {
        Box = $('<div id="dialog_' + ElementId + '" class="dialog-container"></div>').appendTo('body');
    } else { Box.empty(); }

    var Opts = { title: "Loading..", buttons: null, position: 'center', modal: true, autoOpen: false, width: GetWidth(), height: 'auto' };
    Opts.close = (function (ev, ui) { $(this).dialog("destroy"); $(this).remove(); });
    Box.dialog(Opts).html('<div class="ajax-load"><img src="/Content/loading.gif" alt="loading"></div>');
    Box.dialog('open').load(url, function () { Box.dialog({ title: title, buttons: null, position: 'center' }); });
}

function GetWidth() {
    var width = $(window).width();
    if (width > 530) { return 500; }
    else return width - 20;
}

The above function can then be coupled with elements like this:

$(function () {
    $('.asdialog').click(function (e) { LoadDialog($(this).attr('href'), $(this).attr('title'), 'box'); return false; });
});

Leave a Reply

Your email address will not be published. Required fields are marked *