Cannot load datepicker and widget for a dynamically loaded input box

Question

This is the html part

<html>
<head>
<script src="./js/ajax.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="./css/jquery-ui-timepicker-addon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js">      
</script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js">
</script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>

<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<script>
$('#datepicker').datetimepicker({
addSliderAccess: true,
sliderAccessArgs: { touchonly: false },
timeFormat: "hh:mm tt"
});
</script>
</head>
<div id="content">
</div>
</html>

the javascript ajax file is like this

function get_content(n)
{
//Create XMLHttpRequest Object
var hr=new XMLHttpRequest();
var url="./request_forward.php";
var vars="id="+n;
hr.open("POST",url,true);
//Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//Access the onreadystatechange event for the XMLHttpRequest Object
hr.onreadystatechange=function()
{
    if(hr.readyState==4 && hr.status==200)
    {
        var return_data=hr.responseText;
        document.getElementById("content").innerHTML=return_data;
        CKEDITOR.replace( 'txt1' );
    }
}
hr.send(vars);
document.getElementById("content").innerHTML='<div style="width:300px;height:100px; margin:0 auto;margin-top:10%"><img style="width:300px;height:100px;"     src="./img/loading.gif"></div>';
}

this is the dynamically loaded content into the div #content

<form id="add_program" method="post" name="add_program" enctype="multipart/form-data">
<label for="program_name">Program Name: </label>
<textarea  id="program_name" name="program_name" rows="3" cols="100" required>      </textarea>


<label for="from">From Date &#38; Time: </label>
<input type="text" id="datepicker" name="from">

<label for="description">Description: </label>
<textarea class="ckeditor"  id="txt1" name="description"></textarea>

<br/>


<label for="image">Upload Image: </label>
<input name="image" id="image" type="file"/><span class="notes">(allowed image types: gif, jpeg, jpg, png)</span>
<div style="width:10%; margin:0 auto; margin-top:10px"><input type="submit" name="add_program" value="Add Program" class="button"></div>
</form>

the date picker is not coming for the input text box "datepicker". i dont know jquery yet. how can i initialize the datepicker after loading the input box dynamically??

score 1 · Accepted Answer · answered Dec 01 '13 at 19:36

1

bind datepicker to input after it is added to the page

if(hr.readyState==4 && hr.status==200)
{
    var return_data=hr.responseText;
    document.getElementById("content").innerHTML=return_data;
    CKEDITOR.replace( 'txt1' );
    $('#datepicker').datepicker();
}

answered Dec 01 '13 at 19:36

Bhadra

2,121
1
13
19

Thank you so much. now date picker appears.but i tried to bind the datetimepicker widget in same way. but it didnt work... – Krish Gowda Dec 01 '13 at 19:45
why do you want to bind two datepickers to same ?? use any one – Bhadra Dec 01 '13 at 19:51
another one is not a datepicker its a timepicker widget which gets added to date picker. it works when it is in single file. but cannot initialize it after dynamically loading input box. – Krish Gowda Dec 01 '13 at 19:53

score 0 · Answer 2 · answered Dec 01 '13 at 19:38

0

This is one of the fundamental hardships associated with javascript -- the code runs at runtime and event listeners are bound only to the DOM elements currently accessible by the script. So basically, when you run your $("#datepicker").datepicker(); function, jQuery doesn't know what "#datepicker" is!

What you'll need to do is run the $("#datepicker").datepicker(); function in a callback when your ajax call is complete. The good news is you've already got a conditional statement waiting for that to happen.

so...

if(hr.readyState==4 && hr.status==200) {
    var return_data=hr.responseText;
    document.getElementById("content").innerHTML=return_data;
    CKEDITOR.replace( 'txt1' );

    // run jquery ui datepicker on newly generated "#datepicker"
    $('#datepicker').datepicker();
}

Hope that helps!

answered Dec 01 '13 at 19:38

jmdb

249
1
4

Thank you for ur explanation. i got the date picker to work. but now the next thing time picker widget is not getting added to date picker. – Krish Gowda Dec 01 '13 at 19:56
hm, interesting -- mind posting some code either in this comment thread or by editing your original post? thanks! – jmdb Dec 01 '13 at 20:07
the part where you're trying to add the timepicker. as much as possible would be helpful. :) – jmdb Dec 01 '13 at 20:35
i am trying to add the time picker as a widget to the date picker. see code again. ther is a function called datetimepicker() well answer from this question http://stackoverflow.com/questions/14657950/jquery-timedatepicker-wont-work-properly-on-dynamic-form solved my problem. this is wat i was looking for. $('#content').html( return_data).find('#datepicker').datetimepicker(); – Krish Gowda Dec 01 '13 at 20:47

Cannot load datepicker and widget for a dynamically loaded input box

2 Answers2