Question

我正在使用JSF创建一个Web应用程序，最近我尝试添加一个按下某个按钮时弹出的模式。我的问题是每当我按下按钮时，3个模态会在彼此前面弹出，我希望它只有一个模态。

我使用bean动态地将信息添加到数据表中，触发模态的按钮放在数据表的列中。目前我的数据表中有三个项目，我认为问题是每当我按下其中一个按钮时，所有3个按钮都会调用模态，但我对如何修复它无能为力。

这是我的代码：

<b:row style="margin:10px;">
  <b:dataTable 
     id="recipeTable" 
     var="r" 
     value="#{recipebean.findAll()}" 
     striped="true"
     page-length-menu="5,10,20"
     page-length="5">

       <b:dataTableColumn label="Image" style="width:160px;" orderable="false">
          <b:thumbnail>
             <b:image value="resources/img/thumbnail.svg" style="height:150px; width: 100%;"/>
          </b:thumbnail>
        </b:dataTableColumn>

       <b:dataTableColumn label="Title" style="width:500px;" id="ingredientTable">
          <h3>#{r.name}</h3>
       </b:dataTableColumn>

       <b:dataTableColumn label="Date">
          <h4 style="text-align: center; margin-top: 4.5em;">#{r.creationTime}</h4>
       </b:dataTableColumn>

       <b:dataTableColumn label="Rating">
          <h4 style="text-align: center; margin-top: 4.5em;">#{r.creationTime}</h4>
       </b:dataTableColumn>

       <b:dataTableColumn label="Favorite" orderable="false">

          <b:modal id="amodal" title="Modal Example" styleClass="modalPseudoClass">
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <f:facet name="footer">
                          <b:button value="Close" dismiss="modal" />
                          <b:button value="Ok" look="primary" dismiss="modal" />
                        </f:facet>
         </b:modal>

         <b:button icon-awesome="fa-heart" style="margin-left:2em; margin-top:5em;" onclick="$('.modalPseudoClass').modal()"/>

       </b:dataTableColumn>

   </b:dataTable>
 </b:row>

Answer 1

正如上面提到的Mitch，在数据表的每一行中都会生成一个模态。当然，从阅读源代码可能并不明显，因为* .xhtml文件只包含一个模态。

如果每行需要一个单独的模态，你可以使用id而不是CSS类来打开模态：

    <b:button icon-awesome="fa-heart" onclick="$('#{amodal.clientId}').modal()"/>

或者，您可以通过添加行号属性（或类似的东西）使CSS类唯一。

但是，通常最好将模态移出数据表。否则，会生成大量HTML代码，从而降低应用程序的性能。

单击一个按钮时会打开多个模态

1 个答案: