?
Solved

initializing jquery makes page load very slow

Posted on 2010-09-23
3
Medium Priority
?
807 Views
Last Modified: 2012-05-10
I have an html document which has a 1 column table holding  jquery datepicker(see attached code).

When I simply attach the datepicker using:

               //code lines 31 onwards
            $('.date-pick').each(function(){
                $(this).datepicker();
            });

the table loads quikcky, but when I extend the datepicker functionality as follows:

            $('.date-pick').each(function(){
                $(this).datepicker();
                  $(this).datepicker('option', {dateFormat: 'dd/mm/yy'});
                  $(this).datepicker('option', {autoSize: true });
                  $(this).datepicker('option', {showButtonPanel: true });
                  $(this).datepicker('option', {onClose: function(dateText, inst) {
                              //close handler
                              //checkAndUpdateDate(dateText, inst);
                        }
                  });
                  $(this).datepicker('option', {onBlur: function(dateText, inst) {
                              //blur handler
                              //checkAndUpdateDate(dateText, inst);
                        }
                  });
            });
the page takes a long time to load and if too many rows are used, thepage script freezes.

How can I customize the behaviour of the datepicker without causing a delay?
<!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(){
		var tbody = document.getElementById('tbod');
							   
		for (var i = 0; i < 150; 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();
			$(this).datepicker('option', {dateFormat: 'dd/mm/yy'});
			$(this).datepicker('option', {buttonText: 'Velg dato'});
			$(this).datepicker('option', {autoSize: true });
			$(this).datepicker('option', {showButtonPanel: true });
			$(this).datepicker($.datepicker.regional['no']);
			$(this).datepicker('option', {onClose: function(dateText, inst) {
					checkAndUpdateDate(dateText, inst);
				}
			});
			$(this).datepicker('option', {onBlur: function(dateText, inst) {
					checkAndUpdateDate(dateText, inst);
				}
			});

		});

//		$('.date-pick').datePicker({clickInput:true})
					   
	});
</script>

</head>

<body>

	<table class="tab" width="100" border="1">
  	 	<thead>
    		<tr>
        		<th id="head-date" class="date" scope="col">Date</th>
      		</tr>
    	</thead>

		<col width="100px" />
    
	    <tbody id="tbod">
    	</tbody>
	</table>


</body>
</html>

Open in new window

0
Comment
Question by:Viking46
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 15

Expert Comment

by:crisco96
ID: 33748439
What browser are you using? IE 6 is particularly slow when doing anything with javascript, try loading the "slow" page in the latest version of firefox or chrome and see if it's any faster.
0
 
LVL 58

Accepted Solution

by:
HainKurt earned 2000 total points
ID: 33748463
0
 

Author Closing Comment

by:Viking46
ID: 33748794
Thank you Crisco 96, I am using FF and it wasn't a browser issue.

Thank you HainKurt, setDefaults is what I was looking for.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Suggested Courses

762 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