Datepicker is not attached in Dynamic form,whenever a new row is added.
-----------------------------------------------------------------------
If you are working with javascript,that dynamically creates a new row upon clicking Add button
& one of the field(dob) is datepicker,then usually u will find a problem
Newly created rows may not shown you datepicker on clicking the textfield.
This is because DOM object is not updated by javascript engine.
A way to overcome this problem is
When ever you click on add button,call a method,which once again applies datepicker to all the dob column
I will use jquery to do this stuff
DynamicForm.html
----------------------
<script src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/jquery.datepick.js"></script>
<style type="text/css">
@import "css/jquery.datepick.css";
</style>
<script type="text/javascript">
$(document).ready(function() //onpageload,when dom tree is ready execute this block
{
updateDatePicker(); //applies datepicker on existing form compents
});
function updateDatePicker()
{
//for all the input textfield whose name starts with startDate,apply datepicker
$("input:text[name^=startDate]").datepick();//here iam referring component by its name,
//for all the input textfield whose id starts with endDate,apply datepicker
$("input:text[id^=endDate]").datepick();//you can even refer by id
}
function addRow()
{
//logic to dynamically add record,
updateDatePicker();
//call this method to apply datepicker again on the whole thing,so that newly created columns will also be //effected
}
</script>
<html>
------------------------
------------------------
<input type=text name=startDate1>
<input type=text id=endDate1 name=edate1>
<input type=button onclick=addRow()>
</html>
-----------------------------------------------------------------------
If you are working with javascript,that dynamically creates a new row upon clicking Add button
& one of the field(dob) is datepicker,then usually u will find a problem
Newly created rows may not shown you datepicker on clicking the textfield.
This is because DOM object is not updated by javascript engine.
A way to overcome this problem is
When ever you click on add button,call a method,which once again applies datepicker to all the dob column
I will use jquery to do this stuff
DynamicForm.html
----------------------
<script src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/jquery.datepick.js"></script>
<style type="text/css">
@import "css/jquery.datepick.css";
</style>
<script type="text/javascript">
$(document).ready(function() //onpageload,when dom tree is ready execute this block
{
updateDatePicker(); //applies datepicker on existing form compents
});
function updateDatePicker()
{
//for all the input textfield whose name starts with startDate,apply datepicker
$("input:text[name^=startDate]").datepick();//here iam referring component by its name,
//for all the input textfield whose id starts with endDate,apply datepicker
$("input:text[id^=endDate]").datepick();//you can even refer by id
}
function addRow()
{
//logic to dynamically add record,
updateDatePicker();
//call this method to apply datepicker again on the whole thing,so that newly created columns will also be //effected
}
</script>
<html>
------------------------
------------------------
<input type=text name=startDate1>
<input type=text id=endDate1 name=edate1>
<input type=button onclick=addRow()>
</html>
huh?
ReplyDeleteI was facing same problem.
ReplyDeletei tired above solution still facing same problem .
Please help me