如何通过 javascript 将数据动态显示到引导面板中？答案

【问题标题】：How can i show data into bootstrap panel dynamically by javascript?如何通过 javascript 将数据动态显示到引导面板中？
【发布时间】：2016-08-01 17:45:58
【问题描述】：

当我单击任何面板时，如何将数据动态显示到引导面板中？当我单击每个面板时，数据仅显示在第一个面板中。

索引

 <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

   function collapse(id) {
    var id = id;

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


                    }
                });
}

【问题讨论】：

标签： javascript html ajax asp.net-mvc

【解决方案1】：

您的 javascript 代码中的这一行将所有内容添加到同一个 div 中，即使您有多个 div，因为您没有区分每个 div 的 id。

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

解决方案是使用@item.Id在每个div上添加不同的id，然后使用该id在正确的id上添加正确的内容。

例如在 div 上添加 id

<div id="file_@item.Id">
</div>

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

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

【讨论】：

Aristos，你能告诉我如何获得扩展面板值/ID/名称吗？我试过但总是得到第一个面板名称/ID。 @item.Name var panelId = $(".collapse").attr("name");
@MehediIslam 这是一个不同的问题，你必须对这个问题采取类似的行动
Aristos，我已经发布了我无法解决的这类问题。如果你看到这个并解决这个问题，这将对我有所帮助。 stackoverflow.com/questions/38716995/…

【解决方案2】：

这是因为您将 ajax 调用的响应注入到具有文件 id 的 div 中，这将始终将其添加到第一个面板中。尝试向从 id 构造的文件 div 添加一个类，然后注入该元素。类似...

<div class="file_@item.Id"></div>

然后做

$(".file_" + id).html(response);

在您的成功回调中

【讨论】：

嗨 Bencrinkle，你能告诉我如何获得扩展面板值/ID/名称吗？我试过但总是得到第一个面板名称/ID。 @item.Name var panelId = $(".collapse").attr("name");