jqueryjquery-uispring-mvcdatatabledandelion

Dandelion Datatables can't load jquery-ui

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

Solution

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