{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 可以哭但决不认输i 的问题《JavaScript file doesn't load》','https://www.manongdao.com/q-902767.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I'm using Spring MVC, Thymeleaf and want to import a javascript file in my html document. Although all links are set correctly and the files appear in the debugging view in my browser, they don't load. There is following JS in the HTML that should call a datepicker, but it doesn't show up:
<script th:inline="javascript">
/*<![CDATA[*/
$( function() {
$( "#datepicker" ).Datepicker(
);
} );
/*]]>*/
</script>
the files are included this way:
<script type="text/javascript" th:src="@{/resources/js/file.js}"></script>
CSS files work just fine just with the type changed.
Any ideas how to fix this?
Shows error on Chrome debugging
Now I deleted all not necessary js files from the import and it shows following error:
This shows that the jquery-1.12.4 is used.
When you are using Spring and Thymeleaf the following project structure is recommended:
Then including different resources in your templates will look like this:
The Answer:
1)
<th:block></th:block>makes no diffrence2) The additions to the html tag
make no difference
3) placing the script-tags with content at the bottom of the body is the same as when placing it in the head
4) I use Bootstrap in this project and used the datepicker inside a div of Bootstrap. After placing it somewhere else in the body and not inside a div it worked.
Conclusion: If you are using Spring MVC and Thymeleaf and want to include JavaScript files you need:
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) Make sure your JS or CSS files are not "overwritten" by following files
Thanks for your time and help @Parth!