initializing jquery makes page load very slow
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(funct
$(this).datepicker();
});
the table loads quikcky, but when I extend the datepicker functionality as follows:
$('.date-pick').each(funct
$(this).datepicker();
$(this).datepicker('option
$(this).datepicker('option
$(this).datepicker('option
$(this).datepicker('option
//close handler
//checkAndUpdateDate(dateT
}
});
$(this).datepicker('option
//blur handler
//checkAndUpdateDate(dateT
}
});
});
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?
When I simply attach the datepicker using:
//code lines 31 onwards
$('.date-pick').each(funct
$(this).datepicker();
});
the table loads quikcky, but when I extend the datepicker functionality as follows:
$('.date-pick').each(funct
$(this).datepicker();
$(this).datepicker('option
$(this).datepicker('option
$(this).datepicker('option
$(this).datepicker('option
//close handler
//checkAndUpdateDate(dateT
}
});
$(this).datepicker('option
//blur handler
//checkAndUpdateDate(dateT
}
});
});
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>
crisco96
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.
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 Crisco 96, I am using FF and it wasn't a browser issue.
Thank you HainKurt, setDefaults is what I was looking for.
Thank you HainKurt, setDefaults is what I was looking for.