initializing jquery makes page load very slow

Posted on 2010-09-23
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

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

                  $(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" "">
<html xmlns="">
<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">
		var tbody = document.getElementById('tbod');
		for (var i = 0; i < 150; i++){
			var tr = document.createElement('tr');
			var tdDate = document.createElement('td');
			var tdInput = document.createElement('input');
			tdInput.setAttribute("id", 'dpicker' + i);
			tdInput.className = 'date-pick';

			$(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('option', {onClose: function(dateText, inst) {
					checkAndUpdateDate(dateText, inst);
			$(this).datepicker('option', {onBlur: function(dateText, inst) {
					checkAndUpdateDate(dateText, inst);


//		$('.date-pick').datePicker({clickInput:true})



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

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


Open in new window

Question by:Viking46
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
LVL 15

Expert Comment

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.
LVL 54

Accepted Solution

Huseyin KAHRAMAN earned 500 total points
ID: 33748463

Author Closing Comment

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.

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

729 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