How open Modal Jsp Page in Spring MVC-CodePudding

I am using Spring Mvc and Booststrap in a web application and I would like to display the editEmployer.jsp page as a Popup. Below is the code:

Page Index.jsp

<html>
<head>
<script type="text/javascript">

$(document).ready(function() {

$.ajax({
    "url": "/employeesmanagement/api/employees/listEmplyees'",
    "type": "GET",
    "datatype": 'json',
    "success": function (data) {
        $('#employeesTable').DataTable({
            data: data,  
            columns: [
                {
                    title : 'id',
                    data : 'id'
                }, {
                    title : 'name',
                    data : 'name'
                },
{  
                        "render": function (data, type, full, meta)  
                        { return '<a  role="button" href="/editEmployer/'   data.id  '">Edit</a>'; }  
                    }
            ]
        });
    }
});

});

</script>
</head>
<body>

<table id="employeesTable" style="width: 100%"></table>

</body>
</html>

Controller

@Controller
@Transactional
@EnableWebMvc
public class EmployerController {

   @RequestMapping("/editEmployer")
   public String editEmployer(Model model, @RequestParam("id") String id) {
       Employer employer = new Employer();
       Repository repository = new Repository();
       if (id != null) {
           employer = repository.getEmployer(id);
       }

       model.addAttribute("employerModel", employer);
       return "employerForm";
   }

}

Employer page

<html>
<body>

   <form:form action="saveEmployer method="POST" modelAttribute="employerModel">

       <form:hidden path="id" />

       <table>
           <tr>
               <td>Name</td>
               <td><form:input path="name" /></td>
               <td><form:errors path="name"></td>      
           </tr>  
           <tr>
               <td>Email</td>
               <td><form:input path="email" /></td>
           </tr>
       </table>
   </form:form>

</body>
</html>

I know we can do it with Boostrap, but this method requires to put the code of the page editEmployer.jsp in the same page Index.jsp .How can we open the editEmpoloyer.jsp page like a Popup knowing that it is in a separate page than the index.jsp page ?

Thanks for help.

CodePudding user response：

You can add style="display: none;" to popupPageDiv and can show hide using javascript/jquery.

<div id="popupPageDiv" style="display: none;">
    <jsp:include page="popup.jsp"/>
</div>

CodePudding user response：

I found the answer, despite there are no specific examples that address this kind of need for Spring MVC. So just call the action of the controller with Ajax as well as the display of the response in a Bootsrap modal Div .

Ajax call of the action controller

<script type="text/javascript">

function editEmploer(id)
{
    
   jQuery.ajax({
        type: 'GET',
        url: "/CallOffice/editEmployer",
        data : {id:id},
        contentType: "application/json",
          success: function (response, status, xhr) {
              $('#editEmployerModalContainer').html(response);
              $('#editEmployerModalDiv').modal('show');
            
          },
          error: function (response) {
              alert(response.responseText);
          }
    });  
 
}

</script>

Bootstrap modal div

<!-- Modal -->
<div  id="editEmployerModalDiv" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div >
    <div >
      <div >
        <h5  id="editEmployerLabel">Modal title</h5>
        <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div  id='editEmployerModalContainer'>
        ...
      </div>
      <div >
        <button type="button"  data-bs-dismiss="modal">Close</button>
        <button type="button" >Save</button>
      </div>
    </div>
  </div>
</div>

Hope this helps anyone who is having the same issue.