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?

I opened an issue for this: github.com/thymeleaf/thymeleaf/issues/486 — bernie
– bernie, Commented Apr 14, 2016 at 13:15

amdg · Accepted Answer · 2017-11-18 07:11:50Z

7

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>

answered Nov 18, 2017 at 7:11

amdg

2,2392 gold badges17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

atilkan Over a year ago

thymeleaf version ?

amdg Over a year ago

I think, I was using 3.0.9 at that time

bernie · Accepted Answer · 2016-05-27 16:41:51Z

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

nmy · Accepted Answer · 2015-08-03 05:50:48Z

0

I couldn't find a way to do this, but alternatively you can do something like this.

Define a js variable with the expression you want & use it.

var condition = /*[[${LOCALE.language eq 'ar' }]]*/ 'true';

$("document").ready(function(e) {
        /*<![CDATA[*/
        if( condition) {
           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'}]]*/ ""
                          }
            });
        }
        else {
          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}]]*/ ""
                          }
            });
        }
        /*]]>*/
       });

answered Aug 3, 2015 at 5:50

nmy

50810 silver badges22 bronze badges

2 Comments

Youssef Al Muhaidib Over a year ago

thought of that, but I don't find it elegant !

Johannes Over a year ago

JavaScript natural templates work for conditions too! /*[# th:if="${<condition>}"]*/ <JavaScript code> /*[/]*/ thymeleaf.org/doc/tutorials/3.0/…

Blejzer · Accepted Answer · 2015-08-03 10:40:35Z

-1

Taken from Thymeleaf tutorial:

Expression Basic Objects

When evaluating OGNL expressions on the context variables, some objects are made available to expressions for higher flexibility. These objects will be referenced (per OGNL standard) starting with the # symbol: ... #locale: the context locale...

OGNL stands for Object-Graph Navigation Language. So actual usage would look like this:

<span th:text="${#locale.country}">Should give you Country (in my case HR)</span> 
<span th:text="${#ctx.locale}">Should give you the code (in my case hr_HR)</span>
<span th:text="${#locale.country}=='ar' ? 'Arabic' : 'Not Arabic'"></span>

or maybe better like this:

<span th:text="${#strings.startsWith(#ctx.locale, 'ar')? 'Arabic' : 'Not Arabic'}></span>

since java provides 17 different codes for arabic, and they all start with ar, last example should work on all...

I believe you would know how to use it in your javascript.

PS> More information you can find in Apendix A.

answered Aug 3, 2015 at 10:40

Blejzer

1,1232 gold badges15 silver badges31 bronze badges

2 Comments

Youssef Al Muhaidib Over a year ago

I need it inside javascript, either the whole line ("url": ...) is there or not, l'm already using localization with labels, but this is inside dataTables..

Blejzer Over a year ago

Have you tried something like this: '"url": ([[${#strings.startsWith(#ctx.locale, 'ar')}]]) ? /*[[@{'/json/dataTables-ar.json'}]]*/:""' adding ternary expression so if locale is ar it will return provided url, and if not it will return empty string...

Collectives™ on Stack Overflow

Thymeleaf How to add conditional block in javascript

4 Answers 4

2 Comments

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related