我有带有日历选择输入的 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">
</div>
</form>
</body>
</html>
deleteDateCaender.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
你能看出上面的代码有什么问题吗？
任何帮助将不胜感激。
最佳答案
$(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" />
这有帮助吗？
关于php - jquery 日历无法通过 php 中的 ajax 页面加载工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15082374/