html - show data from parent to modal in bootstrap

Question

I am having a page and i am using the following code to show in title the surname & name(cname in the code).

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);
            }
        }
    });
}

Until here everything is fine.

On my page, i am having a button which load a modal. I am trying to show cname in my modal on title too.

My modal title code with no result:

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

Modal js(works fine for the datatable in modal):

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);
}

How can i show cname in modal title?

Answer 1

You could use the shown method of the modal and load the data.

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);
});