Home/ Questions/Q 1096175
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T00:14:34+00:00

I’m using the ‘timepickr’ jQuery function, the problem is it works ok in the

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you’re already including jQuery I’d take advantage of it for the AJAX call as well, and use a success callback to apply the timepicker to new elements in the loaded <div> as well. To do all of that, your function would be shortened down to:

    function showDiv2Contents()
{
  $("#div2").load("testajax2.php", function() {
    $(this).find(".timepickr").timepickr();
  });
}

    This uses .load() to get/load the ajax content of testajax2.php then executes the .timepckr() plugin again on .timepickr elements that were just created/loaded inside <div id="div2">.

    Currently the dynamically loaded elements simply aren’t there when the $(".timepickr") selector looks for results, so no code is run on them. As an aside, your document.ready code can also be trimmed down, there’s no need for the .each(), like this:

    $(function() {
  $(".timepickr").timepickr();
});
    • 0