How can i use for loop in javascript using thymeleaf?

Question

I am using thymeleaf so when I run this application ,it gives me an error in (for(int i=0;i<10;i++) It means I have to respect the syntaxe of thymeleaf.My question is howa can I write this script using thymeleaf.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Getting Started: Handing Form Submission</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
        <script type="text/javascript" src="jquery-1.11.3.js"></script>

</head>
<body>
    <h1>Result</h1>
    <p th:text="'columns_number: ' + ${db.columns_number}" />
    <h3>Création de la base de données</h3>
    <p>Table_name: <input type="text" th:field="${db.table_Name}" /></p>
<table id='tablona' border='1px'>
        <tr>
        <th>field</th>
                <th>Size</th>
                <th>Type</th>
                <th>null</th>
                </tr>


</table>

<script th:inline="javascript">
    /*<![CDATA[*/
    $( document ).ready(function() {

        for(int i=0;i<[[${T(Integer).parseInt(db.columns_number)}]];i++)
      {
        $('<tr>'+
        '<td><input id="field" type="text" name="field'+i+'"  maxlength="255"  required="required"/></td>'+
        '<td><input id="Size" type="text"  name="Size'+i+'"  maxlength="255" required="required"/></td>'+
        '<td><SELECT id="Type" name="Type'+i+'">'+
'<OPTION VALUE="varchar">varchar</OPTION>'+
'<OPTION VALUE="int">int</OPTION>'+
'<OPTION VALUE="text">long</OPTION>'+
'<OPTION VALUE="float">float</OPTION>'+
'<OPTION VALUE="double">double</OPTION>'+
'<OPTION VALUE="Date">Date</OPTION>'+
'<OPTION VALUE="Time">Time</OPTION>'+
'<OPTION VALUE="Year">Year</OPTION>'+
'<OPTION VALUE="Real">Real</OPTION>'+
'<OPTION VALUE="Boolean">Boolean</OPTION>'+
'<OPTION VALUE="longText">longText</OPTION>'+
'<OPTION VALUE="Binary">Binary</OPTION>'+
'</SELECT></td>'+
'<td><SELECT id="null" name="nullabilite'+i+'">'+
'<OPTION VALUE="null">null</OPTION>'+
'<OPTION VALUE="not_null">not_null</OPTION>'+
'</SELECT></td>'+
    '</tr>').appendTo($("#tablona")).html()

    }
    });
    /*]]>*/
</script>
      <p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>    

</body>
</html>

jmgross · Accepted Answer · 2015-05-12 17:24:11Z

6

You should wrap your script in this structure :

<script th:inline="javascript">
    /*<![CDATA[*/
    $( document ).ready(function() {
        for(i=0;i<10;i++) {
            ...
        }
    });
    /*]]>*/
</script>

EDIT :

Don't forget to store your javascript and other static files in the /src/main/webapp folder of your spring-boot project

EDIT2 :

You can do directly your script with thymeleaf :

<tr th:each="i : ${#numbers.sequence( 1, db.columns_number)}">
    <td><input id="field" th:name="${'field'+i}" maxlength="255"
        required="required" type="text" /></td>
    <td><input id="Size" th:name="${'Size'+i}" maxlength="255"
        required="required" type="text" /></td>
    <td><select id="Type" th:name="${'Type'+i}">
             ...
        </select></td>
    <td><select id="null" th:name="${'nullabilite'+i}">
            <option value="null">null</option>
            <option value="not_null">not_null</option>
    </select></td>
</tr>

edited May 12, 2015 at 17:24

answered May 12, 2015 at 14:43

jmgross

2,3461 gold badge22 silver badges25 bronze badges

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

14 Comments

Chawqi Hajar Over a year ago

i still have one question ,instead of 10 i want to make an input of my form wich is the number of columns shall i write for(int i=0;i<${db.columns_number};i++) it's correct because it doesn't work?

jmgross Over a year ago

You should wrap it in [[ ]] : for(int i=0;i< [[${db.columns_number}]] ;i++)

jmgross Over a year ago

You have to be more verbose. Error in console ? Do you inspect the given result to check the returned value ?

Chawqi Hajar Over a year ago

i am sorry but all this technologies are new for me so i make an effort to understand . ther's no error in console ,it just gives me a table without row like if he didn't know the attribute db.columns_number

jmgross Over a year ago

Check the returned value with this before </body> : <p th:text="${db.columns_number}">Default</p> What is displaying ?

|

Manwal · Accepted Answer · 2015-05-12 14:49:41Z

2

In thymeleaf current scripting modes are javascript (th:inline="javascript") and dart (th:inline="dart").

Use following snippet instead of ~~<script type="text/javascript">~~

<script th:inline="javascript">
/*<![CDATA[*/
...

   //your code here

...
/*]]>*/
</script>

edited May 12, 2015 at 14:49

answered May 12, 2015 at 14:43

Manwal

23.9k15 gold badges65 silver badges95 bronze badges

Comments

JackChouMine · Accepted Answer · 2017-12-12 06:30:38Z

 <table border='1px'>
    <thead>
        <th>field</th>
        <th>Size</th>
        <th>Type</th>
        <th>null</th>
    </thead>
    <tbody> </tbody>
</table>
<script th:inline="javascript">
    /*<![CDATA[*/
    $(document).ready(function () {
        for (var i = 0; i < 10; i++) {
            var row=[],r=0;
            row[r]="<tr>";
            row[++r]='<td>';
            row[++r]='<input id="field" type="text" name="field"';
            row[++r]=i;
            row[++r]='maxlength="255"  required="required"/>';
            row[++r]='</td><td>';
            row[++r]='<input id="Size" type="text"  name="Size"';
            row[++r]=i;
            row[++r]= 'maxlength="255" required="required"/>';
            row[++r]= '</td>';
            /*
            * this more readable
            * other td
            *
            */
            row[++r]='</tr>';
           $("tbody").append(row.join(""));
        }
    });
    /*]]>*/
</script>

Collectives™ on Stack Overflow

How can i use for loop in javascript using thymeleaf?

3 Answers 3

14 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

14 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related