how to turn this spring boot thyme-leaf code into Ajax - ajax

Question

I Have a comment and post system and I want To turn it into ajax without using thymeleaf fragmentation. How to do it i cannot figure out I do not want to refresh the page each time i make a post or comment .
Controller :
#Controller
public class DashboardController {
private Post post;
private User user;
#Autowired
private PostRepository postRepository;
#Autowired
private UserRepository userRepository;
#Autowired
CommentRepository commentRepository;
#RequestMapping(value = "/dashboard", method = RequestMethod.GET)
public String returnPosts(Model model) {
Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
String currentPrincipalName = authentication.getName(); //holding login user details
model.addAttribute("firstName", userRepository.findByEmail(currentPrincipalName).getFirstName());
model.addAttribute("newPost", new Post());
model.addAttribute("newComment", new Comment());
model.addAttribute("posts", postRepository.findAllByOrderByDateDesc());
model.addAttribute("comments", commentRepository.findAll());
return "main";
}
#RequestMapping(value = "/dashboard/posts", method = RequestMethod.POST)
public String addPost(Model model, #ModelAttribute Post post, #ModelAttribute User user) {
model.addAttribute("newPost", post);
creatPost(post);
System.out.println(post.getId());
return "redirect:/dashboard";
}
#RequestMapping(value = "/dashboard/comments", method = RequestMethod.POST)
public String addComment( Model model, #ModelAttribute Comment comment,
#ModelAttribute User user) {
model.addAttribute("newComment", comment);
// model.addAttribute("posts", post);
creatComment(comment.getPostId(), comment);
System.out.println(comment.toString());
//System.out.println(post.getId());
// System.out.println(comment.getPostId());
return "redirect:/dashboard";
}
private Comment creatComment(String id, Comment comment) {
Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
String currentPrincipalName = authentication.getName();
comment.setDate(new Date());
comment.setAuthor(userRepository.findByEmail(currentPrincipalName).getFirstName()
+ " " + userRepository.findByEmail(currentPrincipalName).getLastName());
comment.setPostId(id);
return commentRepository.save(comment);
}
private Post creatPost(Post post) {
Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
String currentPrincipalName = authentication.getName(); //holding login user details
post.setAuthor(userRepository.findByEmail(currentPrincipalName).getFirstName()
+ " " + userRepository.findByEmail(currentPrincipalName).getLastName());
post.setDate(new Date());
return postRepository.save(post);
}
}
Thymeleaf forms :
<div id="content" class="yellow col-xs-12">
<form class="col-xs-12" role="form" action="/dashboard/posts"
th:action="#{/dashboard/posts}" th:object="${newPost}" method="post">
<div class="form-group col-xs-12">
<textarea class="form col-xs-6" rows="2" id="full" placeholder="share anything....."
th:field="*{content}" style="font-size: 20px;" required="required"></textarea>
<div class="menu1 col-xs-12">
<hr/>
<ul class="text-center col-xs-12">
<a href="#">
<li>
<button type="submit" class="sendpost btn btn-success">Send</button>
</li>
<li class="xs-12 "><i class="fa fa-flash fa-lg"></i>Tasks</li>
<li class="xs-12"><i class="fa fa-paperclip fa-lg"></i>files</li>
<li class="xs-12"><i class="fa fa-calendar fa-lg"></i> calendar</li>
<li class="xs-12"><i class="fa fa-search fa-lg"></i>stying</li>
</a>
</ul>
</div>
</div>
</form>
<div>
<div th:each="post : ${posts}" style="border:2px solid #CCCCCC ; margin-bottom: 50px" id="post-div"
class="post-group col-xs-12">
<div class="imag col-xs-2">
<!--<input type="hidden" th:field="*{post.id}" disabled="disabled"/>-->
<img style="width: 50px;" src="images/1.png" class="img-circle img-responsive" alt=""/>
</div>
<div class=" col-xs-10">
<h4 style="line-height: .4;"><p class="name" th:text="*{post.author}">
</p>
<small style="color: #337ab7" th:text="*{post.date}"></small>
</h4>
<br/>
<p style="font-size: 20px" id="post-p" class="desc" th:text="*{post.content}"></p><br/>
<div class="footer ignore-zoom">
<a class="comment" onclick="showDiv1()"><i class="aa fa fa-comment"></i>
<span class="lin">0</span></a>
<a onclick="showDiv2()" href="#">
<i id="like" class="aa fa fa-heart active"></i>
<span style="display:none;" id="like-1" class="lin">1</span></a>
<a class="aa dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"><i
class="fa fa-pencil"></i> </a>
</div>
<div th:each="comment : ${comments}" id="my-comment">
<div th:if="${post.id == comment.postId}">
<hr/>
<br/>
<img class="img-circle img-responsive" src="images/1.png"
style="margin-right:5%; width: 50px; display: inline-flex; color:#080602;"/>
<div style="line-height:.8">
<label th:text="*{comment.author}"> </label><br/>
<small th:text="*{comment.date}" style=" color: #337ab7 ; margin-left:16%;">time of
comment
</small>
</div>
<br/>
<p style="font-size: 16px;" id="-comment" th:text="*{comment.comment}"></p>
<div class="footer footer1 ignore-zoom">
<a onclick="showDiv4()" href="#">
<i id="like1" class="aa fa fa-heart active"></i>
<span style="display:none;" id="like-2" class="lin">1</span></a>
<a class="aa dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"><i
class="fa fa-pencil"></i> </a>
</div>
</div>
</div>
<form role="form" action="/dashboard/comments"
th:action="#{/dashboard/comments}" th:object="${newComment}" method="post">
<input type="hidden" name="postId" th:value="${post.id}"/>
<div id="comment-div" class="form-group col-xs-12">
<textarea th:field="*{comment}" class="form col-xs-6" rows="2" id="full2"
placeholder="Your Comment....." required="required"></textarea>
<div class="menu1 col-xs-12">
<hr/>
<ul class="text-center col-xs-12">
<a href="#">
<li onclick="showDiv()">
<button type="submit" class="btn btn-info">Send</button>
</li>
<li class="xs-12 "><i class="fa fa-flash fa-lg"></i></li>
<li class="xs-12"><i class="fa fa-paperclip fa-lg"></i></li>
<li class="xs-12"><i class="fa fa-calendar fa-lg"></i></li>
<li class="xs-12"><i class="fa fa-search fa-lg"></i></li>
</a>
</ul>
</div>
</div>
</form>
</div>
</div>
</div>
</div>

Answer 1

You can have a look at the tutorial http://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#ajax-fragments
And the content is as below:
Ajax fragments
WebFlow allows the specification of fragments to be rendered via AJAX with tags, like this:
<view-state id="detail" view="bookingDetail">
<transition on="updateData">
<render fragments="hoteldata"/>
</transition>
</view-state>
These fragments (hoteldata, in this case) can be a comma-separated list of fragments specified at the markup with th:fragment :
<div id="data" th:fragment="hoteldata">
This is a content to be changed
</div>
Always remember that the specified fragments must have an id attribute, so that the Spring JavaScript libraries running on the browser are capable of substituting the markup.
tags can also be specified using DOM selectors:
<view-state id="detail" view="bookingDetail">
<transition on="updateData">
<render fragments="[//div[#id='data']]"/>
</transition>
</view-state>
...and this will mean no th:fragment is needed:
<div id="data">
This is a content to be changed
</div>
As for the code that triggers the updateData transition, it looks like:
<script type="text/javascript" th:src="#{/resources/dojo/dojo.js}"></script>
<script type="text/javascript" th:src="#{/resources/spring/Spring.js}"></script>
<script type="text/javascript" th:src="#{/resources/spring/Spring-Dojo.js}"></script>
...
<form id="triggerform" method="post" action="">
<input type="submit" id="doUpdate" name="_eventId_updateData" value="Update now!" />
</form>
<script type="text/javascript">
Spring.addDecoration(
new Spring.AjaxEventDecoration({formId:'triggerform',elementId:'doUpdate',event:'onclick'}));
</script>