Viking46
asked on
Problem adding the jquery datepicker to a dynamically created text box
I have an HTML table into which I dynamically create table rows, and each table row contains a single column holding a dynamically created INPUT box to which I attached the Datepicker control. My problem is that when I do so it is incredibly slow and when the table contains more than approximately 100 rows, the script stops working.
I am clearly adding the control incorrectly; can someone look at the following HTML code and please tell me what I am doing wrong?
I am clearly adding the control incorrectly; can someone look at the following HTML code and please tell me what I am doing wrong?
<!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>
<link type="text/css" href="css/sunny/jquery-ui-1.8.4.custom.css" rel="stylesheet" />
<script type="text/javascript" src="assets/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="assets/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//get reference to the table body element
var tbody = document.getElementById('tbod');
//create 50 rows
for (var i = 0; i < 50; i++){
//create table row element
var tr = document.createElement('tr');
tbody.appendChild(tr);
//create INPUT element
var tdDate = document.createElement('td');
var tdInput = document.createElement('input');
tdInput.type = 'text';
tdInput.setAttribute("maxlength", "8");
//create unique ID for the input element
var dpid = "dpicker" + i;
tdInput.setAttribute("id", dpid);
//append control to the td element
tdDate.appendChild(tdInput);
tdDate.className = 'Date';
//append the element to the tr element
tr.appendChild(tdDate);
//add the datepicker functionality
$('#' + dpid).datepicker();
$('#' + dpid).datepicker('option', {dateFormat: 'dd/mm/yy'});
$('#' + dpid).datepicker('option', {buttonText: 'Velg dato'});
$('#' + dpid).datepicker('option', {buttonImage: 'graphics/calendar.png'});
}
});
</script>
</head>
<body>
<table class="tab" width="100" border="1">
<thead>
<tr>
<th>Date</th>
</tr>
</thead>
<tbody id="tbod">
</tbody>
</table>
</body>
</html>
Can you explain a bit of why you would want over a hundred datepicker elements on a single page?? The problem is that each one is independently running as an object, taking memory and CPU time. What are you trying to acheive, so we can help you decide on a more efficient method?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi kadaba,
Can you give me an example please?
Hi Sentner,
I am writing an online accounts application where each row in an html table is a transaction. It is therefore a dynamic application where the number of rows is unknown at page load. Each row must have a datepicker of one sort or another. I have written one in php but I prefer the jquery one.
Can you give me an example please?
Hi Sentner,
I am writing an online accounts application where each row in an html table is a transaction. It is therefore a dynamic application where the number of rows is unknown at page load. Each row must have a datepicker of one sort or another. I have written one in php but I prefer the jquery one.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you both for your feedback.
kadabar, your idea is correct and I found an example of this in one of the links provided by sentner.
Please see the code below:
Here you can see that I have created (unrealistically for testing purposes) 650 rows in an HTML table. I have given them all a class name of 'date-pick' and a unique ID. After the table has been created, I use the for each function as follows:
$('.date-pick').each(funct ion()
To assign a datepicker instance to each of the dynamically created INPUT elements in the table.
Thank you both for your help
kadabar, your idea is correct and I found an example of this in one of the links provided by sentner.
Please see the code below:
Here you can see that I have created (unrealistically for testing purposes) 650 rows in an HTML table. I have given them all a class name of 'date-pick' and a unique ID. After the table has been created, I use the for each function as follows:
$('.date-pick').each(funct
To assign a datepicker instance to each of the dynamically created INPUT elements in the table.
Thank you both for your help
$(document).ready(function(){
var tbody = document.getElementById('tbod');
for (var i = 0; i < 650; i++){
var tr = document.createElement('tr');
tbody.appendChild(tr);
var tdDate = document.createElement('td');
var tdInput = document.createElement('input');
tdInput.setAttribute("id", 'dpicker' + i);
tdInput.className = 'date-pick';
tdDate.appendChild(tdInput);
tr.appendChild(tdDate);
}
$('.date-pick').each(function(){
$(this).datepicker();
});
ASKER
Both of the experts who have contributed to the solution to this problem have been awarded points according to the amount of interaction undertaken, and the solution they led me to has been posted as the solution to the problem.
Viking,
Apologies for not getting back to you, but I am happy you could sort this out.
Thanks for the points.
Good day.
Apologies for not getting back to you, but I am happy you could sort this out.
Thanks for the points.
Good day.