I'm currently in the process of crafting a bootstrap modal that displays the outcome of an AJAX request.
Below is my bootstrap code:
{{--Bootstrap modal--}}
<div id="exampleModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Electronic mail title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Electronic mail body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Additionally, there's a button where the HREF attribute triggers a call to a route through AJAX.
<a href="api/myroute/someID" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Preview Reminder</a>
I've developed the backend code which provides content from 'api/myroute/someID'.
Currently, the frontend code consists of simplified code extracted from Bootstrap's documentation and I've integrated my own backend code.
The next challenge involves structuring Javascript that fetches content from the AJAX call to 'api/myroute/someID' and inserts it into the modal window.
An intriguing issue arises - even though I haven't implemented the necessary code yet, the content retrieved from this route seems to automatically populate the modal window.
However, this mechanism only operates correctly once. Opening a second modal window with a different "someID" appended to the route (thus fetching distinct data) results in the new modal displaying the previous AJAX response.
I have two key queries:
1) How does this automatic behavior function? 2) What steps should be taken to ensure the modal refreshes its content each time it is opened?