[jQuery] Having trouble with date picker in AJAX div
I created a page with a functional jQuery date picker, works exactly
as intended. Even changed that page over to a PHP page, with echo's,
and it still works perfectly.
Problem is, when I call that PHP page from a Javascript AJAX script,
even though everything displays properly, the date picker ceases to
function. There is no visible difference in the source code of the
page between the PHP version and the HTML AJAX version.
I posted my code below, any thoughts?
--------------------------------------------------------------------------------------
Page in php
--------------------------------------------------------------------------------------
<?php
echo "
<script src=\"/javascripts/jquery-1.2.6.min.js\"></script>
<script src=\"http://dev.jquery.com/view/tags/ui/latest/ui/
ui.datepicker.js\"></script>
<script>
$(document).ready(function(){
$(\"#example\").datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: false,
changeYear: false,
closeAtTop: false,
onSelect: function(dateText) {
alert(dateText);
}}) });
</script>
<link rel=\"stylesheet\" href=\"/javascripts/jquery_styles.css\" type=
\"text/css\">
<input type=\"image\" src=\"../audio/images/btn_calendar.jpg\" id=
\"example\" value=\"Calendar Select\"/>
";
?>
--------------------------------------------------------------------------------------
HTML page where I call the PHP script and display it
--------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
var http = false;
if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
http = new XMLHttpRequest();
}
function display() {
http.open("GET", "/testfiles/jquery_datepicker.php", true);
http.onreadystatechange=function() {
if(http.readyState == 4) {
document.getElementById('testing').innerHTML = http.responseText;
}
}
http.send(null);
}
</script>
</head>
<body onload="display();">
<div id="testing"></div>
</body>
</html>