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 6 años, 4 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.

Hoy no hay técnicos de soporte disponibles en el foro Juego de herramientas. Siéntase libre de enviar sus tiques y les daremos trámite tan pronto como estemos disponibles en línea. Gracias por su comprensión.

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)

Este tema contiene 2 respuestas, tiene 2 mensajes.

Última actualización por Ljuba hace 6 años, 4 meses.

Asistido por: 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

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

Zona horaria: 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>
#958771

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