Twitter Bootstrap Question posted in

Twitter bootstrap – TypeError: $(…).datepicker is not a function in thymeleaf

jQuery date picker is not working

Here is my html

        <!DOCTYPE html>
        <html layout:decorator="layout" xmlns:th="http://www.thymeleaf.org">
        <head>
        <title>Tables | Bootstrap 3.x Admin Theme</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <script type="text/javascript" src="/js/bootstrap.min.js"></script>
        <script type="text/javascript"
            src="/js/twitter-bootstrap-hover-dropdown.min.js"></script>
        <script type="text/javascript"
            src="/js/bootstrap-admin-theme-change-size.js"></script>

        <script type="text/javascript" src="/js/DT_bootstrap.js"></script>

        <!-- Bootstrap -->
        <link rel="stylesheet" media="screen" href="/css/bootstrap.min.css" />
        <link rel="stylesheet" media="screen"
            href="/css/bootstrap-theme.min.css" />

        <!-- Bootstrap Admin Theme -->
        <link rel="stylesheet" media="screen"
            href="/css/bootstrap-admin-theme.css" />
        <link rel="stylesheet" media="screen"
            href="/css/bootstrap-admin-theme-change-size.css" />

        <!-- Datatables -->
        <link rel="stylesheet" media="screen" href="/css/DT_bootstrap.css" />


        <!-- Jquery -->
        <link rel="stylesheet"
            href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>


        <script type="text/javascript">
            function notify() {
                alert("Notify called");
                $("#datepicker").datepicker();
            }
            $(function() {
                alert("hi");
                $("#datepicker").datepicker();
            });
        </script>
       </head>


           <body>
           <div>
            <input type="text" id="datepicker" name="endDate"
                                    onkeyup="notify()" />
            </div>
            </body>

I tried several solutions, which are there in stackoverflow, but none of them are working…

do I need to use jquery in another way because of thymeleaf?

Please help me out…

Tags:

4

Answers


  1. 0

    Put this script file

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

    at the top of all other js files.

    Login or Signup to reply.
  2. 0

    If you load jQueryUI through Google, make sure the jQueryUI CSS theme has the same version as the jQueryUI library.

    For example: like this,

    <link rel="stylesheet"
            href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    Login or Signup to reply.
  3. 0

    Drop the function initiate datepicker at page ready

    $( document ).ready(function() {
    $("#datepicker").datepicker();
});
    Login or Signup to reply.
  4. 0

    See the Thymeleaf documentation about inline javascript. You should use the following (best at the end of the page before </body>). From what I recall wrapping the javascript in /*<![CDATA[*/ and /*]]>*/ is required.

    <script th:inline="javascript">
    /*<![CDATA[*/

    $(function () {
        $("#datepicker").datepicker();
    });

    /*]]>*/
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search