Hi Team
I have search tab, works fine but now i want to figure out once that data gets retrieved from the active directory. It must displayed to the table body(DisplayName, EmailAddress, Department columns here).
// ajax call
<!--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>
<div class="border p-3 ">
<!-- Dropdown List or Other Content Here -->
</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">
<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>' + 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');
},
error: function (jqXHR, textStatus, errorThrown) {
// Handle error if any
console.error('Error:', textStatus, errorThrown);
}
});
}
});
});
</script>