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时，它似乎崩溃。

This question与我的问题非常相似，但也没有解决。

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');
    });

});
}

检查更新的小提琴here。希望这会对你有所帮助。

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();
   });
});

在AJAX刷新后保持打开的可折叠面板打开

2 个答案: