Селектор Jquery не работает в модале начальной загрузки (использование codeigniter для загрузки в форме) - PullRequest
Новая
       39

Селектор Jquery не работает в модале начальной загрузки (использование codeigniter для загрузки в форме)

0 голосов
/ 17 февраля 2019

Я пытаюсь создать отфильтрованный список из всех пользователей, но мой jquery не выбирает мое входное значение.Не могли бы вы помочь мне выяснить, что я делаю неправильно?Спасибо: D

Обзор: 

    // This function gets called in the table -> example run = addStudent(3, "Class name");
function addStudent(class_id, class_name) {
    $(".modal-title").text("Leerling toevoegen aan klas " + class_name);
    $(".modal-body").load("<?= site_url("classes/addStudent/");?>" + class_id); // loads in the form -> see other snippet
    $('#classModal').modal('show');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Modal -->
<div class="modal fade" id="classModal" tabindex="-1" role="dialog" aria-labelledby="classModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="classModalLabel">Klassen</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

Форма (загружается в обзор при запуске функции addStudent): 

    $("#search").on("keyup", function () {

    document.getElementById("userList").innerHTML = "";

    if ($("#search").val().length > 1) {
        $('#searchlist').css("display", "block");

        $.ajax({
            url: "<?= site_url('Private_Messages/filterUsers'); ?>",
            method: "post",
            data: {
                filter: $("#search").val()
            },
            success: function (result) {
                result = JSON.parse(result);
                for (var i = 0; i < Object.keys(result).length; i++) {
                    var li = document.createElement('li');
                    li.className = "list-group-item";
                    li.innerHTML = '<a class="link" href="<?= site_url('Private_Messages/openChat/'); ?>' + result[i]['id'] + '">' + result[i]['name'] + '</a>';

                        document.getElementById('userList').appendChild(li);
                }
            }
        });

    } else {
        $('#searchlist').css("display", "none");
    }
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Leerling handmatig toevoegen</label>

<div class="float-right">
 <!-- On key up make ajax call to filter all users and put them in the list underneath. -->
    <input id="search" class="form-inline form-control" type="text" placeholder="Naam"/>

    <!-- loaded popover content -->
    <div id="searchlist" style="display: none;">
        <div id="popover-content">
            <ul class="list-group" id="userList">
                <li class="list-group-item"></li>
            </ul>
        </div>
    </div>
</div>

Когда я запускаю код на моем сервере, он просто возвращает «неопределенные» журналы или ничего не делает.Я не знаю, как исправить, может быть, вы делаете.

1 Ответ

0 голосов
/ 17 февраля 2019

У вас есть две ошибки в вашем JS.Во-первых, вам нужно использовать операторы + при конкатенации строк в JS. 

 $(".modal-body").load("<?= site_url(" + classes/addStudent/ + ");?>" + class_id);

Во-вторых, вам нужно избегать одинарных кавычек, поскольку они являются частью строки, уже использующей одинарные кавычки. 

li.innerHTML = '<a class="link" href="<?= site_url(\'Private_Messages/openChat/\'); ?>' + result[i]['id'] + '">' + result[i]['name'] + '</a>';


    // This function gets called in the table -> example run = addStudent(3, "Class name");
    function addStudent(class_id, class_name) {
        $(".modal-title").text("Leerling toevoegen aan klas " + class_name);
        $(".modal-body").load("<?= site_url(" + classes/addStudent/ + ");?>" + class_id); // loads in the form -> see other snippet
        $('#classModal').modal('show');
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Modal -->
<div class="modal fade" id="classModal" tabindex="-1" role="dialog" aria-labelledby="classModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="classModalLabel">Klassen</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

    $("#search").on("keyup", function () {

        document.getElementById("userList").innerHTML = "";

        if ($("#search").val().length > 1) {
            $('#searchlist').css("display", "block");

            $.ajax({
                url: "<?= site_url('Private_Messages/filterUsers'); ?>",
                method: "post",
                data: {
                    filter: $("#search").val()
                },
                success: function (result) {
                    result = JSON.parse(result);
                    for (var i = 0; i < Object.keys(result).length; i++) {
                        var li = document.createElement('li');
                        li.className = "list-group-item";
                        li.innerHTML = '<a class="link" href="<?= site_url(\'Private_Messages/openChat/\'); ?>' + result[i]['id'] + '">' + result[i]['name'] + '</a>';

                        document.getElementById('userList').appendChild(li);
                    }
                }
            });

        } else {
            $('#searchlist').css("display", "none");
        }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Leerling handmatig toevoegen</label>

<div class="float-right">
 <!-- On key up make ajax call to filter all users and put them in the list underneath. -->
    <input id="search" class="form-inline form-control" type="text" placeholder="Naam"/>

    <!-- loaded popover content -->
    <div id="searchlist" style="display: none;">
        <div id="popover-content">
            <ul class="list-group" id="userList">
                <li class="list-group-item"></li>
            </ul>
        </div>
    </div>
</div>
...