1

次のコードは、非常にシンプルで完全な JQuery ダイアログです。すべてが機能します。

問題は、js1.js のタイトルに記載されているとおりです: (そのコメントを参照)

呼び出しによって常にページをロードしようとしますが、ステートメントhorsedlgcontainer.load('page2.html');にヒットしません 。else horsedlg.dialog('open');

何かアイデアはありますか？どうもありがとうございました！

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

3 に答える 3

3

評価horsedlg = $('#horse-dialog')は 1 回だけで、コンテンツが読み込まれる前であるため、その.lengthプロパティは常にゼロです。

ダイアログのコンテンツをロードするときに、セカンダリ JS ファイルをロードする際にも問題が発生すると思われます。単一の JS ファイルの方がクリーンです。

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

これは、jQuery 遅延オブジェクトを使用して、ダイアログ ボックスの読み込みが完了したかどうかを示します。

注意: コードはテストされていません - jsfiddle は AJAX のテストには適していません。

于 2012-06-29T13:38:11.793 に答える
3

@Alnitak が指摘したように、dom で要素が利用可能になる前であっても #horse-dialog を検索しようとしているという問題があります。この場合、page2.html の読み込み後に利用可能になります。

コードを次のように微調整すると、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'); 
    }
});
于 2012-06-29T13:41:43.540 に答える
2

変数horsedlgは最初の$(document).ready関数内でローカルに定義されているため、そのコードが実行されると、DOM 要素がhorsedlg.lengthページに存在しないため、同じになります。0idhorse-dialog

そのローカルに定義された変数を変更することはできません。したがって、length常に 0 に等しくなります。

代わりにこれを行うことができます：

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?!?  
    }     
}
于 2012-06-29T13:37:45.600 に答える