AJAX and ThymeLeaf For Modal Dialogs

The final part of the basic phonebook application is being able to click on a person and see details about them. For this part I’ve decided for now not to open a new page but to open the persons details in a modal dialog box on the current screen just so I can demo how to do ajax calls using Spring and Thymeleaf.

First of all I need a PersonController which will populate the modelmap with the selected persons attributes and then return a thymeleaf page.

This controller is very simple and very like all the other controllers it will respond on the /person/{Id} path and populate the modelmap with details of the selected person. I’m also adding in attributes for the person’s manager and their co-workers. The most important part however is the returned string at the end. In the other controllers I just returned a simple string that would match up to the thymeleaf html page that I wanted to render. This time, however, I have added a fragment name separated from the page name by a double colon. When this controller is called only a spamm portion of the modal/person.html page will be returned to the browser. Here is the corresponding fragment…

To get the modal dialog to display I have added an onClick event to the table row which will run a function called openPersonModal and pass in that rows person id number.

The function called the Spring MVC controller and is returned just the fragment of html code from Thymeleaf. I then pop this in to an empty div called personModalHolder which I had also added to the page and then I call the bootstrap function to show the modal.

At this stage we have a very simple, read only, phonebook using our auto generated test data. For the next few posts I’m going to take a break from writing code and I’m going to show how to create a pipeline in VSTS and Rancher and Docker to auto build and deploy our application. After that we will come back to the app to add some additional features to allow for editing and adding new people.