Question

99

TypeError: $.datepicker is undefined

rated 0 times [ 103] [ 4] / answers: 1 / hits: 52680 / 12 Years ago, sun, august 12, 2012, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dexter

Add To Favorites

Follow

Total Points: 717

Total Questions: 98

Total Answers: 115

Location: Sudan

Member since Thu, May 7, 2020

4 Years ago

answered 12 Years ago breap · Accepted Answer

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.js and 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,

       ...

    });

}