使用 Struts2 JQuery datepicker 标记获取未捕获的 TypeError 错误答案

【问题标题】：Getting Uncaught TypeError errors using Struts2 JQuery datepicker tag使用 Struts2 JQuery datepicker 标记获取未捕获的 TypeError 错误
【发布时间】：2022-01-23 19:12:43
【问题描述】：

我有一个带有使用引导程序构建的 UI 的 Struts 2 应用程序，我正在尝试使用 struts2 jquery 标记库让 JQuery datepicker 工作。我正在使用 <sj:head compressed="true" jqueryui="true" /> 来包含 JQuery CSS 和 JS 库。以下是使用sj:head 包含的内容：

<script type="text/javascript" src="/struts/js/base/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="/struts/js/base/jquery.ui.core.min.js?s2j=3.7.1"></script>
<script type="text/javascript" src="/struts/js/plugins/jquery.subscribe.min.js?s2j=3.7.1"></script>

<script type="text/javascript" src="/struts/js/struts2/jquery.struts2.min.js?s2j=3.7.1"></script>

<script type="text/javascript">
    $(function () {
        jQuery.struts2_jquery.version = "3.7.1";
        jQuery.scriptPath = "/struts/";
        jQuery.ajaxSettings.traditional = true;

        jQuery.ajaxSetup({
            cache: false
        });

        jQuery.struts2_jquery.require("js/struts2/jquery.ui.struts2.min.js?s2j=3.7.1");

    });
</script>

    <link id="jquery_theme_link" rel="stylesheet"
          href="/struts/themes/smoothness/jquery-ui.css?s2j=3.7.1" type="text/css"/>

下面是JSP中datepicker相关的代码：

<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<div class="form-group row">
    <label class="col-sm-2 control-label">From</label>
    <div class="col-sm-4">
        <sj:datepicker id="fromDate" displayFormat="m/d/y" showOn="focus" name="startDate"></sj:datepicker>
    </div>
    <label class="col-sm-2 control-label">To</label>
    <div class="col-sm-4">
        <sj:datepicker id="toDate" displayFormat="m/d/y" showOn="focus" name="endDate"></sj:datepicker>
    </div>
</div>

<script>
$(function() {

    $("#fromDate").datepicker({
        dateFormat: 'yy-mm-dd',
        maxDate: 0,
        changeYear: true 
    }).attr('readonly', 'readonly');

    $("#toDate").datepicker({
        dateFormat: 'yy-mm-dd',
        maxDate: 0,
        changeYear: true 
    }).attr('readonly', 'readonly');
});
</script>

这些字段显示正常，并且似乎也可以正常工作。但是，我在控制台中收到以下错误：

Uncaught TypeError: Cannot set properties of undefined (setting 'version')
    at HTMLDocument.<anonymous> (viewResults:62:39)
    at j (jquery-1.11.0.min.js:776:111)
    at Object.fireWith [as resolveWith] (jquery-1.11.0.min.js:810:100)
    at Function.ready (jquery-1.11.0.min.js:865:65)
    at HTMLDocument.K (jquery-1.11.0.min.js:873:97)
jquery-3.1.1.min.js:2 Uncaught TypeError: Cannot read properties of undefined (reading 'initDatepicker')
    at HTMLDocument.<anonymous> (viewResults:360:27)
    at j (jquery-3.1.1.min.js:2:29948)
    at k (jquery-3.1.1.min.js:2:30262)
jquery-3.1.1.min.js:2 Uncaught TypeError: Cannot read properties of undefined (reading 'bind')
    at HTMLDocument.<anonymous> (viewResults:372:26)
    at j (jquery-3.1.1.min.js:2:29948)
    at k (jquery-3.1.1.min.js:2:30262)
jquery-3.1.1.min.js:2 Uncaught TypeError: Cannot read properties of undefined (reading 'initDatepicker')
    at HTMLDocument.<anonymous> (viewResults:382:27)
    at j (jquery-3.1.1.min.js:2:29948)
    at k (jquery-3.1.1.min.js:2:30262)
jquery-3.1.1.min.js:2 Uncaught TypeError: Cannot read properties of undefined (reading 'bind')
    at HTMLDocument.<anonymous> (viewResults:394:26)
    at j (jquery-3.1.1.min.js:2:29948)
    at k (jquery-3.1.1.min.js:2:30262)

我无法弄清楚导致这些错误的原因是什么。我尝试删除 sj:head 并手动包含库，但这也不起作用。

【问题讨论】：

标签： javascript jquery-ui struts2 jquery-ui-datepicker struts2-jquery

【解决方案1】：

加载了错误版本的jQuery框架。

<script type="text/javascript" src="/struts/js/base/jquery-1.11.0.min.js"></script>

不要在同一页面上两次加载 jQuery 库。第一次加载它

<script src="... ">

第二次加载时

<sj:head/>

您应该在<head> 标记的正文中包含<sj:head/> 标记。

如果您使用<sj:head> tag，那么您可以自定义它以使用不同版本的jQuery。

【讨论】：

是的，我意识到了，这确实是问题所在。谢谢！
支持答案可以帮助其他人选择正确的答案，更好地解决他们的问题。