Hi,
I'm using the 'timepickr' jQuery function, the problem is it works ok in the main webpage, however when I invoke it through an AJAX call, the funcionality is non-existant. The input box is displayed fine, but the mouseover funcionality isn't there. Code I'm using as follows....
This is the page that contains the "div2" div: Note, the invocation of the timepickr jQuery thing works fine.
<head>
<link rel="Stylesheet" media="screen" href="reset.css" />
<link rel="Stylesheet" media="screen" href="styles.css" />
<link rel="Stylesheet" media="screen" href="ui.core.css" />
<link rel="Stylesheet" media="screen" href="ui.timepickr.css" />
<link rel="stylesheet" media="screen" href="jquery.timepickr.css" type="text/css" />
<SCRIPT LANGUAGE="JavaScript" SRC="js/timepicker.js"></SCRIPT>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/showDiv2Contents.js"></script>
<script type="text/javascript" src="js/jquery.ui.all.js"></script>
<script type="text/javascript" src="js/jquery.timepickr.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".timepickr").each(function(){
$(this).timepickr();
})
});
</script>
</head>
<body>
<div id="div1">
<input class='timepickr' type='text' value='09:00' /><br> <!-- This works fine -->
</div>
<select onchange="showDiv2Contents(this.value)">
<option value='0' selected>1</option>
<option value='1'>2</option>
</select>
<div id="div2"></div>
</body>
When the dropdown box's state is changed, the showDiv2Contents js function is called, as follows:
function showDiv2Contents()
{
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("div2").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","testajax2.php",true);
xmlhttp.send();
}
...and the "testajax2.php" is as follows...
<?php
echo "<br><br><br>";
echo "Contents of Div2:";
echo "<br><br><br>";
echo "<input class='timepickr' type='text' value='09:00'/>"; //This doesn't work
?>
While the contents of testajax2.php is displayed fine, the timepickr functionality is non-existant. Any ideas? Thanks so much in advance,
Mike