jQuery готовая функция, вызванная дважды в диалоговом окне
Я создаю диалоговое окно jQuery с вкладками в Сценарии PHP. Сценарий использует 'включать' директиву в цикле, выполняющем итерации по вкладкам и включая другие сценарии. Каждый из включенных файлов имеет данные для вкладки и <сценарий> тег с jQuery document.ready () функция в нем. Без цикла это по существу делает это:
<div id="tabDialog">
<div id="tabs">
<ul>
<li><a href="#tab1'>Tab1</a></li>
<li><a href="#tab2'>Tab2</a></li>
</ul>
<div id="tabContainer">
<div id="tab1">
<?php include "tab1.php"; ?>
</div>
<div id="tab2">
<?php include "tab2.php"; ?>
</div>
</div>
</div>
</div>
и, например, tab1.php мог бы иметь что-то как:
<script type="text/javascript">
$(document).ready (function () {
alert ('tab1 loaded');
});
</script>
Проблема после создания и открытия диалогового окна с помощью <идентификатор отделения = "диалоговое окно"> как DIV диалогового окна, готовая функция документа вызвана во второй раз. Вот диалоговый код:
$("#tabDialog").dialog ({
autoOpen: false,
minWidth: 450,
minHeight: 400,
width: 600,
height: 500
}).dialog ('open');
Какова причина этого и каков был бы лучший способ исправить ситуацию? Я пытаюсь сохранить функциональность каждой вкладки в отдельных файлах, потому что они могут использоваться в нескольких ситуациях, и я не должен копировать код, связанный с ними.
Спасибо за любую справку или совет.
5 ответов
Вероятно, вам не нужен вызов .dialog ('open'); вместо этого используйте параметр autoOpen : true.
Итак, я должен сказать, что я не уверен на 100%, почему это происходит, хотя я понимаю, что диалог поддерживает свое собственное состояние, так что это может быть одной из причин. Но я мог быть далеко. Но способ обойти это - использовать вместо этого что-то вроде этого:
$(document).one('ready', function () {
alert ('tab1 loaded');
});
Это гарантирует, что он будет запускаться только один раз при загрузке страницы.
Я не слишком много использовал .dialog () , но вам нужно использовать метод jQuery ready () в вашем скрипте?
Похоже, .dialog () имеет параметры обратного вызова, которыми вы могли бы воспользоваться.
Скрипт на вкладке:
<script type="text/javascript">
function onOpen() { alert('tab1 loaded') };
</script>
диалог:
$(this).dialog ({
autoOpen: false,
minWidth: 450,
minHeight: 400,
width: 600,
height: 500,
open: function(event, ui) { onOpen(); } // call function in script
}).dialog ('open');
Вот итоговый текст страницы. Я сделал просмотр-источник, а затем удалил все посторонние вещи со страницы, чтобы попытаться упростить ее.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<link href="css/redmond/jquery-ui-1.8.1.custom.css" type="text/css" rel="stylesheet" media="screen" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
</head>
<body>
<div id="tabDialog" style="position: relative; display: none;" title="Test Dialog">
<div id="tabs" style="position: absolute; top: 5px; bottom: 40px; left: 3px; right: 3px;">
<ul>
<li><a href='#tab1'>Tab #1</a></li><li><a href='#tab2'>Tab #2</a></li>
</ul>
<div class="tab_container" style="position: absolute; top: 35px; bottom: 0px; left: 1px; right: 1px; overflow: auto;">
<div id='tab1' class='tabPage ui-dialog-content'>
<form id="tab1Form">
More testing... <input class="keypressMonitor" type="text">
</form>
Testing...<br/>
Testing...<br/>
<script type="text/javascript">
$(document).ready (function () {
alert ('tab1 loaded');
$("#tab1Form").bind ('save', function () {
alert ("in tab1Form.save ()");
});
});
</script>
</div>
<div id='tab2' class='tabPage ui-dialog-content'>
<form id="tab2Form">
<div style="position: absolute; left: 1px; right: 1px; top: 1px; bottom: 1px;">
Testing: <input class="keypressMonitor" type="text">
<textarea id="testArea" class="keypressMonitor tinymce" style="position: absolute; top: 30px; bottom: 2px; left: 2px; right: 2px;"></textarea>
</div>
</form>
<script type="text/javascript">
$(document).ready (function () {
$("#tab2Form").bind ('save', function () {
alert ("in tab2Form.save ()");
});
});
</script>
</div>
</div>
</div>
<div id="dialogButtons" style="position: absolute; bottom: 3px; left: 3px; right: 15px; text-align: right; height: 32px;">
<button class="applyButton" disabled>Apply</button>
<button class="okButton" disabled>Ok</button>
<button class="cancelButton">Cancel</button>
</div>
</div>
<script type="text/javascript">
$(document).ready (function () {
$("#tabs").tabs ();
$("button").button ();
/**
* Pressing the cancel button simply closes the dialog.
*/
$(".cancelButton").click (function () {
$("#tabDialog").dialog ("close");
});
$("#tabDialog").dialog ({
open: function () {
},
autoOpen: true,
minWidth: 450,
minHeight: 400,
width: 600,
height: 500,
height: 'auto'
});
});
</script>
</body>
</html>
Я считаю, что нашел причину и создал достаточно хорошее исправление. Когда jQuery создает диалог, он перемещает DIV, содержащий содержимое диалога, в DOM (в самый конец документа) и окружает этот div необходимыми каркасами, которые требуются для диалога (возможно, используя .append ( ) функция или что-то подобное). Поскольку DIV, который динамически находился в нем, содержал Javascript, jQuery вызывал функцию document.ready () после того, как DIV был перемещен в DOM (то есть во второй раз). Следовательно, перед построением диалогового окна я .remove () каждый тег сценария в DIV диалогового окна следующим образом:
$("#tabDialog").find ("script").remove ();
$("#tabDialog").dialog ({
autoOpen: true,
minWidth: 450,
minHeight: 400,
width: 600,
height: 500
});
При этом удаляется тег SCRIPT из DIV, в который он был изначально загружен, но сам SCRIPT все еще существует. Я все еще исследую это, потому что я не совсем понимаю, где на самом деле «живет» динамически загруженный код Javascript, но я подозреваю, что он находится где-то за пределами DOM. Я проверил это в Chrome, Firefox и Exploder 8.
Я проверил, что любые сценарии, которые изначально содержались в загруженных DIV, по-прежнему работают должным образом, поместив кнопку в DIV и назначив функцию .click (). Вот небольшой тест, который демонстрирует это:
<html>
<head>
<link href="css/redmond/jquery-ui-1.8.1.custom.css" type="text/css" rel="stylesheet" media="screen" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen" />
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
</head>
<body>
<div id="dialogContents" style="display: none;">
<div style="border: 1px solid black; height: 98%;">
<form id="testForm">
<input type="text">
</form>
<button id="testButton">Test</button>
<script type="text/javascript">
$(document).ready (function () {
alert ("ready");
$("#testButton").click (function () {
alert ('click');
});
});
</script>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready (function () {
//
// Remove all the scripts from any place in the dialog contents. If we
// do not remove the SCRIPT tags, the .ready functions are called a
// second time. Removing this next line of Javascript demonstrates this.
//
$("#dialogContents").find ("script").remove ();
$("#dialogContents").dialog ({
width: 300,
height: 300,
title: 'Testing...'
});
});
</script>
</html>
Я благодарен людям за помощь, предоставленную в этой беседе!