javascript - jQuery UI Dialog - close after X seconds - Stack Overflow

admin管理员组

文章数量:1341390

This code works perfectly, except - dialog window will not close after X miliseconds as i expect...

setTimeout function is executed (i put alert() there and it worked...), so i assume problem is with $("#alert div").dialog('close'); but i do not know what is wrong...

if ($("#alert").length) {
    var title;
    if ($("#alert span").length) {
        title = $("#alert span").text();
    }
    $("#alert div").dialog({
        title: title,
        modal: true,
        open: function() {
            setTimeout(function() {
                $("#alert div").dialog('close');
            }, 2000);
        }
    });
}

EDIT: If it helps, here is HTML:

<div id="alert">
    <span>Password change</span>
    <div>Password was successfully changed.</div>
</div>

RESOLVED! Would be great if anyone has idea, why my code does not work...

This code works perfectly, except - dialog window will not close after X miliseconds as i expect...

setTimeout function is executed (i put alert() there and it worked...), so i assume problem is with $("#alert div").dialog('close'); but i do not know what is wrong...

if ($("#alert").length) {
    var title;
    if ($("#alert span").length) {
        title = $("#alert span").text();
    }
    $("#alert div").dialog({
        title: title,
        modal: true,
        open: function() {
            setTimeout(function() {
                $("#alert div").dialog('close');
            }, 2000);
        }
    });
}

EDIT: If it helps, here is HTML:

<div id="alert">
    <span>Password change</span>
    <div>Password was successfully changed.</div>
</div>

RESOLVED! Would be great if anyone has idea, why my code does not work...

• javascript
• jquery
• jquery-ui
• settimeout

Share Follow edited Aug 12, 2012 at 20:32 Martin asked Aug 12, 2012 at 20:09 MartinMartin 1,39211 gold badge1515 silver badges1919 bronze badges 1

• See my updated answer with an explanation as to why what you would expect to work doesn't. – j08691 Commented Aug 12, 2012 at 20:39

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 12

You have a scoping issue. Try this jsFiddle example:

if ($("#alert").length) {
    var title;
    if ($("#alert span").length) {
        title = $("#alert span").text();
    }
    $("#alert div").dialog({
        title: title,
        modal: true,
        open: function() {
            var foo = $(this);
            setTimeout(function() {
               foo.dialog('close');
            }, 2000);
        }
    });
}​

The reason this is happening, and not working like you might expect, is due to the way you reference the target div that bees the dialog, and the way that jQuery UI builds the dialog. If you check out a developer console you'll see that jQuery pulls your div out of it's original position in the DOM and therefor no longer can be referenced to by #alert div since it's no longer a child of #alert. If you had given that div its own ID, it would work as expected and you wouldn't need the temporary variable to refer to it.

Tested and working live demo:

http://jsfiddle/oscarj24/q6tD9/2/

I think this way is better:

jQuery.fn.exists = function(){return this.length>0;}

$(function() {
    if($('#alert').exists()){
        var modal = $('#alert div');
        modal.dialog({ title: $('#alert span').text(), modal: true });
        var opened = modal.dialog('isOpen');
        if(opened){
            setTimeout(function(){ 
               modal.dialog('close'); 
            }, 2000);
        }
    }
});​

本文标签： javascriptjQuery UI Dialogclose after X secondsStack Overflow