Comment appeler bootstrap modal de la classe de contrôleur MVC

Question

dans ma page jsp Je dois transmettre la date de début et la date d'expiration dans la classe de contrôleur. Puis en utilisant ces dates j'ai filtré les données dans la classe Impl. dans le contrôleur aussi je dois montrer que les données dans un modal bootstrap

ceci est ma forme jsp en page après cliquez sur le bouton ceux Date goto la classe contrôleur

<table id="default-datatable" data-plugin="DataTable" 
                   class="table table-striped" cellspacing="0" 
                   width="100%"> 
                   <thead> 
                    <tr> 
                     <th>Season</th> 
                     <th>Start date</th> 
                     <th>End date</th> 
                     <th>Activate Season</th> 

                    </tr> 
                   </thead> 

                   <tbody> 
                   <c:forEach var="element" items="${seasons}"> 
                   <tr> 
                   <form action="season.create" method="POST"> 




                      <td>${element.seasonName}</td> 
                      <td>${element.startDate}</td> 
                      <td>${element.endDate}</td> 

                      <%-- <td><a data-toggle="modal" 
                       data-id="${element.seasonId}" title="Add this item" 
                       class="open-AddBookDialog btn btn-info" 
                       href="#myModal">Select Offer</a></td> --%> 


                       <td> 
                       <input type="hidden" name="startDate" 
                        id="startDate" value="${element.startDate}"></input> 
                       <input type="hidden" name="expiryDate" 
                        id="expiryDate" value="${element.endDate}"></input><input type="submit" class="btn btn-primary" 
               style="width: 90%; margin-top: 10px;" 
              name="action" value="Add" onclick="showDiv()"></td> 

et ma méthode de classe de contrôleur montré en dessous

@RequestMapping(value = "/season.create", method = RequestMethod.POST) 
    public String createSeason(@ModelAttribute("Offer") Offer offer, BindingResult result,@RequestParam String action,@RequestParam("startDate") String startDate, 
    @RequestParam("expiryDate") String expiryDate, Map<String, Object> map, HttpServletRequest request, Model model) { 
     System.out.println("testing -----------"); 
     int merchantId = 11; 
     switch (action.toLowerCase()) { 
     case "add": 
      offerservice.getAlloffers(merchantId,startDate,expiryDate); 
      System.out.println("inside season.create test strat date "+startDate+"enddate"+expiryDate); 
      System.out.println("exDate"+expiryDate); 
     //map.put("offerFilterd", offerservice.getAlloffers(merchantId)); 
      //map.put("offers", offerservice.getAlloffers(merchantId)); 
      map.put("offers", offerservice.getAlloffers(merchantId,startDate,expiryDate)); 

      map.put("seasons", offerservice.getAllSeasons(merchantId)); 
      map.put("Offer", new Offer()); 
      map.put("SeasonTypes", new SeasonTypes()); 

      map.put("editSingleImage", false); 
      map.put("imageGalary", false); 
      map.put("video", false); 

      break; 
     case "edit": 

      break; 
     case "delete": 

      break; 
     case "search": 

      break; 
     } 

     //map.put("offers", offerservice.getAlloffers(merchantId)); 
     map.put("offers", offerservice.getAlloffers(merchantId,startDate,expiryDate)); 
     map.put("seasons", offerservice.getAllSeasons(merchantId)); 
     map.put("Offer", new Offer()); 


     map.put("editSingleImage", false); 
     map.put("imageGalary", false); 
     map.put("video", false); 

     return "create-offer"; 
    } 

Ceci est mon modal boostrap qui inclut dans la page jsp.

<div id="myModal" class="modal fade" role="dialog" style="display:none;"> 
      <div class="modal-dialog modal-lg"> 

       <!-- Modal content--> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal">&times;</button> 
         <h4 class="modal-title">Select Offer</h4> 
        </div> 
        <div class="modal-body"> 

         <div class="table-responsive"> 
          <table id="default-datatable" data-plugin="DataTable" 
           class="table table-striped" cellspacing="0" width="100%"> 
          <p>form has submitted</p> 
           <thead> 
            <tr> 

             <th>Offer Heading</th> 
             <th>Offer Description</th> 
             <th>Issue Date</th> 
             <th>Expiration date</th> 
             <th>Offer Discount </th> 
             <th>Offer Price </th> 
             <th>Allocated Points </th> 
             <th>OfferClaim LImit</th> 
            </tr> 
           </thead> 

           <tbody> 

            <c:forEach var="element" items="${offers}"> 
              <form:form action="offer.bind" method="POST" commandName="SeasonTypes" id="formID"> 
          <tr> 

           <form:hidden path="seasonId" id="bookId" class="form-control normtxtin"/> 
          <%-- <td><form:input path="offerId" name="offerid" value="${element.offerid}" class="form-control normtxtin"/></td> --%> 

           <td>${element.offerSubheading}</td> 
           <td>${element.offerDescription}</td>  
           <td>${element.issueDateTime}</td> 
           <td>${element.expiryDate}</td> 
           <td>${element.offerDiscount}</td> 
           <td>${element.offerPrice}</td> 
           <td>${element.pointsAllocated}</td> 
           <td>${element.offerClaimLimit}</td> 
           <td><input type="hidden" id="offerId" name="offerid" type="text" value="${element.offerid}"/></td> 
           <td><button type="submit" class="btn btn-primary" style="width:100%;font-size:16px;padding:10px;" name="action" value="Add">Select Offer</button></td> 
          </tr> 
         </form:form> 
            </c:forEach> 
           </tbody> 
          </table> 
         </div> 
        </div> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        </div> 
       </div> 

      </div> 
     </div> 
</div> 

et ceci est mon code java script

<script> function showDiv() {  $('#myModal').modal('show') } 
</script> 

voici mon DAOIMPL methord

public List <Offer> getAlloffers(int merchantId,String sDate,String ExDate){ 
     System.out.println("sDate"+sDate+ "EndDate"+ExDate); 
     Long merchantIdLng = (long) merchantId; 
     List<Offer> offers= sessionfactory.openSession().createQuery("From Offer where merchant ="+merchantIdLng+"and issueDateTime BETWEEN '"+sDate+"' AND'"+ ExDate+"'").list(); 

     return offers; 

    } 

mais après bouton cliquez dessus ne montre pas le modal bootstrap. Si quelqu'un peut dire Pourquoi ma dose de code ne fonctionne pas. Je dois passer la date et filtrer les données et montrer dans un modal quand le bouton clique

Answer 1

voici le même code que vous avez utilisé. Sauf que j'ajouté bootstrap et jquery:

function showDiv(){ 
 
$('#myModal').modal(); 
 

 
} 
 

 

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

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<input type="submit" class="btn btn-primary" id="showDivBtn" 
 
style="width: 90%; margin-top: 10px;" name="action" value="Add" onclick="showDiv()"> 
 
               
 
<div id="myModal" class="modal fade" role="dialog" style="display:none;"> 
 
      <div class="modal-dialog modal-lg"> 
 
<!- your modal contain -!> 
 
     </div> 
 
</div>