[Resolved] Trying to create a link to a modal using Views

[Author]

Posts

[chrisC-25]

I have built a view that pulls from a repeatable group custom field. I want the "Artist Name" field to link to a modal that contains the "Playlist URL" from the repeatable group, which is a embeded Spotify playlist. I have it setup and the modal seems to open but no content is shown.

Here is example post:
hidden link

[chrisC-25]

I am able to see the modal now, however the iframe embed does not show and I also need help on relating the playlist embed to the selected artist in the grouped field.

Here is code I have so far:

<a href="#myModal" data-toggle="modal" data-target="#myModal" rel="noopener noreferrer">[types field="artist-name"][/types]</a>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">

      </div>
      <div class="modal-body">
        <p>Playlist</p>
        <div><iframe src="[types field='playlist-url' output='raw'][/types]" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe></div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

The [types field='playlist-url' output='raw'][/types] should relate to the artist name clicked in the view [types field="artist-name"][/types].

[Nigel]

Hi Chris

Reading your question I'm not quite sure what the fields belong to that you are having problems outputting.

The page you linked to is for a single label post.

So the repeatable field group for artists belongs to the label post?

And the fields artist-name and playlist-url belong to repeatable field group?

The markup you shared above, it's from the output of the View to display repeatable field groups? The types shortcodes in that sample are both at the same level, i.e. they both refer to the same post, or in this case, the same group of repeatable fields being iterated over by the View, i.e. the artist name and the playlist-url match.

When I visit your link I see the modal open when clicking the artist name, but scrolling down observe that the content is blocked because of your content security policy, maybe that is the problem you are having?

hidden link

[chrisC-25]

Hi Nigel,

That is strange about the CSP. I do not have any additional rules setup, seems it was coming from Chrome. However now it appears to work? Not sure what is happening there.

Anyway now it does open, but as you can see the Spotify playlist is not matching the artist that is clicked. They both show the last added playlist by CCR. How do I associate the artist specific playlist with the artist name?

To answer your questions:
So the repeatable field group for artists belongs to the label post? YES

And the fields artist-name and playlist-url belong to repeatable field group? YES

Thanks
Chris

[Nigel]

Hi Chris

id attributes must be unique, but you are adding multiple elements with id="myModal".

You need to update your markup so that the id's (and links to them) are dynamic, e.g. by appending the post id, such as id="myModal-[wpv-post-id]".

[chrisC-25]

Oh yes! Thanks that worked, however now the modal will not open on mobile. Any ideas?

[Nigel]

Hi Chris

I can see the problem when I visit the page on my mobile, but I can't see what the cause is.

I copied and pasted the actual generated HTML from your page into codepen.io and checked, and there it works okay both on desktop and on mobile (hidden link).

So there doesn't seem to be a problem with the markup itself.

You may need to try disabling other plugins and switching theme to see if you can isolate something that is interfering, or connect your phone up to your desktop and use a tool that lets you debug remotely using the normal browser dev tools. Look out for JS errors or problems relating to the CSS.

[chrisC-25]

Thanks, I will try some more troubleshooting.