Multiple modals opening when clicking one button

Question

I'm making a web application with JSF and recently I tried to add a modal that pops up when a certain button is pressed. My problem is that whenever I press the button, 3 modals pop up in front of each other, and I would like there to only be one modal.

I'm using beans to dynamically add information into a datatable, and the button that triggers the modal is placed in the datatable's column. Currently I have three items in my datatable, and I think the problem is that whenever I press one of the buttons, the modal is called for all 3 buttons, but I am clueless as to how to fix it.

Here is my code:

<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>

normally the modal would be outside the `b:dataTable`. otherwise each modal would need a unique id e.g. amodal + r.id. but really it is best to put it outside. the modal data would be populated from the backing bean and would be set during the button click from inside the dataTableColumn. — MitchBroadhead, Mar 09 '18 at 12:27

score 0 · Answer 1 · answered Mar 10 '18 at 18:57

As Mitch mentioned above, a modal is generated in every row of the datatable. Granted, it may not be obvious from reading the sourcecode because the *.xhtml file only contains a single modal.

If you need an individual modal per row, you can probably use the id instead of the CSS class to open the modal:

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

Alternatively, you can make the CSS class unique by adding a row number attribute (or something like that).

However, in general it better to move the modal out of the datatable. Otherwise, a tremendous amount of HTML code is generated, reducing the performance of your application.

Multiple modals opening when clicking one button

1 Answers1