Load remote content in a modal Twitter Bootstrap

Navigation
2

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

This is the code that I am 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><scriptsrc="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 load method of jQuery, the content I'm loading is a complete modal (I've already seen some examples loading only modal-body, but I was not able to work with them either), in the header I put a button (Edit) that should (re) load the same modal but with other content, but apparently the jQuery function is not even called when I click this button.

I do not know if I could explain it well, but by the code I believe that you can better understand the idea ...

    
asked by anonymous 16.09.2015 / 17:46

2 answers

0

Studying the jQuery documentation found what I was doing wrong.

The way I was calling the on method of jQuery it only bind events on 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 a delegate by jQuery, which is done by passing one more parameter to the on method, than a selector, so it starts capturing dynamically loaded content events. / p> 

$('#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><scriptsrc="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>
 

Sample code that works as expected: link

    
18.09.2015 / 16:32
4

I use it here and it works normally. Here is 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 with each click: 

<script>
   $('#meuModal').on('shown.bs.modal', function () {
     $(this).removeData('bs.modal');
   });
</script>
    
16.09.2015 / 18:29
Listing images within a directory How to clone an object in javascript? [duplicate]