<script type="text/javascript">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https:code.jquery.com/jquery-3.5.1.js"></script>
<script src="https:cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https:cdn.datatables.net/1.10.24/js/dataTables.jqueryui.min.js"></script>
<script src="https:cdn.datatables.net/scroller/2.0.3/js/dataTables.scroller.min.js"></script>
$('#example').on('click', 'tr', function (e) {
$('#my_modal').modal('show');
e.preventDefault();
var UserID = $(this).find('td:eq(1)').text();
//$(".modal-body #txtUserIDEdit").val(UserID);
$("[id$='txtUserIDEdit']").val(UserID);
var UserName = $(this).find('td:eq(2)').text();
//$(".modal-body #txtUserNameEdit").val(UserName);
$("[id$='txtUserNameEdit']").val(UserName);
GetSaveRecord();
GetUserPassword();
});<table id="example" class="display" style="width: 100%">
<thead>
<tr><th>S.No</th>
<th>User Login</th>
<th>User Name</th>
<th>Plant</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{
[
"1",
"Armand",
"Warren",
"56045",
"Taiwan, Province of China"
],
}
</tbody>
</table>
<div class="modal" id="my_modal">
<div class="modal-dialog">
<div class="modal-content" style="width: 600px;">
<div class="modal-header">
<b style="font-size: 25px; text-align: center;">FAV-VS Edit Details</b>
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span></button>
</div>
<div class="modal-body">
<table border="0" class="width100p">
<tr>
<td>
<%--<div class="ui-tabs ui-widget ui-widget-content ui-corner-all"> class="contentTable" id="trdisplaytable"--%>
<%-- <table id="tblEdit">--%>
<%-- <tr>--%>
<%-- <td>--%> <%-- class="ui-corner-all contentTable"--%>
<table>
<tr>
<td><b>User ID</b><span class="requierdField"><b>*</b> </span></td>
<td>
<asp:TextBox ID="txtUserIDEdit" ForeColor="#808080" CssClass="width50p input-tb" ReadOnly="true" runat="server" MaxLength="150"
Width="200px"></asp:TextBox>
</td>
<td><b>User Name</b><span class="requierdField"><b>*</b> </span></td>
<td>
<asp:TextBox ID="txtUserNameEdit" ForeColor="#808080" CssClass="width50p input-tb" ReadOnly="true" runat="server" MaxLength="150"
Width="200px"></asp:TextBox>
</td>
</tr>
<tr>
<td><b>Password</b><span class="requierdField"><b>*</b> </span></td>
<td>
<asp:TextBox ID="txtPassword" CssClass="width50p input-tb" runat="server" MaxLength="10" TextMode="Password"
Width="200px"></asp:TextBox>
</td>
<td><b>Confirm Password</b><span class="requierdField"><b>*</b> </span></td>
<td>
<asp:TextBox ID="txtConfirmPassword" CssClass="width50p input-tb" runat="server" MaxLength="10" TextMode="Password"
Width="200px"></asp:TextBox>
</td>
</tr>
<tr>
<td> <b>Status</b><span class="requierdField"><b>*</b> </span></td>
<%--<td>
<input type="radio" name="Status" value="Active" /><b>Active</b>
<input type="radio" name="Status" value="Inactive" /><b>Inactive</b>
</td>--%>
<td>
<asp:RadioButtonList ID="RadioButtonList" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Text="Active" Value="Active"></asp:ListItem>
<asp:ListItem Text="Inactive" Value="Inactive"></asp:ListItem>
</asp:RadioButtonList>
</td>
<td> <b>Plant</b><span class="requierdField"><b>*</b> </span></td>
<td>
<div id="checkboxplant" style="width: 100%; border: groove; height: 110px; overflow: auto">
<asp:CheckBoxList ID="chkPlantsAddNew" class="MyClass" runat="server">
</asp:CheckBoxList>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="btnUpdate">Update</button>
</div>
</div>
</div>
</div>I am using jquery datatable as i am using sorting functionality of jquery datatable and also I am using click event of each row
{I am just opening modal popup on click of Row}
But it was happaning on click of header too. that i want to prevent, is there any wat to achieve same.
click event of Row
$('#example').on('click', 'tr', function (e) {
$('#my_modal').modal('show');
e.preventDefault();
var UserID = $(this).find('td:eq(1)').text();
//$(".modal-body #txtUserIDEdit").val(UserID);
$("[id$='txtUserIDEdit']").val(UserID);
var UserName = $(this).find('td:eq(2)').text();
//$(".modal-body #txtUserNameEdit").val(UserName);
$("[id$='txtUserNameEdit']").val(UserName);
GetSaveRecord();
GetUserPassword();
});
To Prevent Header Information
$('#example thead th').click(function () {
var $select = $('<select><option value=""></option></select>').on('click', function (e)
{ console.log(" click on select in column =" + $column.data()); e.stopPropagation(); });
});
But no success. Can you please help me on same.
