No modal form is showing and no errors

See more:

Javascript

HTML5

bootstrap

Hi Team

I have no js errors when debugging the code, but it is not showing when clicking the button the modal form. Am missing something? the logic of this code i am using ldap logic from the controller side and its working on the first form. But the problem second form is not loading the modal and need some help.

What I have tried:

<!--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>