0

最近我安装了蒲公英数据表 1.1.1 并且无法弄清楚如何激活核心库附带的 jquery-ui。我需要它来使用日期选择器。

在我的项目中,使用了以下架构:

src
web 
|__ resources
    |__ css
    |__ js
|__ WEB_INF
    |__ views
        |__ ... html views
    |__ spring-servlet.xml

我通过以下方式在 spring-servlet 中加载蒲公英资源:

<mvc:resources mapping="/dandelion/**" location="classpath:/META-INF/resources/dandelion/"/>

在 js 文件夹中,我有 datepicker-init.js :

$(document).ready(
  function () {
    $( "#datepicker" ).datepicker({
      changeMonth: true,
      changeYear: true
    });
  }
);

然后我尝试在我的标题中加载这个脚本

<script th:src="@{/resources/js/datepicker-init.js}"></script>

然后在我的html页面上使用它:

<html xmlns:th="http://www.thymeleaf.org"
      xmlns:dt="http://www.thymeleaf.org/dandelion/datatables">
               ....
              <div id="filter_panel">
                    <form th:action="@{/requests}" th:object="${requestRegisterModel}"
                          method="post">
                        <input id="datepicker" type="text" />
                    </form>
              </div>

但是在浏览器控制台中得到 Uncaught ReferenceError: $ is not defined 错误。我知道发生此错误是因为未定义 jquery-ui,但我无法在标题中加载脚本:

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

因为在这种情况下 jquery 脚本加载了两次。我在这里发现了类似的问题,但我认为可以在没有资产包的情况下加载 jquery-ui,但仍然无法弄清楚如何做到这一点。其他一切都很好。

浏览器控制台

4

1 回答 1

0

好的,我终于搞定了。JQuery 自带蒲公英数据表,所以不需要导入两次。但是 jquery 只有在表加载后才会加载,所以我需要在 jquery-ui 中包含脚本

<script type="text/javascript" src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

在表格之后,例如在页脚中。

于 2015-12-14T14:04:19.830 回答