Bootstrap 3.1+ - JQuery - Remote Modal Content Manipulation

An example of Bootstrap 3 Remote Modal Content Manipulation with JQuery

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<a data-toggle="modal" href="/dbasch/B9EZC/show/" data-target="#myModal" data-merchant-name="Bob's House of Pancakes">Click me !</a>
<div class="panel-body"><div class="row"><div class="col-md-10"><ol class="breadcrumb"><li class="active">Mapping Manager</li></ol></div><div class="col-md-2"><button class="btn btn-primary btn-sm" style="margin-right: 10px;">Change Account</button><button class="btn btn-primary btn-sm" style="margin-right: 10px;">Add New</button></div></div><table class="table no-footer batchesTable table-hover"><thead><tr><th></th><th>ID</th><th>Email</th><th>IsDeleted</th><th>CustomerID</th><th>Name</th><th>TmsAssignee</th></tr></thead><tbody class="batch-tbody-filemanager"><tr><td class="icon-only"><button class="btn btn-xs btn-info ladda-button" data-style="slide-left" data-callbacks-window="Atlas.AdvanceFiltering"><span class="ladda-label"><i class="fa fa-external-link"></i></span><span class="ladda-spinner"></span><div class="ladda-progress" style="width: 0px;"></div></button></td><td></td><td></td><td></td><td>5107d330-312f-4476-b64c-aaad85e74326</td><td>Jatin Juthani</td><td></td></tr><tr><td class="icon-only"><button class="btn btn-xs btn-info ladda-button" data-style="slide-left" data-callbacks-window="Atlas.AdvanceFiltering"><span class="ladda-label"><i class="fa fa-external-link"></i></span><span class="ladda-spinner"></span><div class="ladda-progress" style="width: 0px;"></div></button></td><td></td><td></td><td></td><td>038c500c-dd25-422f-b631-66213c7227b0</td><td>Nishita Hadagali</td><td></td></tr><tr><td class="icon-only"><button class="btn btn-xs btn-info ladda-button" data-style="slide-left" data-callbacks-window="Atlas.AdvanceFiltering"><span class="ladda-label"><i class="fa fa-external-link"></i></span><span...

JavaScript

// we can't use the show.bs.modal or loaded.bs.modal events
// because the remote modal elements are not accessible in the DOM
// when those events trigger

// when the remote modal content is loaded  
// $('#myModal').on('shown.bs.loaded', function (e) {

    // get a data attribute value from the clicked element
    // var merchantName = $(e.relatedTarget).data('merchant-name');

    // and set the content of the shown remote modal
    // $('#myModalLabel').text("shown.bs.loaded event triggered");
//
// });

$(".panel-body").find("table").on('click', '.btn-xs', (event, element) => {
alert('hi');
$('.modal-body #Email').attr('readonly', true);
debugger;
 var merchantName = $(e.relatedTarget).data('merchant-name');

    // and set the content of the shown remote modal
    $('#myModalLabel').text("shown.bs.loaded event triggered");
    
			$('.modal-body #ID').attr('readonly', true);
			$('.modal-body #Email').attr('readonly', true);
			$('.modal-body #IsDeleted').attr('readonly', true);
			$('.modal-body #CustomerID').attr('readonly', true);
			$('.modal-body #Name').attr('readonly', true);
		});

// when the remote modal content is loaded  
$('#myModal').on('shown.bs.loaded', function (e) {

    // get a data attribute value from the clicked element
    var merchantName = $(e.relatedTarget).data('merchant-name');

    // and set the content of the shown remote modal
    $('#myModalLabel').text("shown.bs.loaded event triggered");

});

// cleanup the content of the hidden remote modal because it is cached
$('#reservationModal').on('hide.bs.modal', function (e) {

    $(this).removeData('bs.modal');

});