my javascript has code, for one of the pages on my website:
$('#nmdt1').datetimepicker({
dateFormat: $.datepicker.ATOM,
minDate: nmsdt,
...
...
this runs fine, when the page on which id="nmdt1" is loaded. And I load the related datetimepicker js library (module) only on when i load that page. so far so good.
but when i load any other pages on my websit i get this error: from the line number where dateformat is defined.
EDIT: here is the correct error for firebug log:
TypeError: $.datepicker is undefined
http://myswbsite/jscript/myjsscript.js
Line 569
line 569 is:
dateFormat: $.datepicker.ATOM,
and yes, this error only comes on page where I am not loading the related js code (jquery-ui-timepicker-addon.js). The reason I am not loading this js on every page is, i need it on only one page.
MORE DETAILS:
in HTML header following lib loads (in seq)
<head>
<script src="/jscript/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="/jscript/myjsscript.js" type="text/javascript"></script>
...
...
<script type="text/javascript">
jQuery(document).ready(function(){
var mid = "[% mid %]";
alert('mid='+mid);
$(".bvmainmenu #"+mid).css({"background":"url(/images/current-bg.gif) top left repeat-x", "color":"#ffffff"});
});
</script>
</head>
this last javascript code you see above (bottom of header) does not run each time when the jquery-ui-timepicker-addon.js lib is not loaded (and you see that err in firebug - i can live with error, but why this last code is not running, i am not sure). I am not able to understand why this routine wont run just because i did not load one 'add-on' library
the page which runs everything correctly loads following js scripts in BODY
<script src="/jscript/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
<script src="/jscript/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
on this page the last javascript code you see in header also loads and displays the alert!
I am having tough time to figure this.
my javascript has code, for one of the pages on my website:
$('#nmdt1').datetimepicker({
dateFormat: $.datepicker.ATOM,
minDate: nmsdt,
...
...
this runs fine, when the page on which id="nmdt1" is loaded. And I load the related datetimepicker js library (module) only on when i load that page. so far so good.
but when i load any other pages on my websit i get this error: from the line number where dateformat is defined.
EDIT: here is the correct error for firebug log:
TypeError: $.datepicker is undefined
http://myswbsite/jscript/myjsscript.js
Line 569
line 569 is:
dateFormat: $.datepicker.ATOM,
and yes, this error only comes on page where I am not loading the related js code (jquery-ui-timepicker-addon.js). The reason I am not loading this js on every page is, i need it on only one page.
MORE DETAILS:
in HTML header following lib loads (in seq)
<head>
<script src="/jscript/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="/jscript/myjsscript.js" type="text/javascript"></script>
...
...
<script type="text/javascript">
jQuery(document).ready(function(){
var mid = "[% mid %]";
alert('mid='+mid);
$(".bvmainmenu #"+mid).css({"background":"url(/images/current-bg.gif) top left repeat-x", "color":"#ffffff"});
});
</script>
</head>
this last javascript code you see above (bottom of header) does not run each time when the jquery-ui-timepicker-addon.js lib is not loaded (and you see that err in firebug - i can live with error, but why this last code is not running, i am not sure). I am not able to understand why this routine wont run just because i did not load one 'add-on' library
the page which runs everything correctly loads following js scripts in BODY
<script src="/jscript/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
<script src="/jscript/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
on this page the last javascript code you see in header also loads and displays the alert!
I am having tough time to figure this.
Share Improve this question edited Aug 12, 2012 at 2:15 Rajeev asked Aug 12, 2012 at 1:18 RajeevRajeev 1,3717 gold badges29 silver badges48 bronze badges 1- Are you including the relevant jquery libraries on those pages? – Carth Commented Aug 12, 2012 at 1:24
3 Answers
Reset to default 10Have you included jQuery UI in your application.
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/jquery-ui.min.js"></script>
Make sure that $ is your jquery shortcut identifier. Check the usage of
var $J = jQuery.noConflict();
In that case try to use $J.datepicker
You seem to be saying that this code:
$('#nmdt1').datetimepicker({
dateFormat: $.datepicker.ATOM,
minDate: nmsdt,
...
...is within your common myjsscript.js script that is loaded on every page. If so, that means it runs on every page and thus you get an error on pages that don't also include the extra plugin scripts.
The code I've quoted above does not mean "If an element with that id exists call the datetimepicker() method", it means "Create a jQuery object that may or may not have any elements in it and then call the datetimepicker() method, passing an object with a property set to $.datepicker.ATOM." That is, even if there is no nmdtd1 element on the page it will still call datetimepicker and still reference $.datepicker.ATOM.
There are at least three ways you can fix this:
Move that code out of the common
myjsscript.jsand just put it on the one page that needs it.Go ahead and include the plugin JS files on all the pages on your site - they'll be be cached by the browser, so it's not really a performance hit assuming your users visit several of your pages anyway.
Move that code within a conditional so the
.datetimerpicker()part is not executed unless needed.
For option 3:
var $nmdt1 = $('#nmdt1');
if ($nmdt1.length > 0) {
$nmdt1.datetimepicker({
dateFormat: $.datepicker.ATOM,
minDate: nmsdt,
...
});
}