在刷新AJAX之后使打开的可折叠面板保持打开状态

Question

我有一个局部视图的主页。 局部视图每60秒刷新一次，我使用AJAX加载局部视图。 主页的代码以及脚本和样式如下。

@{
ViewBag.Title = "Home Page";
}
@model SampleApp1.Models.Model1

<style>
.panel-heading .accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
content: "\e114";    /* adjust as needed, taken from bootstrap.css */
float: right;        /* adjust as needed */
color: grey;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
content: "\e113";    /* adjust as needed, taken from bootstrap.css */
}

</style>

<div id="MainPage">
@Html.Partial("_PartialPage1")
</div>


<script>
window.setInterval(function () {
    loadView();
}, 60000
    );

function loadView() {
headerArray=$('#accordion').find('[aria-expanded=true]').closest('a');
bodyArray=$('#accordion').find($('.in'));
    var targetUrl = '/Home/GetIndex';
    $.ajax({
        url: targetUrl,
        type: 'GET',
        cache: true,
        async: true,
    }).done(function (partialViewResult) {
        $("#MainPage").html(partialViewResult);
jQuery.each(headerArray, function (index, item) {
    $(this).removeClass('collapsed');
    $(this).attr('aria-expanded=true');
    console.log($(this))
});
jQuery.each(bodyArray, function (index, item) {
    $(this).addClass('in');
    $(this).attr('aria-expanded=true');
    console.log($(this))
});

    });
}

局部视图基本上是使用可折叠面板开发的一组选项卡。 我试图存储打开的面板，然后在刷新屏幕后将其加载为打开状态。

<div class="panel-group" id="accordion">
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a class="accordion-toggle collapsed" data-toggle="collapse"  href="#collapseOne">
               @Model.Header1
            </a>
        </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
        <div class="panel-body">
            @Model.Tab1
        </div>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a class="accordion-toggle collapsed" data-toggle="collapse"  href="#collapseTwo">
                @Model.Header2

            </a>
        </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
            @Model.Tab2
        </div>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a class="accordion-toggle collapsed" data-toggle="collapse"  href="#collapseThree">
                @Model.Header3

            </a>
        </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
        <div class="panel-body">
            @Model.Tab3
        </div>
    </div>
</div>

我的脚本似乎无法正常工作，刷新后所有面板都合拢。 我想念什么吗？ 还有另一种方法吗？

编辑：在AJAX部分内添加代码没有帮助。 当我从控制台调试时，选项卡将一直打开，直到loadView函数为止，并且当控件返回到60,000时，它似乎崩溃了。

这个问题与我的问题非常相似，这个问题也没有解决。

Answer 1

如下更改您的loadView函数以存储展开的面板ID，然后在设置html之后再次将其展开。

function loadView() {
var headerArray = [];
$('#accordion .in').each(function() {
    headerArray.push(this.id);
});
var targetUrl = '/Home/GetIndex';
$.ajax({
    url: targetUrl,
    type: 'GET',
    cache: true,
    async: true,
}).done(function(partialViewResult) {
    $("#MainPage").html(partialViewResult);
    $.each(headerArray, function(index, item) {

        $("#" + item).collapse('show');
    });

});
}

在此处检查更新的小提琴。 希望这对您有所帮助。

Answer 2

将打开的标签代码放在ajax.done方法中，如下所示：

$.ajax({
    url: targetUrl,
    type: 'GET',
    cache: true,
    async: true,
}).done(function (partialViewResult) {
    $("#MainPage").html(partialViewResult);
    jQuery.each(headerArray, function (index, item) {
       $(this).click();
   });
});