Spring MVC 4 and Thymeleaf - Prevent page refresh

Question

I promise, I have Googled the heck out of this.

I have a Spring MVC 4 app that uses Thymeleaf to collect form data and put it into a database. Works very well, except that I want my application to leave the user on the form page after they hit the submit button, so that they can keep editing.

Each time they click submit, the Controller is called and returns the view, which causes the page to refresh. I would like to eliminate the refresh and also add an alert to confirm the save.

So I started to work on converting the form submission to AJAX and realized that this would defeat the purpose of using Thymeleaf. Thymeleaf already maps the form fields to the backing bean and does so well, so why replace that mechanism?

So, is there a way to have the Spring MVC controller process the submit request but not return a new instance of the view?

I tried not returning the view but this caused an error because nothing was mapped to the model attribute. I tried using @ResponseBody and returning data instead but this caused the JSON to be rendered in the web page, plus I could not figure out how to get that data bask and do something with it.

I also tried to find a way to hook into the submit button to try calling javascript preventDefault() but didn't have any luck there.

Thanks very much for your suggestions...

Here is my controller code, very straightforward:

@SessionAttributes("adminFormAjax")
@Controller
public class TestController 
{
    @Autowired
    private AdminDataRepository rep;

    @RequestMapping(value="/admin_ajax", method=RequestMethod.GET)
    public String adminFormAjax(Model model) 
    {
        AdminData ad = rep.findById(1L);

        // If there is no configuration record, create one and assign the primary key as 1.
        if(ad == null)
        {
            ad = new AdminData();
            ad.setId(1L);
        }

        model.addAttribute("adminFormAjax", ad);
        return "adminFormAjax";
    }

    @RequestMapping(value="/admin_ajax", method=RequestMethod.POST)
    public @ResponseBody AdminData adminSubmit(@ModelAttribute("adminFormAjax") AdminData ad, Model model) 
    {
        // rep.save(ad);
        model.addAttribute("adminFormAjax", ad);
        return ad;
    }

}

Answer 1

So thymeleaf will render the page as a HTML and sends it to client to display, if you want to be able to submit form data to controller without changing pages you need to incorporate Javascript.

You definitely need to use javascript/ajax to post the form contents and keep the page as it is.

If you want to update just the section that contains the form for example what you can do is make a call to a controller method that returns a fragment and display the fragment containing the relevant form information.

Answer 2

Hope this can helps the future readers. We can use th:replace to avoid the javascript/ajax. See example below.

@GetMapping("/admin-reload")
public String reloadElementDiv(Model model) {       
    AdminData ad = rep.findById(1L);

    // If there is no configuration record, create one and assign the primary key as 1.
    if(ad == null)
    {
        ad = new AdminData();
        ad.setId(1L);
    }

    model.addAttribute("adminAttrib", ad);

    return "adminForm";
}

Now, in the parent html (like home.html) you use the following. *This means replace this tag with the element with id="admin-div" from admin.html

<div th:replace="~{admin :: #admin-div}">
</div>

Then in a separate html file, place the fragment html code. Wherein in this example its admin.html.

<div id="admin-div">
   <span th:text="${ad.id}"></span>
</div>

You can put a link/button to trigger to refresh the div element by using a th:href

<a href="" th:href="@{/admin-reload}"><span>Edit</span></a>

Answer 3

我使用rest控制器和ajax来处理这个问题