Java – How do forms remain on the same page after submitting thymeleaf and Spring boot?

Hi all, I have a question about what is mentioned in the title. I found something in javascript but it doesn’t work for me because I’m using thymleaf and spring boot. Or I just don’t know how to adapt it to my situation.

thymeleaf code:

<form th:action="@{/tweets/tweet}" th:object="${tweet}" method="post">
  <div class="row">
    <div class="col">
  <input type="text" th:field="*{content}" class="form-control"  placeholder="What's happening? Tell us!" >
    </div>
    <div class="col">
      <input class="form-control" type="submit" value="Submit" />
    </div>
  </div>
</form>

Controller class:

@Controller
@RequestMapping("tweets")
@Slf4j
public class TweetController {

private TweetService tweetService;

public TweetController(TweetService tweetService) {
this.tweetService = tweetService;
}

@PostMapping("/tweet")
@ResponseStatus(CREATED)
public Tweet tweet(@Valid @ModelAttribute("tweet")  Tweet tweet, Principal 
principal, BindingResult result) {
if(result.hasErrors()){

do somethign
}

if (!tweet.getContent().equals(null) && !tweet.getContent().equals("") && !tweet.getContent().isEmpty()) {
  tweetService.createTweet(tweet.getContent(), principal);
}

}

@GetMapping("/")
 public String goToIndex(Model model){
   model.addAttribute("tweet",new Tweet());
return "overview";
}

I have server.context-path=/api

I have one more question on this topic. When I want to redirect it to another page, I get a blank page. Not an error, not an exception, just a blank page. Does it help? I’m a newbie.

Yes, this can use AJAX. However, I recommend using jQuery to do this. So, if you want to submit the form and stay on the same page, you can do the following.

HTML

<form id="tweet-form" th:action="@{/tweets/tweet}" th:object="${tweet}" method="post">
  <div class="row">
    <div class="col">
  <input type="text" th:field="*{content}" class="form-control"  placeholder="What's happening? Tell us!" >
    </div>
    <div class="col">
      <input id="submit-form" class="form-control" type="button" value="Submit" />
    </div>
  </div>
</form>

Variations:

• An ID is added to the form.
• An ID is added for your input.
• Change the submission input type for the button.

jQuery

$('#submit-form').on('click', function() {
   var form = $('#tweet-form');
   $.ajax({
      url: form.attr('action'),
      data: form.serialize(),
      type: post,
      success: function(result) {
           Do something with the response.
           Might want to check for errors here.
      }, error: function(error) {
           Here you can handle exceptions thrown by the server or your controller.
      }
   })
}

Controller

@PostMapping("/tweet")
@ResponseStatus(CREATED)
public Tweet tweet(@Valid @ModelAttribute("tweet")  Tweet tweet, Principal 
principal, BindingResult result) {
    if(result.hasErrors()){
         Throw an exception or send a null Tweet.
    }
    if (!tweet.getContent().equals(null) && !tweet.getContent().equals("") && !tweet.getContent().isEmpty()) {
        tweetService.createTweet(tweet.getContent(), principal);
    }
     You are returning a Tweet, so you must return something. 
    return tweet;
}

Your Controller remains almost the same. Just remember to return something.