Thymeleaf How to add conditional block in javascript

Question

I have a web application and using Thymeleaf with spring boot, I need to include an option in my javascript in-case the user locale was Arabic, so how add a conditional block and should be processed at server side?

<script th:inline="javascript">
        var customerNameTitle = /*[[#{pendingPayments.customerName}]]*/ 'customer Name';
        var amountTitle = /*[[#{pendingPayments.amount}]]*/ 'Amount';
        var paymentDateTitle = /*[[#{pendingPayments.paymentDate}]]*/ 'payment Date';
        var submissionDateTitle = /*[[#{pendingPayments.submissionDate}]]*/ 'submission Date';

        $("document").ready(function(e) {
            /*<![CDATA[*/
               var table = $("#example").DataTable( {
                    "ajax": {
                                "url": /*[[@{/payments/getPendingPayments}]]*/ "",
                                "type": "GET",
                                "dataSrc": ""
                            },
                    "columns": [
                                { "data": "customerFullName", "title": customerNameTitle },
                                { "data": "amount", "title": amountTitle },
                                { "data": "paymentDate", "title": paymentDateTitle },
                                { "data": "submissionDate", "title": submissionDateTitle },
                            ],
                    "language": {
                                "emptyTable": /*[[#{pendingPayments.emptyTable}]]*/ "",
                                "url":/*[[@{'/json/dataTables-ar.json'}]]*/ ""
                              }
                });
            /*]]>*/
           });
    </script>

the "url":/*[[@{'/json/dataTables-ar.json'}]]*/ should only be loaded if the locale is Arabic, otherwise the the whole line shouldn't be printed in HTML page..

in JSTL I can do that using <c:if>

<c:if test="${LOCALE.language eq 'ar' }">
    ....
</c:if>

is there an equivalent in Thymeleaf?

Answer 1

Although, a old question, the following worked for us.

    <script th:inline="javascript">
    /*<![CDATA[*/
      var isInlineEdit = [[${param.isInlineEdit} != null ? true:false]];

      if(isInlineEdit){
        //in line edit code
      }else{
        //no in line edit
      }
    /*]]>*/
    </script>

Answer 2

The closest I found in Thymeleaf 2 is to add a th:if condition to the whole <script> tag. You can then have multiple <script> tags but of course there will be come copy-pasting involved.

This feature is available in Thymeleaf 3

<script th:inline="javascript">
    var customerNameTitle = /*[[#{pendingPayments.customerName}]]*/ 'customer Name';
    var amountTitle = /*[[#{pendingPayments.amount}]]*/ 'Amount';
    var paymentDateTitle = /*[[#{pendingPayments.paymentDate}]]*/ 'payment Date';
    var submissionDateTitle = /*[[#{pendingPayments.submissionDate}]]*/ 'submission Date';

    $("document").ready(function(e) {
        /*<![CDATA[*/
           var table = $("#example").DataTable( {
                "ajax": {
                            // Using textual syntax from Thymeleaf 3
                            // (not sure about the exact condition for your case
                            // but this is the syntax to use)
                            [# th:if="${LOCALE.language.equals('ar') }"]
                            "url": /*[[@{/payments/getPendingPayments}]]*/ "",
                            [/]
                            "type": "GET",
                            "dataSrc": ""
                        },
                "columns": [
                            { "data": "customerFullName", "title": customerNameTitle },
                            { "data": "amount", "title": amountTitle },
                            { "data": "paymentDate", "title": paymentDateTitle },
                            { "data": "submissionDate", "title": submissionDateTitle },
                        ],
                "language": {
                            "emptyTable": /*[[#{pendingPayments.emptyTable}]]*/ "",
                            "url":/*[[@{'/json/dataTables-ar.json'}]]*/ ""
                          }
            });
        /*]]>*/
       });
</script>

See the Thymeleaf textual syntax in https://github.com/thymeleaf/thymeleaf/issues/395