How to add popup window on Spring + Thymeleaf

java spring spring-boot spring-mvc thymeleaf

11,661

Solution 1

For modal window you should add the JavaScript code to your template as described here Thymeleaf documentation 13.4 Textual parser-level comment blocks: removing code

Simple implementation of the modal window in js is:

<!DOCTYPE html> 
<html> <head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<style> body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */ 
.modal {   
    display: none; 
/* Hidden by default */   
    position: fixed; 
/* Stay in place */   
    z-index: 1; 
/* Sit on top */
   padding-top: 100px;
/* Location of the box */
    left: 0;   top: 0;   width: 100%; 
/* Full width */   
    height: 100%; 
/* Full height */
    overflow: auto; 
/* Enable scroll if needed */
    background-color: rgb(0,0,0); 
/* Fallback color */
    background-color: rgba(0,0,0,0.4); 
/* Black w/ opacity */ 
}

/* Modal Content */ 
.modal-content {   
    background-color: #fefefe;   
    margin: auto;   
    padding: 20px;   
    border: 1px solid #888;   
    width: 80%; 
}

/* The Close Button */ 
.close {   
    color: #aaaaaa;   
    float: right;   
    font-size: 28px;   
    font-weight: bold; 
}

.close:hover, .close:focus {   
    color: #000;   
    text-decoration: none;   
    cursor: pointer; 
} 
</style> 
</head> 

<body>
<h2>Modal Example</h2>

<!-- Trigger/Open The Modal --> 
<button id="myBtn">Open Modal</button>

<!-- The Modal --> 
<div id="myModal" class="modal">

<!-- Modal content -->   
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>Some text in the Modal..</p>   
    </div>
</div>

<script> 
// Get the modal 
var modal = document.getElementById("myModal");
// Get the button that opens the modal 
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal  
btn.onclick = function() {   modal.style.display = "block"; }

// When the user clicks on <span> (x), close the modal 
span.onclick = function() {   modal.style.display = "none"; }

// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) {   
    if (event.target == modal) {
        modal.style.display = "none";   
} } 
</script>
</body> </html>

Solution 2

I've found a textual solution here: Spring MVC: Open link in new browser window in handler method

And a tutorial explaining Javascripts window.open function https://www.youtube.com/watch?v=G83c-ZqZ7pk

Answering the question on how to open a new browser-window (popup) when clicked on an element or link.

11,661

kkshinichi

Updated on June 04, 2022

Comments

kkshinichi almost 2 years

I do have some problems on how will I implement a pop-up on a link. I'm currently using Spring-boot with Thymeleaf

I'm planning to implement the pop up window upon pressing the "Edit" button. Currently it shows on a new tab.

Here's the HTML:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="template::header">
</head>
<body>
    <div class="d-flex" id="wrapper">
        <div th:insert="template::sidebar">  
        </div>
        <div id="page-content-wrapper">
            <nav th:insert="template::navbar">
            </nav>
            <div class="container-fluid">
                    <h1> Employee List </h1>
                    <a href="/admin/employees/new">Add new Employee</a><br/><br/>

                    <table border="1" cellpadding="10">
                        <thead>
                        <tr>
                            <th> Employee Name </th>
                            <th> Designation </th>
                            <th> Credentials </th>
                            <th> Department </th>
                            <th> Image </th>
                            <th> Image filename </th>
                            <th> Actions </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="employee: ${employees}">
                            <td th:text="${employee.name}"></td>
                            <td th:text="${employee.designation}"></td>
                            <td th:text="${employee.credentials}"></td>
                            <td th:text="${employee.departmentName == null} ? 'Empty' : ${employee.departmentName}"></td>
                            <td><img th:src="@{'/uploads/' + ${employee.image_fn}}"/></td>
                            <td th:text="${employee.image_fn}"></td>
                            <td>
                                <a th:href="@{'/admin/employees/edit/' + ${employee.name}}" th:target="_blank"><button type="button" class="btn btn-primary">Edit</button></a> <!--Edit Button must launch a pop up window, but is currently launching only on new tab-->
                                <!-- &nbsp;&nbsp;&nbsp; -->
                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#empDeleteConfirm">Delete</button>

                                <a th:href="@{'/admin/employees/imageUpload/' + ${employee.name}}">Upload Image</a>
                            </td>
                            <div class="modal fade" id="empDeleteConfirm" tabindex="-1" role="dialog" aria-labelledby="empDeleteConfirm" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                    <h5 class="modal-title" id="empDeleteConfirm">Are you sure?</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                    </div>
                                    <div class="modal-body">
                                    Do you want to delete this employee?
                                    </div>
                                    <div class="modal-footer">
                                        <a th:href="@{'/admin/employees/delete/' + ${employee.name}}"><button type="button" class="btn btn-primary">Delete</button></a>
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                    </div>
                                </div>
                                </div>
                            </div>
                        </tr>
                    </tbody>
                </table>

                <!-- Modal -->
            </div>
        </div>
    </div>
    <script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap.js}"></script>
</body>
</html>

Here's the window to be shown on a pop up window:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="template::header">
</head>
<body>
    <div class="d-flex" id="wrapper">
        <!-- <div th:insert="template::sidebar">  
        </div> -->
        <div id="page-content-wrapper">
            <!-- <nav th:insert="template::navbar">
            </nav> -->
            <div class="container-fluid" align="center">
                <h1> Edit Employee </h1>
                <form action="#" th:action="@{/admin/employees/update}" th:object="${employee}" method="post" th:fragment="empEdit">
                    <table border="0" cellpadding="10">
                        <td><input type="hidden" th:field="*{name}"/></td>
                        <td><input type="hidden" th:field="*{image_fn}"/></td>
                        <tr>
                            <td> Designation: </td>
                            <td><input type="text" th:field="*{designation}"/></td>
                        </tr>
                        <tr>
                            <td> Credentials: </td>
                            <td><input type="text" th:field="*{credentials}"/></td>
                        </tr>
                        <tr>
                            <select th:field="*{department}">
                                <option th:each="department: ${departments}" th:value="${department.name}" th:text="${department.description}"></option>
                            </select>
                        </tr>
                        <tr>
                            <td><button type="submit">Save</button></td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
    </div>
    <script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap.js}"></script>
</body>
</html>

Using these controller:


import com.ppt.contentmanagementsystem.dao.DepartmentDAO;
import com.ppt.contentmanagementsystem.dao.EmployeeDAO;
import com.ppt.contentmanagementsystem.model.Department;
import com.ppt.contentmanagementsystem.model.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.List;
import java.util.Optional;

@Controller
public class EmployeeVC {

    @Autowired
    EmployeeDAO employeeDAO;
    @Autowired
    DepartmentDAO departmentDAO;

    @GetMapping("/admin/employees")
    public String employeesHomePage(Model model){
        List<Employee> employees = employeeDAO.getAllEmployees();
        model.addAttribute("employees", employees);
        model.addAttribute("title", "Employees");

        return "employeeHome";
    }

    @GetMapping("/admin/employees/new")
    public String newEmployeePage(Model model){
        Employee employee = new Employee();
        List<Department> departments = departmentDAO.getAllDepartments();
        model.addAttribute("employee", employee);
        model.addAttribute("departments", departments);

        return "employeeNew";
    }

    @PostMapping("/admin/employees/new")
    public String addEmployeePage(@ModelAttribute("employee") Employee employee){
        employeeDAO.addEmployee(employee);
        return "redirect:/admin/employees";
    }

    @GetMapping("/admin/employees/edit/{id}")
    public String editEmployeePage(Model model, @PathVariable String id){
        Optional<Employee> eopt = employeeDAO.getEmployee(id);
        Employee employee = eopt.get();
        List<Department> departments = departmentDAO.getAllDepartments();
        model.addAttribute("employee", employee);
        model.addAttribute("departments", departments);
        model.addAttribute("title", "Employee Edit");

        return "employeeEdit";
    }

    @GetMapping("/admin/employees/imageUpload/{id}")
    public String uploadEmployeeImagePage(Model model, @PathVariable String id){
        Optional<Employee> eopt = employeeDAO.getEmployee(id);
        Employee employee = eopt.get();
        model.addAttribute("employee", employee);
        model.addAttribute("title", "Employee Image");

        return "employeeImage";
    }

    @PostMapping("/admin/employees/imageUpload")
    public String updateEmployeeImage(@ModelAttribute("employee") Employee employee, @RequestParam("imageFile") MultipartFile imageFile) throws IOException{
        employeeDAO.saveEmployeeImage(employee, imageFile);

        return "redirect:/admin/employees";
    }

    @PostMapping("/admin/employees/update")
    public String updateEmployeePage(@ModelAttribute("employee") Employee employee){
        employeeDAO.updateEmployee(employee);

        return "redirect:/admin/employees";
    }

    @GetMapping("/admin/employees/delete/{id}")
    public String deleteEmployeePage(@PathVariable String id){
        employeeDAO.deleteEmployee(id);

        return "redirect:/admin/employees";
    }
}

Ken Bekov over 4 years

If you mean to open new window on button click be careful. Browsers can block such a popup windows. It's better to show modal dialog. Fortunately you already use jquery and bootstrap. Both of them have ready to use modal dialogs.

kkshinichi over 4 years

I do plan to go for a modal at first, that as there'll be so much changes for the controllers, I'm planning for a pop up window (new browser window) instead of a modal/new tab.