Wie haben Sie mehrere verschiedene Bootstrap-Modale in einer JSP-Seite mit JSTL forEach?

Question

Ich versuche, den Inhalt im Bootstrap Modal in meiner JSP-Seite zu ändern. Aber alle Modalitäten zeigen den Inhalt des ersten Gegenstandes. In jeder Zeile zeigen die ersten beiden <td> unterschiedliche Inhalte, aber nur der Inhalt im Modal ist gleich.

Weiß jemand, was ist das Problem hier?

Mein Code:

<table> 
      <c:forEach var="item" items="${itemList}"> 
       <tr> 
        <td>${item.title}</td> 
        <td>${item.price}</td> 
        <td> 
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="viewDetailButton">Quick Shop</button> 
         <!-- Modal --> 
         <div class="modal fade" id="myModal" role="dialog"> 
         <div class="modal-dialog"> 

          <!-- Modal content--> 
          <div class="modal-content"> 
          <div class="modal-header"> 
           <button type="button" class="close" data-dismiss="modal">&times;</button> 
           <h4 class="modal-title">Modal Header</h4> 
          </div> 
          <div class="modal-body"> 
           <div class="img"> 
           <img height="150" width="150" src="${item.photoName}" /> 
           </div> 
           <div class="detail"> 
            <div class="row"> 
            Color: ${item.color} 
            </div> 
            <hr> 
            <div class="row"> 
            Price: ${item.price} 
            </div> 
            <div class="row"> 
            Size: ${item.size} 
            </div> 
            <%-- <div class="row"> 
            Product Description: ${item.details} 
            </div> --%> 
           </div> 
          </div> 
          <div class="modal-footer"> 
           <a href="#" class="btn btn-default" data-dismiss="modal">Add to bag</a> 
           <a href="#" class="btn btn-default" data-dismiss="modal">Add To WishList</a> 
          </div> 
          </div> 

         </div> 
         </div> 
        </td> 
       </tr> 
      </c:forEach> 
     </table> 

Answer 1

Jede Taste hat die gleiche data-target="#myModal". Das Zielmodal ist also das erste Modal mit id="myModal".

Sie varStatus Ihrer forEach Schleife verwenden können eindeutige IDs für Ihre Modalverben und Ziel sie in Ihre Tasten zu generieren:

<table> 
     <c:forEach var="item" items="${itemList}" varStatus="vs"> 
      <tr> 
       <td>${item.title}</td> 
       <td>${item.price}</td> 
       <td> 
       <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal${vs.index}" id="viewDetailButton${vs.index}">Quick Shop</button> 
        <!-- Modal --> 
        <div class="modal fade" id="myModal${vs.index}" role="dialog"> 
        <div class="modal-dialog"> 

         <!-- Modal content--> 
         <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal">&times;</button> 
          <h4 class="modal-title">Modal Header</h4> 
         </div> 
         <div class="modal-body"> 
          <div class="img"> 
          <img height="150" width="150" src="${item.photoName}" /> 
          </div> 
          <div class="detail"> 
           <div class="row"> 
           Color: ${item.color} 
           </div> 
           <hr> 
           <div class="row"> 
           Price: ${item.price} 
           </div> 
           <div class="row"> 
           Size: ${item.size} 
           </div> 
           <%-- <div class="row"> 
           Product Description: ${item.details} 
           </div> --%> 
          </div> 
         </div> 
         <div class="modal-footer"> 
          <a href="#" class="btn btn-default" data-dismiss="modal">Add to bag</a> 
          <a href="#" class="btn btn-default" data-dismiss="modal">Add To WishList</a> 
         </div> 
         </div> 

        </div> 
        </div> 
       </td> 
      </tr> 
     </c:forEach> 
    </table>