Question

我有两个php页面，search.php和result.php。这两个页面都使用jQuery，并且都具有jQueryUI日期选择器，并且彼此完全独立地工作。

我在result.php文件中包含了search.php，因为我想将它用作边栏，现在我似乎有某种冲突，因为search.php中的datepicker已经停止工作了，日历不会出现，因此无法使用。 jQuery正在两个文件中工作，我通过打印到屏幕来证实了这一点。此外，如果我从result.php中删除datepicker初始化代码（留下我在页面中也有的其他jQuery代码），那么来自search.php的其他日期选择器将再次开始工作。 ID是唯一的，我使用noConflict来确保jQuery可以在两个页面上工作，正如我所说的那样 - 唯一的问题是当我在result.php上初始化datepicker时它会导致search.php中的那些停止工作。

使用IE的JS调试器我可以看到result.php中的datepicker首先被初始化，然后其他的被初始化。没有脚本错误或警告，所以我不知道还能去哪里！任何帮助表示赞赏。

更新我已经删除了所有不相关的代码，因此我可以在此处上传。有两个文件，testSearch.php和testResult.php。 testResult.php包含test.search.php，因为它将显示为侧边栏。这两个脚本都是独立工作的，但一旦启用它们，testSearch.php中的datepicker就会停止工作。

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>

作为一个助手，我是否正确地从要包含的文件（testSearch.php）中删除了doctype / head / body标签？我认为它们不是必需的，因为testResult.php已经有了这些标签，而testSearch.php只会被注入其中。

Answer 1

尝试使用

jQuery(function($){ 
    $('body').on('focus',"#yourTagId", function(){ $(document).ready(function() {
        $('#yourTagId').datepicker({ dateFormat: 'dd-mm-yy' });});
    });
});

jQuery DatePicker与包含文件中的DatePicker冲突

1 个答案: