Click here to Skip to main content
15,922,155 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
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>
Posted
Comments
Richard Deeming 22-May-24 3:43am    
No sign of the button that's supposed to open the modal, nor any script that would open the modal, nor any sign that you've included the relevant Bootstrap CSS and JS files correctly.

All we can do is point you to the Bootstrap documentation[^] - pick the version you're using, and compare the examples to your code.
Gcobani Mkontwana 22-May-24 7:47am    
@Richard Deeming, let me use the documentation it will help me to identify the problem along with my current code.
theDiscountCodes 24-May-24 7:45am    
is it solved?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900