我有一个日历选择输入的html页面。它的工作很好,当我在本地主机打开,但我通过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>
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>
deleteDateCalender.php在delete.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" />
有帮助吗?