2016-12-17 2 views
1

Я использую Spring MVC, Thymeleaf и хочу импортировать файл javascript в свой html-документ. Хотя все ссылки установлены правильно и файлы отображаются в режиме отладки в моем браузере, они не загружаются. Там следует за JS в HTML, который необходимо вызвать DatePicker, но он не показывает:Файл JavaScript не загружается

<script th:inline="javascript"> 
/*<![CDATA[*/ 
    $(function() { 
    $("#datepicker").Datepicker(
    ); 
    }); 
/*]]>*/ 
</script> 

файлы включены таким образом:

<script type="text/javascript" th:src="@{/resources/js/file.js}"></script> 

CSS файлы работать нормально только с тип изменился.

Любые идеи, как исправить это?

Shows error on Chrome debugging

Теперь я удалил все не необходимые JS файлы из импорта и он показывает следующее сообщение об ошибке:

more precise error

Это показывает, что используется JQuery-1.12.4.

ответ

0

При использовании Spring и Thymeleaf следующая структура проекта рекомендуется:

src 
    |-main 
     |-resources 
      |-static 
      | |-css 
      |  |-bootstrap.min.css 
      |  |-application.css 
      | |-images 
      | |-js 
      |  |-jquery-3.1.1.js 
      |-templates 

Затем включая различные ресурсы в шаблонах будет выглядеть следующим образом:

<head> 
    <link href="../static/css/bootstrap.min.css" rel="stylesheet" media="screen" 
      th:href="@{/css/bootstrap.css}"/> 
    <link href="../static/css/application.css" rel="stylesheet" media="screen" 
      th:href="@{/css/application.css}"/> 

    <script src="../static/js/jquery-3.1.1.js" 
      th:src="@{/js/jquery-3.1.1.js}"></script> 
</head> 
0

Ответ:

1) <th:block></th:block> не делает разностное

2) дополнения к HTML тега

xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" 
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" 

не делают никакой разницы

3) размещение скриптов-тегов с содержимым в нижней части корпуса такое же, как при помещении его в головку

4) Я использую Bootstrap в этом проекте и использовал datepicker внутри div Bootstrap. После размещения его где-то еще в теле, а не внутри div, он работал.

Вывод: Если вы используете Spring MVC и Thymeleaf и хотите включить файлы JavaScript вам необходимо:

1) <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >

2) <link th:href="@{/resources/.../file.css}" rel="stylesheet" type="text/css"/>

3) <script type="text/javascript" th:src="@{/resources/.../file.js}"></script>

4) Убедитесь, что ваши файлы JS или CSS не «перезаписаны» следующими файлами:

Спасибо за ваше время и помощь @Parth!

Смежные вопросы