Repeatable Field Group is not working as a loop view with modal

This thread is resolved. Here is a description of the problem and solution.

Problem: I am trying to use a modal interface to display a gallery of images from a repeatable field group, but it doesn't seem to be working as expected.

Solution: Be sure the HTML "id" attribute is unique for each loop in the View. You can usually add the post ID using the wpv-post-id shortcode to achieve this (see below). Then you must also update the target attributes that correspond to the new unique ID.

Unique ID in the modal:

<div class="modal fade" id="articlemodal-[wpv-post-id]" tabindex="-1" role="dialog" aria-labelledby="myModalLabel-[wpv-post-id]">
...

The updated corresponding modal trigger:

<a data-toggle="modal" data-target="#articlemodal-[wpv-post-id]"  rel="noopener noreferrer">
...

This support ticket is created 5 years, 6 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Views, Views plugin

This topic contains 2 replies, has 2 voices.

Last updated by chrisC-25 5 years, 6 months ago.

Assisted by: Christian Cox.

Author

Posts

July 2, 2019 at 4:02 pm #1282033

chrisC-25

I have a RFG setup and it is a gallery with a modal that opens when an image is clicked. The images are fine, when clicked they open the modal but instead of showing different text for each item, they only show the text of the last added item in the group.

Here is link:
hidden link

It is under "Featured Articles"

Here is the view code for loop item:

<div class="thumbnail"><a data-toggle="modal" data-target="#articlemodal"  rel="noopener noreferrer">
                        <img src="[types field="article-image" output='raw'][/types]" alt="[types field="article-name"][/types]">
                    </a>

</div>
<!-- Modal -->
<div class="modal fade" id="articlemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">[types field="article-name"][/types]</h4>
      </div>
      <div class="modal-body">
        <p>[types field="article-text"][/types]</p>
 </div>
      
      <div class="modal-footer">
        <button type="button" class="btn btn-lyrics" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div class="caption">[types field="article-name"][/types]</div>

Thanks

July 2, 2019 at 6:44 pm #1282107

Christian Cox

Looks like you are looping over multiple items but using the same ID in each loop. As a general rule in HTML, all ID attributes should be unique. Try adding the post ID -[wpv-post-id] into all repeating ID attributes. Then you must also add it to any trigger that points to an ID as a target or any aria-label that points to one of those IDs. Here's an update:

<div class="thumbnail"><a data-toggle="modal" data-target="#articlemodal-[wpv-post-id]"  rel="noopener noreferrer">
                        <img src="[types field="article-image" output='raw'][/types]" alt="[types field="article-name"][/types]">
                    </a>
 
</div>
<!-- Modal -->
<div class="modal fade" id="articlemodal-[wpv-post-id]" tabindex="-1" role="dialog" aria-labelledby="myModalLabel-[wpv-post-id]">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel-[wpv-post-id]">[types field="article-name"][/types]</h4>
      </div>
      <div class="modal-body">
        <p>[types field="article-text"][/types]</p>
 </div>
       
      <div class="modal-footer">
        <button type="button" class="btn btn-lyrics" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div class="caption">[types field="article-name"][/types]</div>

July 3, 2019 at 6:58 pm #1283509

chrisC-25

Perfect, great support as always! My issue is resolved now. Thank you!