Load remote content into a Twitter Bootstrap modal

Question

I’m trying to load the contents of a modal from a remote page.

This is the code I’m using to run the tests.

$('[data-load-remote]').on('click', function (e) {
        e.preventDefault();
        var $this = $(this);
        var remote = $this.data('load-remote');
        if (remote) {
            $($this.data('remote-target')).load(remote);
        }
    });

.modal-edit-buttom {
        float: right;
        font-size: 18px;
        margin-right: 5px;
        padding: 0;
        cursor: pointer;
        background: 0 0;
        border: 0;
        color: #000;
        text-shadow: 0 1px 0 #fff;
        opacity: .2;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<button type="button" class="btn btn-primary" data-toggle="modal" data-load-remote="http://fiddle.jshell.net/vafleite/c5dLg852/3/show/" data-remote-target="#myModal" data-target="#myModal">Remote modal button</button>
    <div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
             <h3 id="myModalLabel">...</h3>
        </div>
        <div class="modal-body">
            <p>...</p>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Save changes</button>
        </div>
    </div>

And the modal that is loaded is this

<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">&times;</span>
        </button>
        <button type="button" class="modal-edit-buttom"> <span data-load-remote="http://fiddle.jshell.net/vafleite/62m9h069/1/show/" data-remote-target="#myModal" data-target="#myModal" class="glyphicon glyphicon-edit" aria-hidden="true">Edit</span>
        </button>
         <h4 class="modal-title" id="myModalLabel">Header test</h4>
    </div>
    <div class="modal-body">Body test</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>

I can load the remote modal using the method load jQuery, the content I’m loading is a complete modal (I’ve seen some examples loading only the modal-body, but I couldn’t make it work with them either), in the header I put a button (Edit) that should (re)load the same modal but with other content, but it seems that the function of jQuery is not even called when I click this button.

I don’t know if I’ve been able to explain it well, but from the code I believe you can understand the idea better...

Answer 1

I use it here and it works normally. Just follow my code:

Modal call:

<a href="modal.html" class="btn btn-info btn-xs" data-toggle="modal" data-target="#meuModal"><i class="fa fa-search"></i> Visualizar</a>

Modal structure:

<!-- Modal -->
    <div class="modal fade" id="meuModal" 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">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal</h4>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
          </div>
        </div>
      </div>
    </div>

modal.html:

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  <h4 class="modal-title"><strong>Meu título</strong></h4>
</div>
<div class="modal-body">Lorem ipsum</div>

Remove the cache to not open the same content every click:

<script>
   $('#meuModal').on('shown.bs.modal', function () {
     $(this).removeData('bs.modal');
   });
</script>

Answer 2

Studying jQuery’s documentation I found what I was doing wrong.

The way I was calling the method on jQuery used to bind events to elements that had already been loaded at the time of script execution. That is, when I clicked on the first button an event was generated and modal was loaded with the remote page, but as this page was dynamically loaded no event that occurred in it was captured.

The solution is to use what is called delegate by jQuery, which is done by passing one more parameter to the method on, that a selector, and so it goes on to capture events of dynamically charged content.

$('#load-wrapper').on('click', '[data-load-remote]', function (e) {
    e.preventDefault();
    var $this = $(this);
    var remote = $this.data('load-remote');
    if (remote) {
        $($this.data('target')).load(remote);
    }
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css">

<div id="load-wrapper">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-load-remote="http://fiddle.jshell.net/vafleite/c5dLg852/8/show/" data-target="#myModal">Remote modal button</button>

    <div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">...</h3>
        </div>
        <div class="modal-body">
            <p>...</p>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

Example code that works as expected: http://jsfiddle.net/vafleite/jf10pdcj/3/