jQuery UI dialog for Ajax modal windows

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

can you give us the code you use to remove the dialog on the close event? Because with the code that you have provided, everything works fine exept the dialog still exist after the close event. — Alexandre Jobin
– Alexandre Jobin, Commented Sep 5, 2011 at 13:15
The close functionality is built into the jQuery UI code. So what's the reason for not RESHOWING the modal when clicking the link if the dialog still exists? — Cameron
– Cameron, Commented Sep 5, 2011 at 13:41
like i said, your code seems to work correctly on my own project and also on jsFiddler: demo. Maybe you have other code on your web page that cause a conflic. Please tell me what's the result you have on jsFiddler. — Alexandre Jobin
– Alexandre Jobin, Commented Sep 5, 2011 at 14:18
Ah seems the problem is that if the URL is invalid it will show the dialog ONLY first time but with no content and then just throw errors in the console everytime the link is clicked. Not sure why it shows the first time though if the invalid url is the issue. Tested it with a valid url and it works fine.How could I show an error inside the dialog saying the content could not be found. Also show a loading spinner while the content is being loaded etc. Thanks — Cameron
– Cameron, Commented Sep 5, 2011 at 14:48

Alexandre Jobin · Accepted Answer · 2011-09-05 14:54:44Z

2

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;
});

edited Sep 5, 2011 at 14:54

answered Sep 5, 2011 at 14:49

Alexandre Jobin

2,8714 gold badges37 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery UI dialog for Ajax modal windows

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related