bootstrap3模态表没有加载数据

时间:2014-03-22 00:55:48

标签: jquery twitter-bootstrap-3 pug

民间,   我一直在争取在引导程序中将一个模态绑定到我的表。

以下代码确实启动了模式,但没有显示我试图传递的值。我尝试在这里复制功能:JSFiddle

现在,如果我从底部删除JavaScript部分,模态仍然加载...我真的不知道如何使这个工作:(

我想要的是什么:

  1. 通过循环挂起pendingArray
  2. 动态生成表格(现在正在工作)
  3. 您要点击的每个表项都会填充在模态中。
  4. 代码:

    .panel.panel-default
        .panel-heading Pending Requests
        .panel-body
            table.table-hover.table-condensed
                thead
                    tr
                        th Email
                        th First Name
                        th Last Name
                tbody
                    - each val in pendingArray
                        tr(data-toggle='modal', data-id="#{val.mid}",  data-target="#mvrDisplayModal")
                            td #{val.email}
                            td #{val.fName}
                            td #{val.lName}
    
    #mvrDisplayModal.modal.fade.large
        .modal-dialog(style="width:70%")
            .modal-content
                .modal-header
                    button.close(type='button', data-dismiss='modal', aria-hidden='true') ×
                    h2.modal-title fName lName
    
                #orderDetails.modal-body
    
                .modal-footer
                    button.btn.btn-default(type='button', data-dismiss='modal') Close
    
    
    body
        script.
            $('#mvrDisplayModal').modal({
                    keyboard: true,
                    backdrop: "static",
                    show: true,
    
                }).on('show', function(){
                    var getIdFromRow = $(event.target).closest('tr').data('Email');
                    $(this).find('#orderDetails').html($('<b> Order Id selected: ' + getIdFromRow + '</b>'))
                });
            });
    

    加载了JS文件:

    script(src="https://code.jquery.com/jquery-1.11.0.min.js")
    script(src="https://code.jquery.com/jquery-migrate-1.2.1.min.js")
    script(src="https://code.jquery.com/ui/1.10.4/jquery-ui.js")
    script(src='/libs/bootstrap/js/bootstrap.min.js')
    

1 个答案:

答案 0 :(得分:0)

问题出在JavaScript中

script.
$('body').on('show.bs.modal', '.modal', function () {
    var getIdFromRow = $(event.target).closest('tr').data('id');
    $(this).find('#orderDetails').html($('<b> Order Id selected: ' + getIdFromRow + '</b>'))
});