时间戳

首页 > 解决方案 > 使用 Jquery 和 Ajax 的手风琴列表

javascript - 使用 Jquery 和 Ajax 的手风琴列表

问题描述

我正在尝试实现手风琴列表。所以基本上这是一个引导手风琴。手风琴的标题已经由 PHP 设置。当用户单击手风琴时，它必须显示来自服务器的会话列表。我正在为此使用ajax调用，每次单击手风琴时都会出现问题，只有第一个元素会得到结果。其他元素没有得到结果，只是显示了一个空白视图。我对 jquery 还很陌生。这是我的 HTML 代码

<div class="accordion" id="myAccordion">
    <?php foreach($modules as $module): ?>
    <div class="card">
        <div class="card-header" id="headingOne">
            <h2 class="mb-0">
                <button id="<?php echo $module->id;?>" type="button" class="btn" data-toggle="collapse"
                    data-target="#collapse<?php echo $module->id; ?>"><?php echo $module->module_name; ?></button>
            </h2>
        </div>
        <div id="collapse<?php echo $module->id; ?>" class="collapse" aria-labelledby="headingOne"
            data-parent="#myAccordion">
            <div class="card-body">
                <ul id="sessionlist" class="list-group list-group-flush">
                    <li class="list-group-item">
                        <i class="icon-play_circle_outline text-blue"></i><a href="#">'+data[i].session_name+'</a>' +
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <?php endforeach; ?>
</div>

这是我的 Jquery 和 ajax 代码

<script type="text/javascript">
    $(document).ready(function () {
        $("button").click(function () {
            $.ajax({
                url: "<?php echo base_url(); ?>dashboard/displaysession/" + this.id,
                type: 'GET',
                data: {},
                error: function () {
                    alert('Something is wrong');
                },
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        var myhtmlstring = '<li class="list-group-item">' +
                            '<i class="icon-play_circle_outline text-blue"></i><a href="#">' +
                            data[i].session_name + '</a>' +
                            '</li>';
                        console.log($.parseHTML(myhtmlstring));
                        $("#sessionlist").append($.parseHTML(myhtmlstring));
                    }
                },
                dataType: 'json'
            });
        });
    });

</script>

真的很感谢你的帮助

标签： javascriptjqueryajax

解决方案

您还需要为您的会话列表提供唯一的 ID。因为当您将 myhtmlstring 附加到 #sessionlist 时，它只需要第一个。

<ul id="sessionlist<?php echo $module->id; ?>" class="list-group list-group-flush">
   <li class="list-group-item">
     <i class="icon-play_circle_outline text-blue"></i><a href="#">'+data[i].session_name+'</a>' +
   </li>
</ul>

然后你可以在你的ajax成功中将它附加到正确的会话列表中：

<script type="text/javascript">
    $(document).ready(function () {
        $("button").click(function () {
            const currentModuleId = this.id
            $.ajax({
                url: "<?php echo base_url(); ?>dashboard/displaysession/" + currentModuleId ,
                type: 'GET',
                data: {},
                error: function () {
                    alert('Something is wrong');
                },
                success: function (data) {
                    $("#sessionlist" + currentModuleId ).html("");
                    for (var i = 0; i < data.length; i++) {
                        var myhtmlstring = '<li class="list-group-item">' +
                            '<i class="icon-play_circle_outline text-blue"></i><a href="#">' +
                            data[i].session_name + '</a>' +
                            '</li>';
                        console.log($.parseHTML(myhtmlstring));
                        $("#sessionlist" + currentModuleId ).append($.parseHTML(myhtmlstring));
                    }
                },
                dataType: 'json'
            });
        });
    });

</script>

推荐阅读