我有一个 JavaScript 项目来构建一个模态窗口来显示项目任务。在模态窗口中有几个 JS 库,用于诸如弹出窗口、就地编辑、日期选择器、 Markdown 、@mentions、滚动条等,还有更多。
该项目现在一团糟,但它是我的第一个大型 JS 项目,并且进展顺利。
基本上会有任务列表,当点击任务时,它会加载任务数据并将任务的库初始化到模态窗口中。
所有任务在 DOM 中共享相同的模态,因此当模态关闭时,它会破坏启动的库并重置数据。单击的下一个任务记录将重做模态的构建周期。
我最近还添加了通过附加
打开任务模式的功能
#task-modal=1414135033731
到 URL。其中数字将是任务记录数据库 ID 号。
我的问题是,当我加载页面时,大约 50% 的时间一切都加载完美,没有控制台错误,一切都运行良好。
另外 50% 的负载因控制台错误而停止:
Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
In file jquery-datepicker-foxrunsoftware.js:440
我使用的 Date Picker 日历库文件的第 440 行显示了这段代码......
下面代码中的第 440 行就是这个 var width = tbl.offsetWidth;
/**
* Internal method which lays out the calendar widget
*/
layout = function(el) {
var options = $(el).data('datepicker');
var cal = $('#' + options.id);
if (options.extraHeight === false) {
var divs = $(el).find('div');
options.extraHeight = divs.get(0).offsetHeight + divs.get(1).offsetHeight; // heights from top/bottom borders
options.extraWidth = divs.get(2).offsetWidth + divs.get(3).offsetWidth; // widths from left/right borders
}
var tbl = cal.find('table:first').get(0);
var width = tbl.offsetWidth; // line 440
var height = tbl.offsetHeight;
cal.css({
width: width + options.extraWidth + 'px',
height: height + options.extraHeight + 'px'
}).find('div.datepickerContainer').css({
width: width + 'px',
height: height + 'px'
});
},
当点击...时,控制台错误显示如下:
如前所述,它有一半的时间会发生,而其他时候它可以正常工作而不会显示此错误。
我的应用程序乱七八糟的是要在这里发布许多行代码,但我已经上传了一个演示以在此处展示它的运行情况
演示:已删除
查看演示时,请查看控制台。它可能会全部加载查找,但随后会继续重新加载页面,您最终会收到错误消息。有时我会一遍又一遍地得到错误!
妈妈真的卡住了,我需要帮助才能克服这个问题。
我不想使用新的日期选择器库,但此时如果无法消除此错误,我可能不得不使用。
如果可以的话请帮忙,我已经被困了好几个星期了!
即使有尝试的想法也将不胜感激
最佳答案
由于某种原因,您的日期选择器尚未初始化并且您的 '#' + options.id
查找失败,因为它尚不存在。
有一些异步的事情在发生,而你并没有等待它(或者 datepicker 只是一个蹩脚的插件,谢天谢地,我没有过多地处理 jQuery)。
关于JavaScript 库由于 undefined variable 而失败,但它只发生在页面加载的一半,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33838128/