Generating unique modal links from a View

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

Problem:
The client is producing a list of content that he wants to appear in modals and has the problem that all of the links to open a modal open the same first modal content.

Solution:
The modals implementation requires linking to modal elements by their id, and the loop output section of the View uses "static" markup for the id, so the markup for each modal has the same id. You need to generate unique ids using the wpv-post-id shortcode (for posts) or wpv-taxonomy-id shortcode (for taxonomy terms), e.g.

<div id="target-[wpv-post-id]">Hello</div>

Relevant Documentation:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-post-id

This support ticket is created 6 years, 3 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
-	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	-
-	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	-

Supporter timezone: Europe/London (GMT+00:00)

Tagged: Content Templates, Views, Views plugin

This topic contains 2 replies, has 2 voices.

Last updated by Ljuba 6 years, 3 months ago.

Assisted by: Nigel.

Author

Posts

July 28, 2018 at 11:12 pm #958010

Ljuba

==>Tell us what you are trying to do?

I created Content Template for single taxonomy display (with 'modal' dialog). Code looks as

<!-- Trigger the modal -->
<a href="#pasarelasModal" data-toggle="modal">
    [types termmeta='logotipo-de-tipo-de-tarjeta' title='%%TITLE%%' alt='%%ALT%%' size='custom' height='22' resize='proportional'][/types]
</a>

<!-- Modal -->
<div id="pasarelasModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">[wpv-taxonomy-title]</h4>
      </div>
      <div class="modal-body">
        <div>[types termmeta="logotipo-de-tipo-de-tarjeta" align="center" size='custom' height='120'][/types]</div>
        <div>[wpv-taxonomy-description]</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Than I created View with filter (image 001). All is displayed fine (image 002), I mean, all selected choices are displayed (and non selected are not displayed).

However, problem is with 'modal', as for whatever image (card type) I click, it always open FIRST ITEM DIALOG (here - VISA card dialog - image 003), instead its own modal dialog.

I simply can't get it why, as in Content Template I 'call' the same items for main (small) display, as well for 'modal' display. So, it enter in same loop and should be all same, but it is not.

Please, what is wrong here?

July 30, 2018 at 8:03 am #958745

Nigel

Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

The problem here is that you are using the same ID for each modal (see screenshot).

Not only is it not valid HTML, but when you link to an element using its ID, if there are multiple elements with the same ID there is no way for the browser to know which you intend, and so it will link to the first one.

You can generate unique IDs (don't forget to update the element and the link to it) with a Views shortcode, e.g.

<div id="target-[wpv-post-id]">Hello</div>

July 30, 2018 at 9:07 am #958771

Ljuba

Thanks. Only, it should to be id="terget-[wpv-taxonomy-id]" as it is about taxonomies. Now works. Thanks again.