如何通过javascript将数据动态显示到引导面板中？
如何通过javascript将数据动态显示到引导面板中？
提问于 2016-08-01 07:09:32
当我单击任何面板时，如何将数据动态显示到引导面板中?当我单击每个面板时，该数据仅显示在第一个面板中。
索引
<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);
}
});
}
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-08-01 07:16:33
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);
}
});
}Stack Overflow用户
发布于 2016-08-01 07:17:01
这是因为您将ajax调用的响应注入到id为file的div中，这将始终将其添加到第一个面板中。尝试向由id构造的文件div添加一个类，然后将其注入到该元素中。就像..。
<div class="file_@item.Id"></div>然后做
$(".file_" + id).html(response);在你的成功回调中
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38692859
复制相关文章
相似问题
腾讯云开发者
