Solved

Problem adding the jquery datepicker to a dynamically created text box

Posted on 2010-09-07
7
2,166 Views
Last Modified: 2012-05-10
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?
<!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>

Open in new window

0
Comment
Question by:Viking46
  • 3
  • 2
  • 2
7 Comments
 
LVL 14

Expert Comment

by:sentner
ID: 33620756
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?
0
 
LVL 22

Assisted Solution

by:kadaba
kadaba earned 200 total points
ID: 33621291
create one datepicker instance and attach it to n number of elements... instead of id you assign a class to it and then attach the datepicker to the class.
0
 

Author Comment

by:Viking46
ID: 33621353
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.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 14

Accepted Solution

by:
sentner earned 300 total points
ID: 33621744
So, this is something where it lists out the transactions, and you can't just display the date of the transaction?  

In other words, you need to be able to change the date of the transaction using a datepicker control?  

As Viking says, if you have to have each row use a datepicker element, then you should create a class that it attaches to, and just set the objects to be of that class.

Look at the code and source on these pages:  
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerClickInput.html
http://stackoverflow.com/questions/707603/apply-jquery-datepicker-to-multiple-instances
http://www.styledisplay.com/mootoolsdatepicker/

0
 

Author Comment

by:Viking46
ID: 33628080
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(function()

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();

		});

Open in new window

0
 

Author Closing Comment

by:Viking46
ID: 33628253
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.
0
 
LVL 22

Expert Comment

by:kadaba
ID: 33628320
Viking,

Apologies for not getting back to you, but I am happy you could sort this out.

Thanks for the points.
Good day.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now