JQuery Dialog() can't open again after close
<p>Following code is a pretty simple and complete JQuery Dialog. Everything works. </p>

<p>Problem is as mentioned at the title in js1.js: (see its comment)</p>

<p>It always try to load the page by calling <code>horsedlgcontainer.load('page2.html');</code> never hits the  <code>else horsedlg.dialog('open');</code> statement. </p>

<p>Any idea please? Thank you very much!</p>

<p>page1.html ...</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;head&gt;
    &lt;link href="Site.css" rel="stylesheet" type="text/css" /&gt;
    &lt;link href="jquery-ui-1.8.21.custom.css" rel="Stylesheet" type="text/css" /&gt;
    &lt;script src="jquery-1.7.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="jquery-ui-1.8.21.custom.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="js1.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="horse-link"&gt;
    [&lt;a id="horse-link-show-dialog"&gt;Click Me&lt;/a&gt;]
&lt;/div&gt;
&lt;div id="horse-link-dialog-container"&gt;&lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>page2.html ...</p>

<pre><code>&lt;script src="js2.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;div id="horse-dialog" title="Horse!"&gt;
Q: When is a horse not a horse?&lt;br /&gt;
A: It depends, when a white horse is not a horse.&lt;br /&gt; 
&lt;/div&gt;
</code></pre>

<p>js1.js ...</p>

<pre><code>$(document).ready(function () {
    var horselnk = $('#horse-link'),
        horsedlg = $('#horse-dialog'),
        horsedlgcontainer = $('#horse-link-dialog-container'),
        showdlgbtn = $('#horse-link-show-dialog');
    $.ajaxSetup({ cache: false });
    showdlgbtn.click(showHorseDialog);
    function showHorseDialog() {
        if (horsedlg.length==0) 
            horsedlgcontainer.load('page2.html');
        else  //to improve performance, open it again, don't load the same page
            horsedlg.dialog('open'); //Why never come here?!?       
    }
});
</code></pre>

<p>js2.js ...</p>

<pre><code>$(document).ready(function () {
    var horsedlg = $('#horse-dialog'),
        horselnk = $('#horse-link');
    horsedlg.dialog({
        modal: true, autoOpen: true, resizable: false, 
        height: 500, width: 350, closeOnEscape: true,
        show: {effect:'puff',percent:150,duration:250},
        hide: {effect:'puff',percent:110,duration:250}
    });
});
</code></pre>
