我怎样才能显示数据到JavaScript的动态引导面板？ [英] How can i show data into bootstrap panel dynamically by javascript?

问题描述

索引

如何在动态显示数据到引导面板时点击任何面板？当我点击每个面板数据只显示到第一个面板。 p>

index

 <div class="panel panel-info class" style="height: 450px; width: 300px; overflow-y:scroll;">
       @foreach (var item in lstCategory)
       {
            <div class="panel-heading" id="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" onclick="collapse(@item.Id);" data-parent="#accordion" href="#@item.Id">@item.Name</a>
                </h4>
        </div>

       <div id="@item.Id" class="panel-collapse collapse in">
           <div id="file">
           </div>
        </div>

       }

</div>

javascript

javascript

   function collapse(id) {
    var id = id;

                $.ajax({
                    type: "GET",
                    url: "/Document/GetFileList",
                    data:{id:id},
                    success: function (response) {
                        //var panelbar = $find("<%= %>");
                        $("#file").html(response);


                    }
                });
}

推荐答案

即使您有多个div，因为您不会区分每个div的id。

This line on your javascript code adds everything on the same div, even if you have multiple divs, because you do not distinct the id of each div.

$("#file").html(response);

解决方法是使用 @item为每个div添加不同的ID。 Id 然后使用该id将正确的内容添加到正确的id。

The solution is to add different ids on each div using the @item.Id and then use that id to add the correct content on the correct id.

例如，在div上添加id

Eg add the id on the div

<div id="[e-mail]">
</div>

然后在javascript上使用id来查找div。

then on javascript use the id to find that div.

function collapse(id) {
    var id = id;
    $.ajax({
        type: "GET",
        url: "/Document/GetFileList",
        data:{id:id},
        success: function (response) {
            $("#file_" + id).html(response);
        }
    });
}

这篇关于我怎样才能显示数据到JavaScript的动态引导面板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！