如何從另一個JSP頁面調用一個JSP頁面調用中的bootstrap模式？

-1

我有一個包含Bootstrap模態的JSP頁面，頁面如下。如何從另一個JSP頁面調用一個JSP頁面調用中的bootstrap模式？

<%@page import="cpd.webAdmin.Coupons"%> 
<%@ page contentType="text/html; charset=iso-8859-1" language="java"%> 
<%@ page import="java.util.*,cpd.site.*, cpd.webAdmin.Coupons "%> 
<html> 
<head> 

    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 

<link rel="stylesheet" href="/test.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<style type="text/css"> 

.modal-body { 
    max-height: 420px; 
    overflow-y: auto; 
} 

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


</script> 


     <!-- Modal --> 
    <body> 
     <div class="modal hide fade" id="myModal" role="dialog" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Coupon Details</h4> 
      </div> 
      <div class="modal-body" id="couponListBody"> 
       <table class="table table-striped" id="CpnTable"> 
        <thead> 
         <tr> 
          <th data-field="state" align="center" data-checkbox="true" data-align="center" text-nowrap>Select</th> 
          <th data-field="coupon_id" align="center" data-align="center" data-sortable="true" text-nowrap>Coupon Id</th> 
          <th data-field="coupon_desc" align="center" data-align="center" data-sortable="true" text-nowrap>Coupon Description</th> 
          <th data-field="coupon_number" align="center" data-align="center" data-sortable="true" text-nowrap>Coupon Number</th> 
         </tr> 
        </thead> 

        <tbody> 
          <%       
           ArrayList<Coupons> cpns=(ArrayList)request.getAttribute("coupons"); 
           Iterator it=cpns.iterator(); 
           while(it.hasNext()) 
           { 
            Coupons c=(Coupons)it.next(); 
          %> 

         <tr> 
          <td class="vcenter" width="10%" align="center"><input type="checkbox" id="blahA" value="1"/></td> 
          <td width="20%" align="center"><%=c.couponId%></td> 
          <td width="40%" align="center"><%=c.couponDesc%></td> 
          <td width="20%" align="center"><%=c.couponNumber%></td> 

         </tr> 
         <% 
         } 
         %> 

        </tbody> 

       </table> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-primary" data-dismiss="modal" id="close">Close</button> 
      </div> 
     </div> 
     </div> 
     </div> 
    </body> 
</html>

和父母的jsp有一個按鈕來調用模態，主jsp在下面。

<%@page import="cpd.webAdmin.Coupons"%> 
<%@ page contentType="text/html; charset=iso-8859-1" language="java"%> 
<%@ page import="java.util.*,cpd.site.* , cpd.webAdmin.Coupons " %> 
<jsp:useBean id="adminObj" class="cpd.webAdmin.Admin" scope = "request"></jsp:useBean> 
<html> 
<head> 
<link rel="stylesheet" href="/test.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>Welcome to WebAdminPage</title> 
</head> 
<% 
    SiteInfoVO si = Site.getSiteInfo(); 
    String ctx = si.webContext; 
%> 
<script> 

    function getCouponDetails(){ 

     $('#myModal').modal('show'); 
     imageDetailsForm.method = "GET"; 
     var url = "/<%=si.webContext%>/servlet/cpd.webAdmin.WebAdminServlet"; 
     imageDetailsForm.action = url; 
     document.getElementById("imageDetailsForm").submit(); 
    } 

</script> 
    <body bgcolor="DDE3E3" class="container"> 
    <div class="well" > <h1 align="center">OnDemand Web Admin Page</h1> </div> 


     <br> 
     <FORM NAME="imageDetailsForm" > 
      <div class="well">   
      <br> 
      <div id="searchDtlSection" name="searchDtlSection" class="form-group"> 
       <div class="col-md-7"> 
        <div class="form-group row"> 
         <label for="image_id" class="col-md-2 control-label pull-left text-nowrap">Image Id:</label> 
         <div class="col-md-5 "> 
          <input type="text" class="form-control" id="image_id" name="imageID" placeholder="Image Id""> 
         </div> 
         <div class="col-md-2 " > 
           <input type="text" class="form-control" id="couponidVal" name="couponidVal" placeholder="Coupon Id" value='<jsp:getProperty property="coupon_id" name="adminObj"/>'> 
          </div> 
          <div class="col-md-1 ">        
           <button type="submit" class="btn btn-primary form-control" data-toggle="modal" data-target="#myModal" id = "searchCpnBtn" name="searchCpnBtn" onclick="getCouponDetails()">...</button> 
          </div> 
        </div> 
       </div> 
      </div>  
     </div> 
    </FORM> 
    </body> 
</html>

如何打開模式這是另一個JSP，當我打電話getCouponDetails（）在主jsp頁面功能。

來源

2017-07-22 Ravikanth

是您的頁面，其中包含bootstrap模態僅用於模態??? 如果你的答案是肯定的然後嘗試加入這個jQuery到該頁面

$(document).ready(function(){ 
$('#myModal').modal('show'); 
});

來源

2017-07-23 03:22:47

哪個網頁上我需要使用此行代碼？主頁或只有模態的其他頁面？ – Ravikanth

僅包含模態的文件 –

我在getCouponDetails（）函數中添加了上面的代碼，但它不工作:( – Ravikanth

如何從另一個JSP頁面調用一個JSP頁面調用中的bootstrap模式？

回答

相關問題