Dynamic Modal Bootstrap

Question

I have a table like:

When user selects Edit, it opens up a bootstrap Modal containing all td of the tr the Modal is launched from. What I've done so far is:

Get Row Index on Edit Click:

$(document).on('click', '#editNominHref', function(e) {
    var global_edit_row = $(this).closest('tr').index();
    $('#editNomiModal').modal('show');  
});

What I want is:

$('#editNomiModal').on('show.bs.modal', function ()  {
    $("#Name_feild_of_Modal").val(name_in_td_of_nth_Tr);
   // ..Similar for DOB, Relation and share%..
});

Question:

How do I pass the tr index from Edit.click to Modal.show function?

Answer 1

I don't believe you can pass data directly to the modal. However, you can use data attributes to modify the DOM which can then be read from the show.bs.modal event. Something like this:

$(document).on('click', '#editNominHref', function(e) {
    $('#editNomiModal')
        .data('row-index', $(this).closest('tr').index()) 
        .modal('show');  
});

$('#editNomiModal').on('show.bs.modal', function ()  {
    var $tr = $('#myTable tr').eq($(this).data('row-index'));
    var serial = $tr.find('td:eq(0)').text();
    var name = $tr.find('td:eq(1)').text();
    // and so on...

    $("#Serial_field_of_Modal").val(serial);
    $("#Name_field_of_Modal").val(name);
    // and so on...
});

Answer 2

When you open the modal can't you just clone the <tr> and insert into modal-content?

$(document).on('click', '#editNominHref', function(e) {
    var content = $(this).closest('tr').html();
    $('#editNomiModal').find('modal-content').html(content).modal('show');  
});

Obviously more formatting would be required.