jQuery日历无法通过PHP中的Ajax页面加载工作

Question

我有带有压延机选择输入的html页面。 当我在localhost中打开时，它工作正常，但我通过ajax在php页面中调用了相同的代码，但它不起作用。 以下是HTML代码

<html>
   <head>
   <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
   <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
   <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
   <script>
      $(function() {
      $( "#datepicker" ).datepicker({
            numberOfMonths: 3,
            showButtonPanel: true
      });
      });
   </script>
   </head>

   <body>
   <input type="text" id="datepicker" />
   </body>
   </html>

如果我在php页面中调用上述代码并通过ajax加载该页面，则上述代码将无法正常工作。

我正在使用2 PHP文件delete.php，deleteDateCalender.php

delete.php的代码

<html>
<head>
<title>test</title>

 <script>

        function deleteCalDateAjax()
        {

        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)
             {
                 //alert(xmlhttp.responseText);
                 document.getElementById("calenderDIV").innerHTML=xmlhttp.responseText;
                 //alert(xmlhttp.responseText);
             }
          }

            xmlhttp.open("GET","deleteDateCalender.php",true);
            xmlhttp.send(null); 
        }

 </script>

</head>

<body>

                        <form>
                            <input type="button" value="test" onclick="deleteCalDateAjax();" />
                            <div id="calenderDIV">
                            &nbsp;
                            </div>
                        </form>
</body>
</html>

deleteDateCalender.php的代码

<input type="text" id="datepicker" />


  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
 <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
 <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
 <script>
 $(function() {
      $( "#datepicker" ).datepicker({
            numberOfMonths: 3,
            showButtonPanel: true
      });
 });
 </script>

在delete.php中单击测试按钮时调用deleteDateCalender.php

您能看到上面代码中的错误吗？

任何帮助将不胜感激。

Answer 1

$（function（）{...}）; 文档加载完成时触发。 如果您通过AJAX加载该代码，则该文档已经加载，因此永远不会被触发。

最好的选择是在完成将AJAX中的HTML添加到页面后，启动datepicker（）脚本。

您的delete.php代码如下所示：（我删除了所有其他XMLHttpRequest JavaScript，就好像您使用的是jQuery一样，它可以为您处理所有操作并确保它可以在所有浏览器上正常工作）

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript">
function deleteCalDateAjax() {
   // Call the php page to get the HTML
   $.ajax({
      url: 'deleteDateCalender.php',
      success: function(responseHTML) {
         // Set the HTML somewhere on the page - note: if you are returning a full page of HTML you shouldn't include all the <html><body> tags etc...
         $("#calenderDIV").html(responseHTML);
         // Now that your HTML is available in the DOM you can initiate the datepicker()
         $("#datepicker").datepicker({
           numberOfMonths: 3,
           showButtonPanel: true
         });
         $("#datepicker").datepicker("show");
      }
   });
}
</script>
</head>
<body>
<h1>Example</h1>
<input type="button" onclick="deleteCalDateAjax();" value="Test" />
<div id="calenderDIV">this text will be replaced with HTML from AJAX call</div>
<input name="DateButton" type="button" id="DateButton" value="Open Calander" onclick="$('#datepicker').datepicker('show');" />
</body>
</html>

deleteDateCalender.php的代码（我不完全确定为什么要这么做，但是我确定您有一个计划）

<input type="text" id="datepicker" />

有帮助吗？

jQuery日历无法通过PHP中的Ajax页面加载工作

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-02-26 06:19:25

jQuery日历无法通过PHP中的Ajax页面加载工作

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-02-26 06:19:25

解决方案1
0 已采纳 2013-02-26 06:19:25