CODEWITHSUNDEEP
javascriptjquery
Tom
Tom

Reputation: 16246

JQuery Dialog() can't open again after close

Following code is a pretty simple and complete JQuery Dialog. Everything works.

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

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

Any idea please? Thank you very much!

page1.html ...

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

page2.html ...

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

js1.js ...

$(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?!?       
    }
});

js2.js ...

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

Upvotes: 1

Views: 2656

Answers (3)

Alnitak
Alnitak

Reputation: 339816

You're only evaluating horsedlg = $('#horse-dialog') once, and it's before the content is loaded, so its .length property is always zero.

I suspect you'll also run into problems with loading a secondary JS file when you load the dialog content. A single JS file would be cleaner:

$(document).ready(function () {

    var options = {
        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}                    
    };

    var loaded = $.Deferred();
    $('#horse-link-show-dialog').on('click', function() {
        var state = loaded.state();
        if (state === 'resolved') {
            $('#horse-dialog').dialog('open');
        } else if (state === 'pending') {
            // do nothing
        } else {
            $('#horse-link-dialog-container').load('page2.html')
               .fail(loaded.reject);
               .done(function() {
                    $('#horse-dialog').dialog(options);
                    loaded.resolve();
                });
            });
        }
    });
});

This uses a jQuery deferred object to indicate whether the dialog box has finished loading or not.

NB: code untested - jsfiddle isn't good for testing AJAX.

Upvotes: 3

Chandu
Chandu

Reputation: 82903

As metnioned by @Alnitak the issue is you are trying to search for #horse-dialog even before the element is available in the dom..in your case it will be available after the page2.html load.

Tweak your code to as below and you can do away with js2.js:

$(document).ready(function () {
        var horsedlgOptions = {
        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}
    };
    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');
                        horsedlg = horsedlgcontainer.find("#horse-dialog");
                        horsedlg.dialog(horsedlgOptions);
        else  //to improve performance, open it again, don't load the same page
            horsedlg.dialog('open'); 
    }
});

Upvotes: 3

Manse
Manse

Reputation: 38147

The variable horsedlg is locally defined within the first $(document).ready function - so when that code is executed horsedlg.length equals 0 as the DOM element with the id of horse-dialog isnt present on the page.

You cannot change that locally defined variable - so the length always equals 0.

You could do this instead :

function showHorseDialog() {
    var horsedlg = $('#horse-dialog');
    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?!?  
    }     
}

Upvotes: 2

Related Questions