Bootstrap modal load entire HTML from external file

Question

Using: Bootstrap 4.1.3

Here is one solution but this is not exactly what i am looking for: Bootstrap Modal Dynamic Content

I am getting the content (the entire modal html) from an external file and then i need to show it as a modal.

How to display data in the modal

$.get("test.html", function(data) {
    ???
});

I am trying to avoid this alternate approach, where i can append a div to body, put data in it and then do modal.

$.get("test.html", function(data) {
    //$('<div />', { id: 'holdy' }).appendTo('body');

    var $holdyDiv = $('<div />').appendTo('body');
    $holdyDiv.attr('id', 'holdy');

    //append data 
    $holdyDiv.innerHtml(data);

    //do modal
    $('#divInData').modal('show');  
});

Forgot to mention, this call is happening once the page has finished loading.

Well if the modal is in test.html, you may not be able to open it unless you append it to the body. — Anurag Srivastava, Mar 02 '19 at 18:45
Well that is exactly what i am trying to accomplish. There should be a way to trigger modal with dynamic content, i am missing something very simple here. — learning..., Mar 02 '19 at 18:47
You want to execute a Javascript function on an element not present in the document body. I'm not sure if that is possible. — Anurag Srivastava, Mar 02 '19 at 18:50
I don't understand the question. Can you explain why the various answers in the other modal question or [answer here](https://stackoverflow.com/a/48934494/171456) doesn't work? — Carol Skelly, Mar 02 '19 at 18:53
@Zim i have my `data`, now how to show it in the bootstrap modal without first appending it to the body. Please take a look at the first snippet of code. — learning..., Mar 02 '19 at 19:04
Why do you have to append it to the body? Just append it to `$('modal-body')` as explained here https://stackoverflow.com/questions/34763090/bootstrap-4-with-remote-modal/48934494#48934494 — Carol Skelly, Mar 02 '19 at 19:14
@Zim `modal-body` needs to be available in the dom... `modal.find('.modal-body').load(button.data("remote"));`. Am i missing something here? — learning..., Mar 02 '19 at 19:19
So the *entire* modal html is in test.html? The question says modal "content". — Carol Skelly, Mar 02 '19 at 19:28
Yes and this modal needs to be displayed once the page has finished loading. — learning..., Mar 02 '19 at 19:30
@learning... Ah so the entire modal is in another location. Hmm — Yom T., Mar 02 '19 at 19:33
Yes, thats my issue and these guys i am working with... can't put that here... — learning..., Mar 02 '19 at 19:35

Carol Skelly · Accepted Answer · 2019-03-02T20:07:52.963

5

You should use jQuery $.load instead of $.get which allows you to specify the selector for the remote modal. Then all you need to do is:

$('body').load("test.html #myModal",function(){
   $('#myModal').modal();
});

Either way the Modal HTML must be added to the DOM of the "host" page that's loading the modal.

Demo:
https://www.codeply.com/go/AQazBWdsrZ ("host" page)
https://www.codeply.com/go/sE77hS1hHs ("remote" page - modal HTML only)

edited Mar 02 '19 at 20:07

answered Mar 02 '19 at 19:59

Carol Skelly

351,302
90
710
624

1

Very interesting approach. Led me to this official docs on [loading page fragments](http://api.jquery.com/load/#loading-page-fragments). +1 – Yom T. Mar 02 '19 at 20:15

Yom T. · Answer 2 · 2019-03-02T19:11:03.463

2

How about updating the modal contents on show.bs.modal event?

show.bs.modal

This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.

At this point, you could manipulate the contents before the modal is displayed, and shown.bs.modal triggers.

$('.modal').on('show.bs.modal', function(e) {
  const id = e.relatedTarget.dataset.postid;
  
  $.get('https://jsonplaceholder.typicode.com/posts/' + id)
    .then(data => {
      $('.modal-title', this).text(data.title);
      $('.modal-body', this).html(data.body);
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-postid="1">
  Launch demo modal #1
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-postid="2">
  Launch demo modal #2
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal 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">
        ...
      </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>

edited Mar 02 '19 at 19:11

answered Mar 02 '19 at 19:05

Yom T.

8,760
2
32
49

`modal-body` needs to be available in the dom. In my case, i have the data from remote url as html. I need to show this html as a modal. – learning... Mar 02 '19 at 19:23
@learning... It *is* available in the DOM when you first trigger the modal visibility. From there, you should be able to do something like: `$('.modal-body', this).html(__your_html_data__)`. – Yom T. Mar 02 '19 at 19:26
Forgot to mention, this call is happening once the page has finished loading. – learning... Mar 02 '19 at 19:28
@learning... I believe that should make no difference. If you inspect the `.modal` element, you could see that it is there, only set to `display:none` by CSS. Unless I'm missing your point. – Yom T. Mar 02 '19 at 19:30
My full modal structure is coming from the test.html file – learning... Mar 02 '19 at 19:33
@learning... OK, got ya. So I'm assuming it is full modal structure including an **empty** `.modal-body` that you need to update with dynamic contents. – Yom T. Mar 02 '19 at 19:36
It has every thing, including content, buttons, hml and classes applied to the markup. All i need to do is, read that file and display it as a modal. – learning... Mar 02 '19 at 19:44
Well, in that case, have you perhaps tried `$.get("test.html", function(data) { $(data).modal(); }` ...? – Yom T. Mar 02 '19 at 19:46
No, i didn't test with that. – learning... Mar 02 '19 at 19:49
@learning... Please do, and let me know if it works. I think it should, given the response of the Ajax call is the modal HTML itself. – Yom T. Mar 02 '19 at 19:51
How pass a local HTML file to open in the modal? – codajoao Oct 08 '19 at 00:05

Bootstrap modal load entire HTML from external file

2 Answers2