Question

I have problem with Jquery UI dialog,when i click the button the first time, it does show the dialog but not in modal dialog, but when you click it the second time, it show it correctly as a modal dialog

$('.ajax').live('click', function ()
{
    var url = "/home/test";
    var dialog = $("#dialog");

    $( "#dialog" ).dialog({
        height: 140,
        title:"Title",
        modal: true
    });


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

Here is the code for the button click event

<button class="ajax">open dialog</button>

see this link to test the above code

http://jsfiddle.net/jRPfu/13/

Answer 1

Here is how I would do it.

1. You declare a variable dialog so use it afterwards

2. Check directly if a #dialog element was found with dialog.length. In case it’s empty, create your markup

3. Initialize your dialog with the option autoOpen: false. This way the dialog is initialized once and for all but it will remain hidden.

4. In your ajax callbacks, call the open method to show the dialog with dialog.dialog('open'). As a side note, it seems more logic to set the content of the dialog and then open it.

Further reading:

• autoOpen option
• open method

Here’s the modified code:

var dialog = $("#dialog");

if (dialog.length == 0) {

    dialog = $('<div id="dialog"></div>').appendTo('body');

    dialog.dialog({
        height: 140,
        title: "Title",
        modal: true,
        autoOpen: false
    });

}

$.ajax({
    url: url,
    ...
    success: function(data, textStatus, jqXHR) {
        dialog.html(data).dialog('open');
    },
    error: function(jqXHR, textStatus, errorThrown) {
        dialog.html("An error occured...").dialog('open');
    }
});

DEMO