JQuery UI Dialog Auto-Close with setTimeout

Question

I try to have my dialog automatically close three seconds after opening. I tried the following methods:

setTimeout($("#mydialog").dialog('close'), 3000); 

Here it is in context:

 $("#acknowledged-dialog").dialog({ height: 140, modal: true }); setTimeout($("#acknowledged-dialog").dialog('close'), 3000); 

But with this method it is not even displayed! I assume that the close method is called immediately after it is shown on the page. There are no errors in the log.

I also tried binding to the dialogopen event:

 $("#acknowledged-dialog").bind('dialogopen', function(event, ui) { setTimeout($(this).dialog('close'), 3000); }); $("#acknowledged-dialog").dialog({ height: 140, modal: true }); 

A dialog box displays but does not close automatically. There are also no errors in the logs.

Can't I use 'this' in the argument for $ in setTimeout?

Answer 1

setTimeout calls the inverse of the $ ("# mydialog") dialog. ("close") after 3 seconds. you want to drop it all as a string, and it should work fine. Also, I don't think you want to bind the dialog box before initializing the dialog. The following should work fine:

 $("#acknowledged-dialog").dialog({ height: 140, modal: true, open: function(event, ui){ setTimeout("$('#acknowledged-dialog').dialog('close')",3000); } }); 

Answer 2

I wrote an article specifically for the problem you are facing. Please read this.

In short, you want to wrap $("#mydialog").dialog('close') built-in function that you want to execute as a result of a delay or triggered event.

 setTimeout(function(){ $("#mydialog").dialog('close') }, 3000); 

The dialog is not even displayed because you closed it as soon as you opened it in each case.