JQuery Dialog() не открывается после закрытия

Следующий код - довольно простой и полный JQuery Dialog. Все работает.JQuery Dialog() не открывается после закрытия

Проблема заключается в том, как указано в названии в 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} 
    }); 
});

источник

2012-06-29 Tom

Вы только оценки horsedlg = $('#horse-dialog') один раз, и это до того, как содержание поэтому его свойство .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 отложенный объект, чтобы указать, является ли диалоговое окно завершения загрузки или нет.

NB: код untested - jsfiddle не подходит для тестирования AJAX.

источник

2012-06-29 13:38:11 Alnitak

+1 Это именно то, что я имел в виду в своем ответе, - но твоя легче читать !!!! – ManseUK

Спасибо за кучи за помощь ребята – Tom

Cool. «только оценивая horsedlg = $ ('# horse-dialog') один раз, и до загрузки содержимого« Это поражает гвоздь на голове! Спасибо за функцию Отложен(). У меня было что-то подобное раньше ... Как вы думаете, это достаточно хорошо? Var loading = $ ('# load-overlay'); horsedlgcontainer.hide(); loading.show(); horsendlgcontainer.load ('js2.js', Функция() { loading.hide(); horsedlgcontainer.show(); }); – Tom

Переменная horsedlg определяется локально в пределах первой функции $(document).ready - поэтому, когда этот код выполнен horsedlg.length равен 0 как элемент DOM с idhorse-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-29 13:37:45 ManseUK

ли я не ссылаться на horsedlg = $ («# конского диалога») в голове каждого из $ (document) .ready уже функционирует? Или мне нужно вытащить его за пределы функции $ (document) .ready? Похоже, я смущен о масштабах. – Tom

@Tom обе переменные являются локальными - [см. Этот простой пример] (http://jsfiddle.net/manseuk/4wtmj/) (проверьте консоль) – ManseUK

Спасибо, кучи! – Tom

Как заметил @Alnitak, проблема заключается в том, что вы пытаетесь найти # конь-диалог еще до того, как элемент будет доступен в dom..в вашем случае он будет доступен после загрузки page2.html.

Tweak ваш код, как показано ниже, и вы можете избавиться от 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-29 13:41:43 Chandu

приятно, но вам не нужно открывать диалог, пока содержимое страницы2 не закончит загрузку ... – Alnitak

Хороший улов. Обновлен параметр autoOpen: false – Chandu

Разве я не ссылался на horsedlg = $ ('# horse-dialog') в начале каждой из функций $ (document) .ready? Или мне нужно вытащить его за пределы функции $ (document) .ready? Похоже, я смущен о масштабах. – Tom

JQuery Dialog() не открывается после закрытия

ответ

Смежные вопросы