Question

I’m trying to create some modal windows that load in their content dynamically using AJAX with the jQuery UI dialog widget. The idea is that dialog will ONLY exist on the page when the user requests something and then be removed again when the user clicks the close button. However with my current code I have two problems: 1.) the dialog exists on the page before being requested from what I can tell 2.) when a user closes the modal it can’t be opened again unless they refresh the page…

I have the following code in my app:

$('.ajax').live('click', function()
        {
            var url = this.href;
            var dialog = $("#dialog");
            if ($("#dialog").length == 0)
            {
                dialog = $('<div id="dialog"></div>').appendTo('body');
            }
            dialog.load(
                    url,
                    {},
                    function(responseText, textStatus, XMLHttpRequest)
                    {
                        dialog.dialog();
                    }
                );
            return false;
        });

Any help would be much appreciated. Thanks

Answer 1

Here’s the code that you need or test it there: demo

$('.ajax').live('click', function ()
{
    var url = "/home/test";
    var dialog = $("#dialog");
    if ($("#dialog").length == 0)
    {
        dialog = $('<div id="dialog"></div>').appendTo('body');
    }
    $.ajax(
        {
            url: url,
            beforeSend: function (jqXHR, settings)
            {
                //show an animated gif
            },
            complete: function (jqXHR, textStatus)
            {
                //hide the animated gif
            },
            success: function (data, textStatus, jqXHR)
            {
                dialog.dialog().html(data);
            },
            error: function (jqXHR, textStatus, errorThrown)
            {
                dialog.dialog().html("An error occured...");
            }
        });

    return false;
});