AJAX页面中的Jquery Datepicker

Question

I have 2 pages. 我有2页。 1 is the datepicker demo by jQuery and another is an AJAX page to load the datepicker demo page. 1是jQuery的datepicker演示，另一个是加载datepicker演示页面的AJAX页面。 When I access the datepicker page directly, the date selector is working fine as in the sample. 当我直接访问datepicker页面时，日期选择器正如样本中一样正常工作。 But when I try to load it with an ajax call, the selector just seems not be working at all. 但是当我尝试使用ajax调用加载它时，选择器似乎根本不起作用。

Here is the main.php page code 这是main.php页面代码

if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
}
else {
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

xmlhttp.open("GET","development-bundle/demos/datepicker/default.html",true);
xmlhttp.send();
}
</script>
</head>

<body>
    <div id="myDiv"><h2>Let AJAX change this text</h2></div>
    <button type="button" onclick="loadXMLDoc()">Change Content</button>    
</body>
</html>

Here is the datepicker page code (it's just the same demo code from jquery) 这是datepicker页面代码（它与jquery的演示代码相同）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Datepicker - Default functionality</title>
    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
    <script src="../../jquery-1.6.2.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>
    <script src="../../ui/jquery.ui.datepicker.js"></script>
    <link rel="stylesheet" href="../demos.css">
    <script>
        $(function() {
            $( "#datepicker" ).datepicker();
        });
    </script>
</head>
<body>
    <div class="demo">    
        <p>Date: <input type="text" id="datepicker"></p>    
    </div><!-- End demo -->

    <div class="demo-description">
        <p>The datepicker is tied to a standard form input field.  Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay.  Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
    </div><!-- End demo-description -->    
</body>
</html>

I am really lost. 我真的迷路了。 The datepicker page just does not work together with the AJAX. datepicker页面不能与AJAX一起使用。 Hope someone can help out here. 希望有人可以在这里帮忙。

Answer 1

Try this: 试试这个：

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
     $( "#datepicker" ).datepicker();
    }
  }
xmlhttp.open("GET","development-bundle/demos/datepicker/default.html",true);
xmlhttp.send();
}
</script>

you need to call it when the ajax request has been recived 你需要在收到ajax请求时调用它

Answer 2

This is what you're after 这就是你所追求的

$('#datepicker').bind('focus', function() {
  $(this).datepicker();
});

Answer 3

You need to have in main.php like this 你需要像main.php一样

<script>
        function activateDatePicker() {
            $( "#datepicker" ).datepicker();
        }
    </script>

In datepicker page 在datepicker页面中

<input type="text" id="datepicker" onclick="activateDatePicker()">

You should be including javascript in main.php 你应该在main.php中包含javascript

This should work not the first time but from second time you try to select date 这应该不是第一次，但从第二次尝试选择日期

AJAX页面中的Jquery Datepicker

问题描述

3 个解决方案

解决方案1
3 已采纳 2011-12-02 14:24:11

解决方案2
1 2012-06-14 19:00:46

解决方案3
0 2011-12-02 15:31:43

AJAX页面中的Jquery Datepicker

问题描述

3 个解决方案

解决方案1 3 已采纳 2011-12-02 14:24:11

解决方案2 1 2012-06-14 19:00:46

解决方案3 0 2011-12-02 15:31:43

解决方案1
3 已采纳 2011-12-02 14:24:11

解决方案2
1 2012-06-14 19:00:46

解决方案3
0 2011-12-02 15:31:43