gciraman2024
Member
- Joined
- May 19, 2024
- Messages
- 9
- Programming Experience
- 3-5
Hi Team
I need some help, i am trying to debug why this modal form is not displaying when clicked on the form. I dont see any problem when inspecting the element.
I need some help, i am trying to debug why this modal form is not displaying when clicked on the form. I dont see any problem when inspecting the element.
Modal form not displaying:
<!--Modal form for Responsible Person-->
<div class="modal fade" id="responsilePersonModal" tabindex="-1" role="dialog" aria-labelledby="responsileModalLabel" aria-haspopup="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="responsileModalLabel">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">
<div class="input-group">
<input type="text" id="searchPeopleInput" class="form-control" placeholder="SearchPeople">
<div class="input-group-append">
<button class="btn btn-outline-secondary" id="searchPeopleBtn" type="button">
class="fas fa-search">Search
</button>
</div>
</div>
</div>
<!--Style background for the container-->
<style>
.light-grey-list li {
background-color: #808080; /* Dark Grey color */
padding: 5px;
</style>
<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="userPeopleTbl">
<thead>
<tr>
<th>Display Name</th>
<th>E-mail Address</th>
<th>Tittle</th>
<th>Department</th>
<th>Presence</th>
<th>Work Phone</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<!--Table Body Content-->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!--Search for active users at the organisation-->
<script>
$(document).ready(function () {
// function to handle search button
$('#searchPeopleBtn').on('click', function () {
var searchTrm = $('#searchPeopleInput').val().trim();
if (searchTrm !== '') {
// send ajax request to the controller to search for users.
$.ajax({
url: '@Url.Action("SearchUsers", "Home")',
type: 'POST',
dataType: 'json',
data: { searchTrm: searchTrm },
success: function (data) {
// clear previous search results
$('#userPeopleTbl tbody').empty();
// iterate through the retrieved user details.
$.each(data, function (index, userppl) {
var row = '<tr>' +
'<td data-email="' + userppl.Email + '">' + userppl.DisplayName + '</td>' +
'<td>' + userppl.Email + '</td>' +
'<td>' + userppl.Title + '</td>' +
'<td>' + userppl.Department + '</td>' +
'<td>' + userppl.Presence + '</td>' +
'<td>' + userppl.WorkPhone + '</td>' +
'<td>' + userppl.Location + '</td>' +
'</tr>';
$('#userPeopleTbl tbody').append(row);
});
// show modal with search results
$('#responsilePersonModal').modal('show');
//update the 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', '#userPeopleTbl tbody tr', function () {
$('#userPeopleTbl tbody tr').removeClass('selected');
// add selected class to the clicked row
$(this).addClass('selected');
});
// function to handle OK button
$('#okButtonPeople').on('click', function () {
var selectedUserPpl = $('#userPeopleTbl tbody tr.selected td:first').text();
$('#responsible_person').val(selectedUserPpl);
//close the modal
$('#responsilePersonModal').modal('hide');
});
// function to handle modal close event
$('#responsilePersonModal').on('hidden.bs.modal', function () {
// clear the search
$('#searchPeopleInput').val('');
$('#userPeopleTbl tbody tr').removeClass('selected');
});
// function to show user email address on mouse hover.
$(document).on('mouseenter', '#userPeopleTbl tbody tr td', function () {
var email = $(this).data('email');
$(this).attr('title', email).tooltip();
});
});
</script>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="okButtonPeople">Ok</button>
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal" id="cancelPeopleBtn">Cancel</button>
</div>
</div>
</div>
</div>
<!-- Cancel the and close the form-->
<script>
$(document).ready(function () {
$('#okButtonPeople').click(function () {
$('#responsilePersonModal').modal('hide');
});
//function to cancel button click
$('#cancelPeopleBtn').click(function () {
$('#responsilePersonModal').modal('hide');
});
// function to handle the modal close event
$('#responsilePersonModal').on('hidden.bs.modal', function () {
console.log('Modal closed');
});
});
</script>
</div>
