I tried to develop a man-hour management tool

What i did

We have developed a web application that manages man-hours. Language: Java (Spring), JavaScript

procedure

1. Create a project (register the project code at this time)
2. By entering the project code registered in 1., transition to the project you want to add / edit / view
3. Add task (task name, man-hours, start date, end date, person in charge, etc.)
4. Task browsing (what kind of task the person in charge completed in a certain period, how much man-hours, how much man-hours each person in charge of the project spends, etc.)

screen

Project code input screen

Task addition (and modification) screen

Task viewing screen

Clogged

Cooperation between JavaScript and Thymeleaf?

As I wrote in Previous article, for example, in JavaScript

target.html('<a th:href="@{/hello}">sample</a>');

Even if I wrote, the a tag did not work.

solution

<script type="text/javascript" th:inline="javascript">
    const link = /*[[@{/hello}]]*/'';
    target.html('<a href="' + link + '">sample</a>');
</script>

I solved it by writing. In this way, I struggled with the fact that Thymeleaf's `th:` cannot be used in JavaScript.

The problem of not being able to write the `form``` tag inside the `table``` tag

For example

<table>
    <tr>
        <th>#</th>
        <th>name</th>
        <th>button</th>
    </tr>
    <tr>
        <form>
            <td>1</td>
            <td><input type="text"/></td>
            <td><input type="submit"></td>
        </form>
    </tr>
    <tr>
        <form>
            <td>2</td>
            <td><input type="text" /></td>
            <td><input type="submit"></td>
        </form>
    </tr>
</table>

If it's an image,

This is the case. Looking at this with Chrome's developer tools, ...

Strange. .. .. `` `form``` tag, don't close it there. .. ..

solution

1. Add id attribute to `` `form``` tag
2. Enter the id given in 1. in the form attribute of the input tag.

By doing this, you can send the value value of input corresponding to the id of the `` form``` tag. By the way, it seems that the ``` form``` tag can be written anywhere above or below the `input``` tag.

In the above example

<table>
    <tr>
        <th>#</th>
        <th>name</th>
        <th>button</th>
    </tr>
    <tr>
        <form id="form_01"></form>
        <td>1</td>
        <td><input type="text" form="form_01" /></td>
        <td><input type="submit" form="form_01"></td>
    </tr>
    <tr>
        <form id="form_02"></form>
        <td>2</td>
        <td><input type="text" form="form_02" /></td>
        <td><input type="submit" form="form_02"></td>
    </tr>
</table>

Looking at the developer tools

It should look like this! Probably this will work.

that's all. Thank you for reading to the end.

reference

form tags cannot be nested & how to deal with them How to write HTML5 FORM and INPUT separately