[Resolved] Bootstrap Modal in a Loop View

[Author]

Posts

[Nashaat]

Hi,
I have tried many ways to create a Modal that show dynamically the content of each post in views. unfortunately i cant figure out how to solve following issue:

when Clicking on the Button it opens the Modal in Views and it shows the right content for each post loop. The problem is i would like to use different buttons for the same modal and only the content of each which is modal-body change.

for example:
clicking on Details Button will show the modal with content of details
clicking on Edit Button it should show the same Modal but the content of it with the Cred Form.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myLoopModal[wpv-post-id]">
  Details
</button>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myLoopModal[wpv-post-id]">
  Edit
</button>

<!-- Modal -->
<div class="modal fade" id="myLoopModal[wpv-post-id]" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body details">

        [wpv-post-title]<hr>
        [wpv-post-id]<hr>
        [wpv-post-slug]

      </div>

      <div class="modal-body cred-edit">

          [cred_form form="edit-post-form"]

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Anyway how to make the content inside the the modal show dynamic content?

summary:

5 Buttons
1 Modal
5 Modal Body for each Button.

[Christian Cox]

There's nothing built-in to Toolset that will help you programmatically manipulate the contents of a modal popup. You'll have to write custom JavaScript code to do this. Here's an example in the Bootstrap documentation that helps you modify the modal content based on the trigger button:
https://getbootstrap.com/docs/3.3/javascript/#modals-related-target

Since Toolset shortcodes are rendered on the server, you can't use them in JavaScript. You'll have to put all the content in place, then show or hide it with CSS.

[Nashaat]

My issue is resolved now. Thank you!