html - 在 bootstrap 中显示从 parent 到模态的数据

Question

我有一个页面，我正在使用以下代码在标题中显示 surname & name（代码中的 cname）。

html:

<div class="col-xs-4">
    <!-- Title -->
    <h3 id="cName">&nbsp;</h3>
</div>

js:

$(document).ready(function() {
    getCustomer(global_customer_id);
});

function getCustomer(id) {
    $.ajax({
        url: "api/customer.php?action=getCustomer",
        type: "POST",
        data: {
            'customer_id': id
        },
        dataType: 'json',
        success: function(result) { //
            if (result.success === true) {
                $('#cName').html(result.customer.surname + " " + result.customer.name);
            }
        }
    });
}

到这里一切都很好。

在我的页面上，我有一个加载模式的按钮。 我也在尝试在我的标题模态中显示 cname。

我的模态标题代码没有结果：

<h3 id="cName">&nbsp;</h3>

Modal js（适用于模式中的数据表）：

function getCustomerAppointmentWork() {
    $('#filter_appointment').modal('show');
    setTimeout(function() {
        if ($.fn.DataTable.isDataTable('#FilterAppointmentTable')) {
            $('#FilterAppointmentTable').DataTable().destroy();
        }
        $('#FilterAppointmentTable').DataTable({
            ajax: 'api/customer.php?action=getCustomerAppointmentWork&customer_id=' + global_customer_id,
            processing: true,
            serverSide: true,
            ordering: false,
            dom: '<"DataTableInfo"i><"DataTableFilter"f>rt',
            scrollY: 520,
            scroller: true,
            initComplete: function(settings, json) {
                $('.dataTables_scrollBody').css({
                    'overflow': 'hidden',
                    'overflow-y': 'auto'
                });
            },
            columnDefs: [
                {width: "67px", targets: 0},
                {width: "22%", targets: 1},
                {width: "6%", targets: 2}
            ],
        });
    }, 500);
}

如何在模式标题中显示 cname？

Answer 1

您可以使用模态的shown方法加载数据。

html:

<div class="col-xs-4">
    <!-- Title -->
    <h3 id="cNameModal">&nbsp;</h3>
</div>

js:

$(document).ready(function() {
    getCustomer(global_customer_id);
});

function getCustomer(id) {
    $.ajax({
        url: "api/customer.php?action=getCustomer",
        type: "POST",
        data: {
            'customer_id': id
        },
        dataType: 'json',
        success: function(result) { //
            if (result.success === true) {
                $('#cName').html(result.customer.surname + " " + result.customer.name);
                $('#cNameModal').html(result.customer.surname + " " + result.customer.name);
            }
        }
    });
}

$( "#filter_appointment" ).on('shown.bs.modal', function(){
    getCustomer(global_customer_id);
});