1

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

3 Answers 3

3

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.

1
  • Cool. "only evaluating horsedlg = $('#horse-dialog') once, and it's before the content is loaded" That hits the nail on the head! Thanks for the Deferred() function. I had something like this before... Do you think it is good enough? Var loading = $('#loading-overlay'); horsedlgcontainer.hide(); loading.show(); horsendlgcontainer.load('js2.js', function () { loading.hide(); horsedlgcontainer.show(); });
    – Tom
    Jun 29, 2012 at 17:50
3

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'); 
    }
});
8
  • 1
    nice, but you need to not open the dialog until the page2 content has finished loading...
    – Alnitak
    Jun 29, 2012 at 13:44
  • 1
    Good catch. Updated the options to autoOpen:false
    – Chandu
    Jun 29, 2012 at 13:44
  • Didn't I reference to horsedlg = $('#horse-dialog') in the head of each of the $(document).ready functions already? Or should I pull it outside $(document).ready function? Looks like I am confused about the scopes.
    – Tom
    Jun 29, 2012 at 13:52
  • @Cybernate I don't think you nailed it yet - you catch the dialog not being loaded, but the user might have to press the button twice.
    – Alnitak
    Jun 29, 2012 at 13:57
  • The code you had earlier was fine if the horse-dialog div was already present on the page. However you were loading the element via ajax, hence you execute $("#horse-dialog") jquery is unable to find any element hence on that page since the horse dialog is later added to the page via horsedlgcontainer.load.
    – Chandu
    Jun 29, 2012 at 13:58
2

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?!?  
    }     
}
2
  • Didn't I reference to horsedlg = $('#horse-dialog') in the head of each of the $(document).ready functions already? Or should I pull it outside $(document).ready function? Looks like I am confused about the scopes.
    – Tom
    Jun 29, 2012 at 13:47
  • @Tom both variables are both local - see this simple example (check the console)
    – Manse
    Jun 29, 2012 at 13:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.