Problem: I would like to include an edit post Form in a View of posts, and I would like to show the Form in a modal.
Solution: I suggest to add the Modals button to the View loop:
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
Note that you NEED to modify that HTML, so the unique referrers are --- unique.
So the above code becomes:
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#[wpv-post-id]-modal">
Launch demo modal
</button>
We changed data-target= from "#myModal" (not unique in a loop, as repeated) to "#[wpv-post-id]-modal", which will generate a new unique ID for each post in the loop.
Then, add the modal code as well to the loop:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Again, you NEED to change the particular unique values, so the code becomes:
<div class="modal fade" id="[wpv-post-id]-modal" tabindex="-1" role="dialog" aria-labelledby="[wpv-post-id]-modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="[wpv-post-id]-modalLabel">Modal title</h4>
</div>
<div class="modal-body">
//Here place the Toolset Form to edit the CURRENT displayed post
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
That, will load for each post in the loop a new button, which if clicked, loads a Modal, which will have the proper form in it.
However, be careful with this.
Modals do not belong to the post as such, they can miss important data. Hence, for example Forms with AJAX Submit can provoke the "Success message" to be displayed in the modal after submit, and if you reopen that modal to re-use the form, the form would not be there anymore. You would then need to reload the entire page to see it again.
These are caveats of the Modals, and AJAX per se, not directly related to Toolset.
