[Resolved] View Loop Modal Not Loading When Given Unique ID

[Author]

Posts

[Dave]

I am trying to:
Display each view result's page in a content template contained within a modal.

Link to a page where the issue can be seen:
hidden link

I expected to see:
The modal loading as it previously did.

Instead, I got:
Nothing.

This was previously working, and appears to have stopped after a recent update, but I cannot be sure of that. All that is certain is that no one has updated this page for weeks prior to discovering this had stopped working.

The View is setup so that the modal has the id of "propertiesModal-[wpv-post-id]" and the <a> tag has the data-target of "#propertiesModal-[wpv-post-id]".

The odd part is that is I remove "-[wpv-post-id]" from the calls then it loads the modal fine, just with the current pages data, not the view result in question.

Like I said, this was working a few weeks ago and no matter what I try it will not work. Here is the complete view code:

[wpv-layout-start]
[wpv-items-found]

  <div class="modal fade" tabindex="-1" role="dialog" id="propertiesModal-[wpv-post-id]" aria-labelledby="propertiesModal-[wpv-post-id]" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title w-100 text-center"><center>[wpv-post-title]</center></h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      </div>
      <div class="modal-body">
        [wpv-post-body view_template="content-template-for-properties"]
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="row property-row">
  <div class="col-md-4">
    <div class="property-select">
      <img src="<em><u>hidden link</u></em>" alt="Lavender Close" />
    </div>
  </div>
  <!-- wpv-loop-start -->
  <wpv-loop>
    <div class="col-md-4">
      <div class="property-select">
        <a href="#" data-toggle="modal" data-target="#propertiesModal-[wpv-post-id]">
          [wpv-post-body view_template="loop-item-in-development-properties-view"]
        </a>
      </div>
    </div>
  </wpv-loop>
</div>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]

[Christian Cox]

The View is setup so that the modal has the id of "propertiesModal-[wpv-post-id]" and the <a> tag has the data-target of "#propertiesModal-[wpv-post-id]".
The odd part is that is I remove "-[wpv-post-id]" from the calls then it loads the modal fine, just with the current pages data, not the view result in question.
It's not really odd, because It looks like you have placed the modal outside the wpv-loop tags. That's not going to work, because you want a modal created for each iteration of the loop. That way clicking the link will open the corresponding modal. The way you have it now will create only one modal, since it's outside the loop tags. Try something like this instead:

[wpv-layout-start]
[wpv-items-found]

<div class="row property-row">
  <!-- wpv-loop-start -->
  <wpv-loop wrap="3">
    <div class="col-md-4">
      <div class="property-select">
        <a href="#" data-toggle="modal" data-target="#propertiesModal-[wpv-post-id]">
          [wpv-post-body view_template="loop-item-in-development-properties-view"]
        </a>
      </div>
    </div>
    <div class="modal fade" tabindex="-1" role="dialog" id="propertiesModal-[wpv-post-id]" aria-labelledby="propertiesModal-[wpv-post-id]" aria-hidden="true">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h3 class="modal-title w-100 text-center"><center>[wpv-post-title]</center></h3>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          </div>
          <div class="modal-body">
            [wpv-post-body view_template="content-template-for-properties"]
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </wpv-loop>
<!-- wpv-loop-end -->
</div>
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]

Now you're creating a property-select panel with the post body contents, followed by a corresponding modal, for each iteration of the loop.

[Dave]

I cannot believe that I missed that! 🤦‍♂
I just moved the modal within the <wpv-loop> tags and it's working perfectly again.

It's because we rearranged it to fix a different issue in this support ticket:
https://toolset.com/forums/topic/adding-a-unique-view-output-in-first-position/

I guess that's what happens when you stare are the same code for too long and you start to over think these things.

Thanks Christian!