jQuery对话框第二次不显示内容

Question

I have tried all the possible ideas to get rid of the problem, I know its a known issue, but how do I get past it, basically jQuery ui does not show the dialog when called twice, using

self.$popup.dialog("open");

I am using jQuery Ui 1.8.9 and jQuery 1.4.4

Here's my code:

   self.$popup = $("#import_box_dialog").dialog({
        autoOpen: false,
        title: 'Import Albums',
        modal: true,
        position: "top",
        height: 600,
        maxWidth: 800 ,
        minWidth: 400 ,
        show:"slide",
        width :700,
        "buttons": [
            {
                text: "Import",
                click: self.doImport
            }
        ]
    });

Another queer thing i saw was that the dialog box content gets embedded in the outer DOM element.

My dialog DOM structure is like : import_box->

<div class="media_import_box" >
    <div id="import_box_dialog">
        <ul id="media_content"></ul>
    </div>
</div>

and when when it is displayed second time the DOM tree looks like this

The "import_box_dialog" actually moves out of the "import_box" div and I have no idea how it happens, but the display property is none, which does not change when i call the dialog again.

Answer 1

$(document).ready(function() {
    var $dialog = $('<div></div>')
        .html('This dialog will show every time!')
        .dialog({
            autoOpen: false,
            title: 'Basic Dialog'
        });

    $('#opener').click(function() {
        $dialog.dialog('open');
        // prevent the default action, e.g., following a link
        return false;
    });
});

Basic usage of the jQuery UI dialog

Answer 2

Managed to solve the issue, the issue was that the program was repeatedly creating unnecessary div's whenever $("import_box_dialog").dialog() was called. And since the $ operator returns u all the div's matching a given condition, ie ID in this case, hence the content did not become visible, which i think made it confused, there are two ways to solve it:

• Remove the Div manually by calling $("import_box_dialog").child().remove() This would however remove all the other Div's inside the dialog div
• Use a variable to track the div used for the dialog box, since I am using jquery classes, I use it for the static variable. Thus this way, it tracks the dialog, and always creates the dialog on the same div.

I suppose jquery applies a lot of class styles, due to which there is ambiguity in the selection of the proper div, and I guess using a static variable solves it.