Preventing page refresh - Thymeleaf & Spring MVC

classic Classic list List threaded Threaded
2 messages Options
Jim
Reply | Threaded
Open this post in threaded view
|

Preventing page refresh - Thymeleaf & Spring MVC

Jim
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;
    }

}

Reply | Threaded
Open this post in threaded view
|

Re: Preventing page refresh - Thymeleaf & Spring MVC

trymafat@yahoo.com
Hi,
I am having (may be similar) an issue refreshing page.

My App uses : Spring Boot, thymeleaf (2.x) and ajax.

I have a menu option/item that opens a webpage that has "PersonObj" as command object (some data retrieval happens). So, in controller code , I am putting the "PersonObj" (basically a POJO) in the model  and then webpage uses it to display the data. See the PersonObj below.

Page displays all information with the list of businesses that a person has.
I also have a button on the same page that adds a new business location using bootstrap modal. This modal has the save button that saves the data successfully using AJAX, but I cannot refresh the page where it displays the listing of business properties.

I have the ajax call that retrieves the list  (as Array) but page does not refresh.
Baiscally I need to  update "${personObj.listOfBusiness}".

How can I do that, please help.
Any help appreciated.
Thanks in advance.

The DIV that does looping is :
  <div id="iteratorDiv" th:each="cntr, rStats : ${personObj.listOfBusiness}" >
     ...
      labels and inputs tags here
    .....
  </div>


PersonObj
{
name,
curr_address,
List<Business> listOfBusiness
}

AJAX portion : In my success portion of Ajax call,  I have :
....
success: function(data) {
  console.log(data.listOfBusiness);  //displays the data as array
  $('#iteratorDiv').html(data.listOfBusiness);
.....