Hi Team
I need some help, i have a form and its working fine. I only need some help, when i select user details after search. their details from form when i mouse hover i must be able to see user email detail. Kindly please assist and thank you.
<!--Modal form popup for user checks details-->
<div class="modal fade" id="checkDetailsModal" tabindex="-1" role="dialog" aria-labelledby="checkNamesModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="checkDetailsModalLabel">Select People and Groups</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 border-right">
<!-- Left Border: Search -->
<div class="d-flex justify-content-between align-items-center mb-3">
<div class="input-group">
<input type="text" id="searchInput" class="form-control" placeholder="Search">
<div class="input-group-append">
<button class="btn btn-outline-secondary" id="searchButton" type="button">
<i class="fas fa-search"></i> Search
</button>
</div>
</div>
</div>
<!-- Style background for the container -->
<style>
.light-grey-list li {
background-color: #808080; /* Dark Grey color */
padding: 5px;
}
</style>
<!-- List of available users shown -->
<div class="border p-3">
<!-- Ordered List Content Here -->
<ol class="light-grey-list">
<li>
<!-- Users list -->
<img src="/Images/active-directory-users.jpg" alt="Active Directory Icon" class="mr-2" style="width: 30px; height: auto;">
All Users <span id="usersCount" style="display: none;">[<span id="totalUsersCount">0</span>]</span>
</li>
<li>
<!-- Active directory users -->
<img src="/Images/active-directory-users.jpg" alt="Active Directory Icon" class="mr-2" style="width: 30px; height: auto;">
Active Directory <span id="activeCount" style="display: none;">[<span id="activeDirectoryCount">0</span>]</span>
</li>
<li>
<!-- Organisation users -->
<img src="/Images/active-directory-users.jpg" alt="Active Directory Icon" class="mr-2" style="width: 30px; height: auto;">
Organization <span id="orgCount" style="display: none;">[<span id="organizationCount">0</span>]</span>
</li>
</ol>
</div>
</div>
<div class="col-md-6">
<!-- Right Border: Table -->
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="mb-0">Details</h5>
</div>
<div class="border p-3 table-container table-responsive">
<!-- Table with Display Name, E-mail Address, Title, Department, Presence, Work Phone, Location -->
<table class="table table-bordered" id="userTable">
<thead>
<tr>
<th>Display Name</th>
<th>E-mail Address</th>
<th>Title</th>
<th>Department</th>
<th>Presence</th>
<th>Work Phone</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<!-- Table Body Content Here -->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!--search for active users at the organisation-->
<script>
$(document).ready(function () {
// Function to handle search button click event
$('#searchButton').on('click', function () {
var searchTerm = $('#searchInput').val().trim();
if (searchTerm !== '') {
// Send an AJAX request to the controller action to search for users
$.ajax({
url: '@Url.Action("SearchUsers", "Home")',
type: 'POST',
dataType: 'json',
data: { searchTerm: searchTerm },
success: function (data) {
// Clear previous search results
$('#userTable tbody').empty();
// Iterate through the retrieved user details and append them to the table
$.each(data, function (index, user) {
var row = '<tr>' +
'<td data-email="' + user.Email + '">' + user.DisplayName + '</td>' +
'<td>' + user.Email + '</td>' +
'<td>' + user.Title + '</td>' +
'<td>' + user.Department + '</td>' +
'<td>' + user.Presence + '</td>' +
'<td>' + user.WorkPhone + '</td>' +
'<td>' + user.Location + '</td>' +
'</tr>';
$('#userTable tbody').append(row);
});
// Show the modal with search results
$('#checkDetailsModal').modal('show');
// Update user counts
var totalUsers = data.length;
var activeDirectoryCount = data.filter(user => user.Location === 'Active Directory').length;
var organizationCount = data.filter(user => user.Location === 'Organization').length;
$('#totalUsersCount').text(totalUsers);
$('#activeDirectoryCount').text(activeDirectoryCount);
$('#organizationCount').text(organizationCount);
// Show the user counts with brackets
$('#usersCount').toggle(totalUsers > 0);
$('#activeCount').toggle(activeDirectoryCount > 0);
$('#orgCount').toggle(organizationCount > 0);
},
error: function (jqXHR, textStatus, errorThrown) {
// Handle error if any
console.error('Error:', textStatus, errorThrown);
}
});
}
});
// Function to handle selecting a user from the table
$(document).on('click', '#userTable tbody tr', function () {
// Remove the 'selected' class from all rows
$('#userTable tbody tr').removeClass('selected');
// Add the 'selected' class to the clicked row
$(this).addClass('selected');
});
// Function to handle OK button click event
$('#okButton').on('click', function () {
// Get the selected user's display name and set it in the AuditType input field
var selectedUserDisplayName = $('#userTable tbody tr.selected td:first').text();
$('#auditor').val(selectedUserDisplayName);
// Close the modal
$('#checkDetailsModal').modal('hide');
});
// Function to handle modal close event when close button at the top is clicked
$('#checkDetailsModal').on('hidden.bs.modal', function () {
// Clear the search input field and remove the selected class from all rows when the modal is closed
$('#searchInput').val('');
$('#userTable tbody tr').removeClass('selected');
});
// Function to show user email address on mouse hover
$(document).on('mouseenter', '#userTable tbody tr td', function () {
var email = $(this).data('email');
$(this).attr('title', email);
});
});
</script>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="okButton">OK</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal" id="cancelButton">Cancel</button>
</div>
</div>
</div>
</div>