jQuery DatePicker конфликтует с DatePicker из включенного файла
У меня есть две страницы php, search.php и result.php. Обе эти страницы используют jQuery, и обе имеют jQueryUI datepickers и работают совершенно независимо друг от друга.
Я включил search.php в свой файл result.php, потому что я хочу использовать его в качестве боковой панели, и теперь у меня возникает какой-то конфликт, потому что средство выбора даты в search.php перестало работать, так как календарь не работает появляются и так непригодны. jQuery работает в обоих файлах, я подтвердил это печатью на экран. Также, если я удаляю код инициализации datepicker из файла result.php (оставляя другой код jQuery, который у меня также есть на странице), тогда другие средства выбора даты из search.php снова начинают работать. Идентификаторы уникальны, я использую noConflict, чтобы убедиться, что jQuery может работать на обеих страницах, и, как я уже сказал, он работает — единственная проблема заключается в том, что когда я инициализирую указатель даты на result.php, это приводит к тому, что те, кто находится в search.php, перестают работать ,
Используя отладчик JS в IE, я вижу, что инициализируется datepicker в result.php, затем инициализируются остальные. Там нет ошибки сценария или предупреждения, поэтому я не знаю, куда еще идти! Любая помощь приветствуется.
ОБНОВИТЬ
Я удалил весь несвязанный код, чтобы загрузить его здесь. Есть два файла, testSearch.php и testResult.php. TestResult.php включает test.search.php, так как он будет отображаться в виде боковой панели. Обе части скрипта работают изолированно, но как только они включены, средство выбора даты в testSearch.php перестает работать.
testResult.php
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
</head>
<body>
<div id="sidebar"><?php include 'testSearch.php';?></div>
<div id="content">
<div id="availCal"></div>
</div>
<script>
var jResult = jQuery.noConflict(true);
jResult(document).ready(function() {
jResult( "#availCal" ).datepicker({
changeMonth: false,
changeYear: false,
firstDay: 1,
numberOfMonths: 3,
dateFormat: "dd-mm-yy",
showCurrentAtPos:1
});
});
</script>
</body>
testSearch.php
<!-- include jquery and jquery ui -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<label for="arrPicker">Arrival date:</label><br />
<input class="dateSelect" type="text" id="arrPicker" name="arr" value="<?php echo $arr; ?>" readonly />
<script>
var jSearch = jQuery.noConflict(true);
jSearch(document).ready(function() {
jSearch('.dateSelect').each(function(){
jSearch(this).datepicker({
changeMonth: true,
changeYear: true,
firstDay: 1,
constrainInput: true,
dateFormat: "dd-mm-yy",
minDate: 1,
showAnim: "slideDown"});
});
});
</script>
В качестве справки, правильно ли я пропускаю теги doctype / head / body из файла, который будет включен (testSearch.php)? Я предполагаю, что они не нужны, так как testResult.php уже имеет эти теги, и testSearch.php будет просто вставлен в это.
Решение
Попробуй использовать
jQuery(function($){
$('body').on('focus',"#yourTagId", function(){ $(document).ready(function() {
$('#yourTagId').datepicker({ dateFormat: 'dd-mm-yy' });});
});
});
Другие решения
Других решений пока нет …