Thymeleaf foreach loop with button event inside

Question

I have used the Thymeleaf foreach to traverse all posts where each post has a "Comment" button. I would like to display the comment list after click this "Comment" button.

The default is hidden

The following is my codes:

            <div th:each="post:${posts}">
                <div class="panel panel-default" th:object="${post}">
                    <div class="panel-body">
                        <p th:text="*{user.username}">username</p>
                        <p th:text="*{createTime}">time</p>
                        <p th:text="*{content}">content</p>
                        <div>
                            <form th:action="@{/posts/liked/input}" method="post"
                                style="display: inline">
                                <input type="hidden" name="postId" id="postIdId"
                                    class="form-control" th:value="*{id}">
                                <button type="submit" class="btn btn-primary">like</button>
                            </form>
                            <button class="btn btn-primary commentBt"
                                style="display: inline">Comment</button>
                        </div>
                    </div>

                    <!--  This is the part I want to show after click Comment -->
                    <div style="display: none">
                        <form th:action="@{/posts/comment/input}" method="post">
                            <textarea class="form-control" name="content" id="contentId"
                                rows="1"></textarea>
                            <input type="hidden" name="postId" id="postIdId"
                                class="form-control" th:value="*{id}">
                            <button type="submit" class="btn btn-primary">Reply</button>
                        </form>
                        <div th:each="comment:*{comments}">
                            <div th:object="${comment}">
                                <p th:text="*{content}">content</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

How to do this in the foreach loop?

Kevinsss · Accepted Answer · 2018-06-20 03:09:24Z

1

You can do this by using js, below are example codes.

First, you need to add onclick to commit button:

<button  class="btn btn-primary commentBt"
                            style="display: inline" onclick="showDiv()">Comment</button>

Then, get the hidden div and edit function showDiv to dispaly the div.

  <!-- set id -->
  <div id="test" style="display: none">

    <script>
    <!-- function to change display to block -->
    function showDiv(){
        var div = document.getElementById("test");
        div.style.display="block";
    }
</script>

Hope this will help you!

answered Jun 20, 2018 at 3:09

Kevinsss

8148 silver badges7 bronze badges

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

2 Comments

Vincent Over a year ago

Thanks. But the problem is that since it is in the foreach loop, all the <div> has the same id which is "test". And when I click this button, it will always show the first <div>. Should I generate the dynamic id for each <div>?

Kevinsss Over a year ago

Yes, you can use th:id to generate the dynamic id. Then you can re-write the function showDiv which has a param of id, like this: showDiv(div_id). When you click the button of commit, you need to pass parameter to the function showDiv

Collectives™ on Stack Overflow

Thymeleaf foreach loop with button event inside

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related