TypeError：$ .datepicker未定义 [英] TypeError: $.datepicker is undefined
问题描述
我的javascript有代码，对于我网站上的其中一个页面：
my javascript has code, for one of the pages on my website:
$('#nmdt1').datetimepicker({
dateFormat: $.datepicker.ATOM,
minDate: nmsdt,
...
...
这个运行正常，当加载id =nmdt1的页面时。
我只加载相关的datetimepicker js库（模块）我加载那个页面。
到目前为止很好。
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.
编辑：这是firebug日志的正确错误：
here is the correct error for firebug log:
TypeError: $.datepicker is undefined
http://myswbsite/jscript/myjsscript.js
Line 569
第569行是：
dateFormat: $.datepicker.ATOM,
是的，这个错误只出现在我没有加载相关js代码的页面上（jquery的-UI-timepicker-addon.js）。我没有在每页上加载这个js的原因是，我只在一页上需要它。
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.
更多细节：
（在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>
您在上面看到的最后一个javascript代码（标题的底部）在每次jquery-时都不会运行ui-timepicker-addon.js lib没有被加载（你在firebug中看到错误 - 我可以忍受错误，但为什么这个最后一个代码没有运行，我不确定）。我无法理解为什么这个例程不会因为我没有加载一个'附加'库而被运行
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
运行所有内容的页面正确加载以下js脚本BODY
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>
此页面上您在标题中看到的最后一个javascript代码也会加载并显示警报！
on this page the last javascript code you see in header also loads and displays the alert!
我很难搞清楚这一点。
推荐答案
你似乎是说这段代码：
$('#nmdt1').datetimepicker({
dateFormat: $.datepicker.ATOM,
minDate: nmsdt,
...
...是在每个页面上加载的常见 myjsscript.js 脚本中。如果是这样，这意味着它会在每个页面上运行，因此在不能同时运行的页面上出现错误包括额外的插件脚本。
...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.
我上面引用的代码不意味着如果存在具有该id的元素，则调用 datetimepicker（）方法，它的意思是创建一个jQuery对象，其中可能包含或不包含任何元素，然后调用 datetimepicker（）方法，传递属性设置为 $。datep的对象icker.ATOM 。也就是说，即使页面上没有nmdtd1元素，它仍然会调用 datetimepicker 并仍然引用 $ .datepicker.ATOM 。
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:
-
将该代码移出常见的
myjsscript.js，然后将其放在需要它的一页上。
Move that code out of the common
myjsscript.jsand just put it on the one page that needs it.
继续在您网站的所有页面上包含插件JS文件 - 它们将被浏览器缓存，所以它不是真的假设您的用户无论如何都要访问您的几个页面，性能就会提高。
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.
在条件中移动该代码，以便 .datetimerpicker（）除非需要，否则不执行部分。
Move that code within a conditional so the .datetimerpicker() part is not executed unless needed.
对于选项3：
var $nmdt1 = $('#nmdt1');
if ($nmdt1.length > 0) {
$nmdt1.datetimepicker({
dateFormat: $.datepicker.ATOM,
minDate: nmsdt,
...
});
}
这篇关于TypeError：$ .datepicker未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
