Spring MVC中如何打开Modal Jsp页面

发布于 2025-01-10 07:31:44 字数 2639 浏览 0 评论 0原文

我在 Web 应用程序中使用 Spring Mvc 和 Booststrap，我想将 editEmployer.jsp 页面显示为 Popup< /强>。下面是代码：

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 class="btn btn-xs btn-default" 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>

我知道我们可以使用 Boostrap 做到这一点，但是该方法需要将editEmployer.jsp页面的代码放在同一个页面Index.jsp中。如何打开editEmployer.jsp像弹出窗口一样的页面知道它位于与 index.jsp 页面不同的单独页面中？

感谢您的帮助。

原文

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 class="btn btn-xs btn-default" 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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小女人ら 2025-01-17 07:31:44

您可以将 style="display: none;" 添加到 popupPageDiv 并可以使用 javascript/jquery 显示隐藏。

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

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>

回复收藏 0 原文

云胡 2025-01-17 07:31:44

我找到了答案，尽管没有具体的例子来解决 Spring MVC 的这种需求。因此，只需使用 Ajax 调用控制器的操作以及 Bootsrap 模态 Div 中的响应显示即可。

动作控制器的 Ajax 调用

<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 class="modal fade" id="editEmployerModalDiv" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editEmployerLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id='editEmployerModalContainer'>
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

希望这可以帮助任何遇到相同问题的人。

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 class="modal fade" id="editEmployerModalDiv" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editEmployerLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id='editEmployerModalContainer'>
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

Hope this helps anyone who is having the same issue.

回复收藏 0 原文

~没有更多了~