Use javascript function in th:if for filtering some table entities

Question

I want to hide the table rows that do not satisfy a date condition written in javascript function.

the th:onclick attribute is working fine and returns me the correct comparison. But when I run the same in th:if the function is not called!

the syntax for the function call:

case 1: the function is called and returns me the true or false

<tr th:each="patient : ${patients}"  th:onclick="compareDates([[${patient.dateConverter()}]])">

case 2 that I want to use for the table row filtering: the function is not called:

<tr th:each="patient : ${patients}"  th:if="compareDates([[${patient.dateConverter()}]])">

the js function is as follows:

<script th:inline="javascript">
/*<![CDATA[*/
    
     function compareDates(date) {
     
    var date1= document.getElementById("appDate").valueAsDate.toLocaleDateString();

    return date == date1;
}
/*]]>*/
</script>

I tried to use th:hidden attribute as well I am getting the following error:

Caused by: org.attoparser.ParseException: Could not parse as expression: "compareDates([[${patient.dateConverter()}]])" (template: "index" - line 277, col 50)
    at org.attoparser.MarkupParser.parseDocument(MarkupParser.java:393)
    at org.attoparser.MarkupParser.parse(MarkupParser.java:257)
    at org.thymeleaf.templateparser.markup.AbstractMarkupTemplateParser.parse(AbstractMarkupTemplateParser.java:230)
    ... 121 more

th:onlick simply outputs the string compareDates([[${patient.dateConverter()}]]). th:if tries to evaluate the expression compareDates([[${patient.dateConverter()}]]) as a boolean true or false. Neither of them understand JavaScript. There is no way to have Thymeleaf run JavaScript like you want to happen here. — Metroids
– Metroids, Commented Dec 16, 2022 at 15:07
Thymeleaf rendering (including the th:if expression) takes place on the server. There is no JavaScript function compareDates on the server. There is no JavaScript on the server. — andrewJames
– andrewJames, Commented Dec 16, 2022 at 15:08
got it. thanks for the clarification. any ideas to get an html<input> value in java? I am thinking of adding a method on the server side (java) and calling by patient bean in th:if for example. like this: th:if=" ${patient.dateConverter()} == ${patient.methodGettingHtmlInputValue()}" — Saman KHATAEI
– Saman KHATAEI, Commented Dec 16, 2022 at 15:15

Saman KHATAEI · Accepted Answer · 2022-12-16 16:59:58Z

0

For those having the same challenge, I implemented the table filtering by pure javascript after thymeleaf generated the table. The js function is as follows:

function compareDates() {
         var rows = document.getElementsByTagName("table")[0].rows;
         for (let i = 1; i < rows.length; i++) {
             var td = rows[i].getElementsByTagName("td")[2];
             var split= td.innerHTML.split(" "); 
             
           if(split[0]!= document.getElementById("appDate").valueAsDate.toLocaleDateString()){
             
               rows[i].style.display = "none";
           }
           else {
               rows[i].style.display = "table-row";
           }
         }
}

references:

Hiding a <td> depending on the Condition

how to get a td value of a table using javascript

edited Dec 16, 2022 at 16:59

answered Dec 16, 2022 at 16:32

Saman KHATAEI

1271 silver badge9 bronze badges

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

Collectives™ on Stack Overflow

Use javascript function in th:if for filtering some table entities

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related