Thymeleaf How to add conditional block in javascript

Question

I have a web application and using Thymeleaf with spring loading, I need to include an option in my javascript, in case the user language was Arabic, and how to add a conditional block and it should be processed on the 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> 

"url":/*[[@{'/json/dataTables-ar.json'}]]*/ should only be loaded if the locale is Arabic, otherwise the entire line should not be printed on an HTML page.

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

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

is there an equivalent in thimeleaf?

Answer 1

The closest I found in Thymeleaf 2 was to add a th:if condition to the entire <script> . You can then have multiple <script> tags, but of course copying will be 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 Thymeleaf text syntax at https://github.com/thymeleaf/thymeleaf/issues/395

Answer 2

I could not find a way to do this, but as an alternative, you can do something like this.

Define the js variable with the expression you want and 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}]]*/ "" } }); } /*]]>*/ }); 

Answer 3

Adapted from the textbook of Timeleaf:

Key expression objects

When evaluating OGNL expressions for context variables, some objects become available for expressions for greater flexibility. These objects will be referenced (according to the OGNL standard), starting with # symbol: ... #locale: the context locale...

OGNL stands for Object Navigation Language. So the 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:

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

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

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

PS> More information can be found in Apendix A.

Answer 4

Although, an old question, we 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>