Bootstrap modal window automatically receiving content of AJAX

Question

I am trying to create a bootstrap modal which contains the result of an AJAX request.

my bootstrap code is as follows

{{--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">&times;</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>

There is also a button, as you can see its HREF attribute makes a call to the route which is intended to be called via AJAX.

<a href="api/myroute/someID" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Preview Reminder</a>

I have written the back end code which returns content from api/myroute/someID

So far the front end code is sample code copy/pasted from bootstraps documentation and the back end code is my own.

The next step is to write some Javascript which takes the content of the AJAX call to api/myroute/someID and place it in the modal window.

The problem is that although I have NOT YET WROTE THIS CODE The content returned from this route is getting placed in the modal window automatically.

However this only works correctly once. Opening a second modal window and putting a different "someID" on the end of the route (so it returns different data) results in a modal window that contains the result of the first AJAX call.

I have 2 questions.

1) How is this working? 2) How do i make it refresh the content of the modal each time it is opened

The url is loading data into the modal using the [`remote` option](https://getbootstrap.com/docs/3.3/javascript/#modals-options). This doesn't exist in Bootstrap 4. — Carol Skelly, Apr 26 '18 at 10:39
ok why is it that every time i open the modal with a different button (which has a different href attribute) it only shows the content which was loaded the first time i opened the modal how do i refresh the content each time it is opened? — megaman, Apr 26 '18 at 10:43
oh i see "If a remote URL is provided, content will be loaded one time via jQuery's load method " well thats a very easy was of making something work stamped on! — megaman, Apr 26 '18 at 10:45
The "refresh the of the modal each time" is basically a duplicate question. Search for other posts on "bootstrap modal jquery ajax". — Carol Skelly, Apr 26 '18 at 11:10
Possible duplicate of [Bootstrap 3 - How to load content in modal body via AJAX?](https://stackoverflow.com/questions/19663555/bootstrap-3-how-to-load-content-in-modal-body-via-ajax) — Carol Skelly, Apr 26 '18 at 11:19

score 0 · Answer 1 · answered Apr 26 '18 at 12:05

Bootstrap 3 modals have a feature where if the opening element has a href attribute the modal is populated with the response of the http request which the href attribute makes.

This feature was removed from bootstrap 4. This only works once for the same model window.

Bootstrap modal window automatically receiving content of AJAX

1 Answers1