1

I want to use th:insert on a which is in the container below navbar. Each button would insert different code. I know that there is a th:if but I don't know how to use it to check if button was pressed. Maybe there is a better solution for this problem than using th:insert and th:if?

I just wanted to change content of the container instead of reloading to another page. I have already prepared html file which would be inserted into page. I am using Spring Boot, Spring MVC, Thymeleaf

Navbar code:

<nav class="navbar navbar-custom" aria-label="Desktop Navigation">
    <div class="container">
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="link">Add User</a></li>
                <li><a href="link">Users List</a></li>
            </ul>
        </div>
    </div>
</nav>

Container code:

<div class="row">
  <div class="col-sm-12">
    <th:block th:if="(What I should insert here?)">
       <div th:insert="fragments/panelFragments :: addUserFragment" />
    </th:block>
    <th:block th:if="(What I should insert here?)">
       <div th:insert="fragments/panelFragments :: usersListFragment" />
    </th:block>
  </div>
</div>
sebaoka
  • 119
  • 12
  • 1
    After page rendering are you seeing these tags th:insert on view source of your page in browser? If not it means they have output the data on the server. Now on front end if you don't want to post back to refresh the page then only option is Javascript or jquery to update your views. – muasif80 Feb 24 '19 at 02:26
  • I am not exactly sure what you mean but I will try to explain. At the moment when user logs in it automaticaly inserts "fragments/panelFragments :: addUserFragment" (I have removed second insert) and it works fine. Now I would want to be able to change view to "usersListFragment" after pressing Users List from navbar. I am assuming that I will have to do it with js or jquery as you said, or AJAX. Can you give me any solution? Just wanted to add that these views will be really small, mostly containing only few tags. – sebaoka Feb 24 '19 at 03:28
  • I think that I have got simple solution which is really bad but probably would work. I would insert all fragments I need and set them to display: none, then with each button press their 'display' would change. – sebaoka Feb 24 '19 at 03:33
  • 1
    You can send ajax call to server. Get the json back. Create the markup in a function using jquery. Replace the html markup. Trigger ajax call on button click. Then on success call the markup builder function. And then replace the markup on page from the newly built markup – muasif80 Feb 24 '19 at 05:20
  • @sebaoka what muasif80 suggests is the proper way of handling the case. There are tons of examples about what you want to do – Ahmet Feb 24 '19 at 10:03
  • I used method from this post https://stackoverflow.com/a/36255513/7259312 Called HTML - Switch using radio – sebaoka Feb 27 '19 at 21:37

0 Answers0