Question

Rigth now, I am using this function to load content from a different page inside a jquery ui dialog:

function openDialogByUri(div, uri, title, width, height, buttonsArray) {
    div.load(uri, function() {
        div.dialog({
            title: title,
            width: width,
            height: height,
            position: 'middle',
            resizable: false,
            buttons: buttonsArray
        });
    });
}

For example like this:

$('a.dictionary').click(function() {
    openDialogByUri($otherDialogContainer, '/test.php', 'Dialog title', 600, 400, 
        {
            'Close': function() {
                $otherDialogContainer.dialog('close');
            }
        }
    );
    return false;
});

The problem is that it may take some time until the content from the external page loads. Until that happens the dialog does nto appear and it looks like nothing is happening to users.

How can I modify that function to work like this:

When a user clicks on a link calling the function above, the dialog opens immediatelly. Inside the dialog there is some loading bar or similar image which indicates that the contetn is loading. Once the content is loaded insert it inside the dialog.

Answer 1

Well, this seems to work:

function openDialogByUri(div, uri, title, width, height, buttonsArray) {
    div.html("<div style=\"height: "+(height-80)+
             "px; background: url('/images/ajax-loader.gif') center center no-repeat;\"></div>");
    div.dialog({
        title: title,
        width: width,
        height: height,
        position: 'middle',
        resizable: false,
        buttons: buttonsArray
    });
    $.ajax({
        url: uri,
        success: function(response) {
            div.html(response);
        },
        error: function(response) {
            alert(response);
        }
    });
}