Similar questions have been asked before BUT all/most of them suggested that I used this:
$(document).ready(function() {
// put your Javascript here
});
Even with using that It still does not work:
Code is JSFiddle: http://jsfiddle.net/Guruprasad_Rao/ooexfj26/
HTML:
<html>
<head>
</head>
<body>
<div class="row">
<div class="col-xs-12 col-md-12">
<table class="table table-condensed table-hover table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<tr>
<td>Johnn</td>
<td>Doe</td>
</tr>
<tr>
<td>Sam</td>
<td>Smith</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">EDIT</h4>
</div>
<div class="modal-body">
<p><input type="text" class="input-sm" id="txtfname"/></p>
<p><input type="text" class="input-sm" id="txtlname"/></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<script src="modal.js" type="text/javascript"></script>
</body>
</html>
jQuery:
$(document).ready(function () {
$('table tbody tr td').on('click', function () {
$("#myModal").modal("show");
$("#txtfname").val($(this).closest('tr').children()[0].textContent);
$("#txtlname").val($(this).closest('tr').children()[1].textContent);
});
});
I have even tried adding these at the end still no difference:
<script src= "http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
The result: All components of html show and no JS functionality seems to be present