doucuo1642 2015-03-23 12:05
浏览 76

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

I have two php pages, search.php and result.php. Both of these pages use jQuery and both have jQueryUI datepickers and work perfectly independently of each other.

I've included search.php in my result.php file because I want to use it as a sidebar, now I seem to have some kind of conflict because the datepicker in search.php has stopped working, in that the calendar doesn't appear and so is unusable. jQuery is working in both files, I've confirmed this by printing to the screen. Also if I remove the datepicker initialisation code from result.php (leaving other jQuery code I also have in the page) then the other datepickers from search.php begin to work again. The IDs are unique, I'm using noConflict to make sure jQuery can work on both pages and as I say, it does - the only issue is when I initialise the datepicker on result.php it causes those in search.php to stop working.

Using IE's JS debugger I can see that the datepicker in result.php is initialised first, then the others get initialised. There is no script error or warning so I don't know where else to go! Any help appreciated.

UPDATE I've stripped out all non-related code so I can upload it here. There's two files, testSearch.php and testResult.php. The testResult.php includes test.search.php as it will be displayed as a sidebar. Both pieces of script work in isolation but once both are enabled, the datepicker in testSearch.php stops working.

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>

As an asside, am I correct in leaving out the doctype/head/body tags from the file which will be included (testSearch.php)? I assume they aren't necessary since testResult.php already has those tags and testSearch.php will just be injected into that.

  • 写回答

1条回答 默认 最新

  • duanbei2914 2015-03-23 12:26
    关注

    Try use

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

报告相同问题?

悬赏问题

  • ¥20 Python安装cvxpy库出问题
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥15 python天天向上类似问题,但没有清零
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题