weixin_33738578 2011-12-02 14:19 采纳率: 0%
浏览 38

AJAX页面中的Jquery Datepicker

I have 2 pages. 1 is the datepicker demo by jQuery and another is an AJAX page to load the datepicker demo page. When I access the datepicker page directly, the date selector is working fine as in the sample. But when I try to load it with an ajax call, the selector just seems not be working at all.

Here is the main.php page code

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)

<!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. Hope someone can help out here.

  • 写回答

3条回答 默认 最新

  • weixin_33709219 2011-12-02 14:24
    关注

    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

    评论

报告相同问题?

悬赏问题

  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位,为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 保护模式-系统加载-段寄存器