Jquery选择器在bootstrap模式下不起作用(使用codeigniter以表单形式加载)

问题描述 投票:0回答:1

我正在尝试从所有用户创建一个筛选列表,但我的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>

Form(触发函数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>

当我在我的服务器上运行代码时,它只返回'undefined'日志或它什么都不做。我不知道如何修复,也许你这样做。

jquery codeigniter jquery-selectors bootstrap-modal
1个回答
0
投票

您的JS中有两个错误。首先,在JS中连接字符串时需要使用+运算符。

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

其次,你需要转义单引号,因为它们是已经使用单引号的sting的一部分。

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>
© www.soinside.com 2019 - 2024. All rights reserved.