Bootstrap Snippet Populating modal using HTML Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
     <table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>Nº Pedido</th>
      <th>Cliente</th>
      <th>Valor Total</th>
      <th>#</th>
    </tr>
  </thead>
  <tbody>
    <!-- iteração -->
    <tr>
      <td>1321</td>
      <td>Guilherme Rocio</td>
      <td>R$ 831,00</td>
      <td><button data-pedido="1321" data-toggle="modal" data-target="#pedidoModal"  class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i></button></td>
    </tr>
    <!-- fim iteração-->
  </tbody>
</table>
<div class="modal fade" id="pedidoModal" tabindex="-1" role="dialog" aria-labelledby="pedidoModalLabel">
  <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">×</span></button>
        <h4 class="modal-title">Visualizando Pedido</h4>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
        (function ($) {
          
          $('#pedidoModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var pedido = button.data('pedido');
            
            var modal = $(this);
            modal.find('.modal-title').text('Visualizando Pedido #' + pedido);
            modal.find('.modal-body').html('<div class="alert alert-info" role="alert">Carregando informações do Pedido ... </div>');
            
            // simulando ajax
            setTimeout(function () {
              modal.find('.modal-body').html("Informações do meu pedido: " + pedido);
            }, 2000);
            
          });
          
        })(jQuery);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Populating modal"
Bootstrap 3.3.0 Snippet by keilost

Related: See More

Questions / Comments:

"Populating modal" Bootstrap 3.3.0 Snippet by keilost

Related: See More

Questions / Comments:

"Populating modal"
Bootstrap 3.3.0 Snippet by keilost