Блог

Главная - Вопросы по программированию - Щелчок строки таблицы Thymeleaf не распознает функцию js

Щелчок строки таблицы Thymeleaf не распознает функцию js

#spring #thymeleaf

#spring #thymeleaf

Вопрос:

Событие onclick жалуется на то, что функция Java script не определена.

 <body>
    <div layout:fragment="content" th:remove="tag">
        <div class="container">
            <h6 class="mb-3">Restaurant Order Details</h6>
            <table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th scope="col">Order Id</th>
                        <th scope="col">Order Details</th>
                        <th scope="col">Date</th>
                        <th scope="col">Amount</th>
                    </tr>
                </thead>
                <tbody>

                    <tr th:each="order : ${orders}" style="cursor: pointer"
                        th:attr="onclick=|getOrderItems('${order.orderId}')|">
                        <td scope="row" th:text="${order.orderId}"></td>
                        <td th:text="${order.orderDetais}"></td>
                        <td th:text="${order.orderDate}"></td>
                        <td th:text="${order.amount}"></td>
                    </tr>
                    <tr>
                        <td colspan="3">Total</td>
                        <td th:text="${grandTotal}"></td>
                    </tr>
                </tbody>
            </table>
            <div class="mb-4"></div>


        </div>
    </div>
    <script>
        function getOrderItems(orderId) {
            alert("order details here");
        }
    </script>
</body>

Когда я нажимаю на строку таблицы, я получаю

 Uncaught ReferenceError: getOrderItems is not defined
    at HTMLTableRowElement.onclick

Когда вместо этого я заменяю getOrderItems простым предупреждением, срабатывает предупреждение. Как мне это исправить?

Ответ №1:

Я знаю, что это, вероятно, не тот ответ, который вы ищете, это просто предложение: в JavaScript вы действительно можете использовать переменные thymeleaf следующим образом:

 var myVar = [[${order.orderId}]];

Ответ №2:

Проблема здесь заключалась в том, что я объявил свой <script> внешний <div layout:fragment="content" th:remove="tag"> тег. Поскольку это фрагмент, thymeleaf отобразил все только в этой области. Помещение тега script внутри этого решило проблему.

Ответ №3:

Вы не передаете переменную thymeleaf в javascript. Вы можете выдавать <script> данные за пределами вашего (чуть выше </body> ) и по-прежнему передавать переменную в JS.

 <script th:inline="javascript">
    /*<![CDATA[*/
    var orders = [[${orders}]];
    function getOrderItems(orders) {
        alert("order details here ");
    }
    /*]]>*/
</script>

Затем вы можете вызвать метод JS для вашего события onclick html.

 <tr th:each="order : ${orders}" style="cursor: pointer"
    th:attr="onclick=|getOrderItems(orders)}')|">
    <td scope="row" th:text="${order.orderId}"></td>
    <td th:text="${order.orderDetais}"></td>
    <td th:text="${order.orderDate}"></td>
    <td th:text="${order.amount}"></td>
</tr>

Тем не менее, я все еще вижу проблему, если вы хотите передать все order в javascript. Я не использовал <script> внутри th:each цикла.

Комментарии:

1. Я пытался это сделать. Однако, когда последняя страница была отображена с заголовками и всеми, сценарий отсутствовал, когда я просматривал источник страницы.