[Résolu] Use Modals in a View

[Auteur]

Publications

[tony]

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:

<ul>
[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]
        </h4>
        
      </div>

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

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

    </div>

  </div>
</div>

[/wpv-for-each]
</ul>

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.

Thanks
Tony

[Beda]

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.

[tony]

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