蒲公英数据无法加载jquery-ui [英] Dandelion Datatables can't load jquery-ui

查看:301
本文介绍了蒲公英数据无法加载jquery-ui的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

最近我安装了蒲公英数据表1.1.1,不知道如何激活核心库附带的jquery-ui。我需要使用datepicker。



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

  src 
web
| __资源
| __ css
| __ js
| __ WEB_INF
| __视图
| __ ... html视图
| __ spring-servlet.xml

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

 < mvc:resources mapping =/蒲公英/ **location =classpath:/ META-INF / resources /蒲公英//> 

在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 =datepickertype =text/>
< / form>
< / div>

但获取Uncaught ReferenceError:浏览器控制台中未定义错误。
我知道这个错误是因为jquery-ui没有定义,但是我无法在我的头文件中加载脚本:

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

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



浏览器控制台

解决方案

好的,终于有了这个工作。
JQuery与蒲公英数据表相结合,因此无需导入两次。但是jquery只有在加载表之后加载,所以我需要使用jquery-ui包含脚本

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

表后,例如在页脚中。


Recently I installed Dandelion datatables 1.1.1 and can't figure out how to activate jquery-ui which comes with the core library. I need that to use datepicker.

In my project the following architecture is used:

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

I load dandelion resources in spring-servlet via:

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

In js folder I have datepicker-init.js :

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

Then I try to load this script in my header

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

and then use it on my html page:

<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>

but get Uncaught ReferenceError: $ is not defined error in browser console. I know that this error occurs because jquery-ui is not defined, but I can't load scripts in my header:

<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>

because in this case jquery script loaded twice. I found similar issue here, but I thought, that it is possible to load jquery-ui without asset bundles, but still can't figure out how to do that. Everything else works just fine.

Browser console

解决方案

Ok, finally I've got this working. JQuery comes along with Dandelion Datatables, so there is no need to import it twice. But jquery is loaded only after the table is loaded, so I need to include script with jquery-ui

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

after table, for example in the footer.

这篇关于蒲公英数据无法加载jquery-ui的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆