Dynamically add HTML and call modal

Question

I want to add a piece of HTML dynamically to my body, and then use that to show a modal window. The modal.html is an exact copy of the example on the Bootstrap 4 site:

<div class="modal" tabindex="-1" role="dialog" id="dlgModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">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">
        <p>Modal 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>

I load this using this code:

$('body').append("modal.html");

When I check if the ID exists, I do find an object in the developer's console, but calling modal() on it has no effect:

» $("#dlgModal")
← Object { context: HTMLDocument http://127.0.0.1/index.html, selector: "#dlgModal" }

» $("#dlgModal").modal()   /* nothing happens */

How can I load the HTML via Javascript and then call the bootstrap method on it?

this is a plugin isn't it ? Why don't you use vanilla js instead? — William Bright
– William Bright, Commented Mar 21, 2019 at 14:21
@WilliamBright because I decided to use Bootstrap and jQuery. — Bart Friederichs
– Bart Friederichs, Commented Mar 21, 2019 at 14:23
yes but this isn't straight jQuery or Bootstrap this is some other package that builds on top, isn't it? That's all I'm asking. So maybe clarify what it is youre using to help people understand the issue. — William Bright
– William Bright, Commented Mar 21, 2019 at 14:26
@WilliamBright no, this is all straightforward Bootstrap and jQuery. — Bart Friederichs
– Bart Friederichs, Commented Mar 21, 2019 at 14:31

d_shiv · Accepted Answer · 2019-03-21 14:28:37Z

3

The code you are executing i.e. $('body').append("modal.html");, will simply add a text node 'modal.html' as a child of body. It will not load the 'modal.html' file from your server.

Assuming, that the modal.html file is served by your server at <hostname>/modal.html, your JS should be something like this:

$.get('/modal.html', function(content) {
    $('body').append(content);
});

$.get('/modal.html') loads the 'modal.html' file from your server. The callback function is executed when the file is loaded from server, at which point you can append the returned content to 'body'.

PS: To show the modal you'd need to pass a string 'show' to .modal function. eg. $("#dlgModal").modal('show')

answered Mar 21, 2019 at 14:28

d_shiv

1,80010 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bart Friederichs · Accepted Answer · 2019-03-21 14:32:36Z

0

I mixed some calls up. I had to use load(), but doing that in my body, would remove everything that was already there, so I added a container:

$('body').append("<div id='messageboxContainer'></div>");
$('#messageboxContainer').load("modal.html");

answered Mar 21, 2019 at 14:32

Bart Friederichs

33.8k16 gold badges112 silver badges219 bronze badges

Comments

Robert · Accepted Answer · 2019-03-21 14:49:08Z

As others have indicated, your usage of .append() is incorrect as in your example it would literally just output the text 'modal.html'. Your trigger to load the modal will also fail because you're loading the modal HTML template outside the DOM. A simple solution would be as follows:

$.ajax({
  url: 'modal-template.html',
  success: function(data) {
    $('body').append(data);
    $("#modal-id").modal();
  }
});

In the above code we're using jQuery's built-in AJAX support to load your HTML template. On a successful load we're taking that information as data and appending it to body. At that point your modal and its relevant ID now exist within the Dom, so we trigger the modal.

My personal preference however, is to have a 'shell' modal inside the default HTML:

<div class="modal fade" tabindex="-1" id="your-modal" role="dialog">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content"></div>
  </div>
</div>

From there you insert the content into the modal as needed via the following jQuery:

$('body').on('click', '[data-toggle="modal"]', function(event) {
  var m_target = $(this).data("target"),
      m_path = $(this).attr("href");

  $(m_target + ' .modal-content').load(m_path); 
});

$('#your-modal').on('hidden.bs.modal', function (e) {
  $(this).find('.modal-content').empty().html('');
  $(this).modal('dispose');
});

The first bit allows you to load modal content into your existing, blank Modal template. The second ensures that when the modal is closed it is properly emptied out, which alleviates a potential issue where the next modal trigger might load the cached / old information (especially if you link to an invalid URL). Like I said... this method is simply my preference because it keeps an ID that is already part of the DOM. It's also a little more flexible (again, opinion only) as you can pass additional data attributes to it. In my normal usage I also pass along a size attribute to determine how large the Modal should be.

Collectives™ on Stack Overflow

Dynamically add HTML and call modal

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related