Skip Navigation

[Resuelto] Generating unique modal links from a View

Este hilo está resuelto. Aquí tiene una descripción del problema y la solución.

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 hace 5 años, 9 meses. 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.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

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+01:00)

This topic contains 2 respuestas, has 2 mensajes.

Last updated by Ljuba hace 5 años, 9 meses.

Assisted by: Nigel.

Autor
Mensajes
#958010
003.png
002.png
001.png

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

#958745

Nigel
Supporter

Languages: Inglés (English ) Español (Español )

Timezone: Europe/London (GMT+01: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>
#958771

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

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.