Skip Navigation

[Résolu] Use Modals in a View

Ce fil est résolu. Voici une description du problème et la solution proposée.

When I insert a Bootstrap Modal Code in my Views Loop, and then view the Front end, opening the Modals always opens the same modal.
Why is this?

Because each Modal has an unique referring ID (in the Link that refrest to the Modal itself).
This ID is always the same if you do not alter the native Bootstrap example code.
So you should exchange the id="" argument with an unique value, as example the




<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#[wpv-post-id]">
  Launch demo modal

This support ticket is created Il y a 6 années et 6 mois. 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
- - 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00
- - - - - - -

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

This topic contains 2 réponses, has 2 voix.

Last updated by tony Il y a 6 années et 6 mois.

Assigned support staff: Beda.


I am trying to: use a modal to display pdf documents that have their links stored in a repeating field.

I can make the model work for a single field and was hoping that use of the [wpv-for-each field] shortcode would enable me to display multiple trigger buttons each displaying their own .pdf file.

My code is:

[wpv-for-each field="wpcf-quotation-supporting-documents-sent-link"]  

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#viewOther">View Other</button>  

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

    <!-- Modal content-->
    <div class="modal-content">
       <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title"> 
        [types field="quotation-reference"][/types] - [types field="quotation-date" style="text" format="F j, Y"][/types] - [types field="quotation-value" format="£ FIELD_VALUE"][/types]

      <div class="modal-body">

<object type="application/pdf" data="[types field="quotation-supporting-documents-sent-link"][/types]" width="100%" height="800">this is not working as expected></object>

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




This displays the two buttons but each one brings up a modal with the same (first) document so I assume there is something missing to pass the correct [types field="quotation-supporting-documents-sent-link"][/types]

Maybe it cannot be done this way but I thought it worth asking the question because I am finding the modal facility very useful.



This is because the HTML has the same ID in the ID's:
data-target="#viewOther" addresses id="viewOther"

Therefore, hitting one Button will address id="viewOther" and that id="viewOther" is always the same.

Since this is also a Repeating Field and therefore the Post ID does NOT change, you can not use the Post ID ShortCode here, as the id of the HTML modal and button - which would provide a unique ID for each instance.

You can try to use the Field's content itself as ID, not sure though that will work.

As a generic Rule:
Each modal Button and Body must be addressed with a unique ID.
Usually you can use the Post Body here, but Repeating Fields all belong to the same body, so, no possibility to use it.


Yes - I see the point you are making so will have to find another solution.