Bootstrap 3 - 将页面刷新到特定选项卡

Bootstrap 3 - Refreshing page to specific tab

我有一个包含 5 个选项卡的页面 - 单击任何选项卡上的“保存”按钮后,它应该执行验证和将数据发布到控制器等任务 - 工作正常。一旦 Ajax 调用 returns 成功,它会调用一个警报让用户知道它已成功保存数据,然后(这是它出错的地方)刷新页面;返回同一标签。

目前只是将URL栏地址修改为右侧标签,并没有真正刷新页面。 我必须在 URL 栏上手动按回车键才能刷新。

我的 document.ready 中有此代码:

$(function () {
            var hash = window.location.hash;
            hash && $('ul.nav a[href="' + hash + '"]').tab('show');

            $('.nav-tabs a').click(function (e) {
                $(this).tab('show');
                var scrollmem = $('body').scrollTop();
                window.location.hash = this.hash;
                $('html,body').scrollTop(scrollmem);
            });
        });

这是我的 Ajax 功能 - 它有效,但刷新页面的代码在上面详述了。

$.ajax({
     type: "POST",
     url: '@Url.Action("AddNewAssessment","ChangeManagement")',
     dataType: "text",
     contentType: "application/json; charset=utf-8",
     data: JSON.stringify(dataList)
}).done(function (data) {
     if (data == "Success") {
         alert("Saved successfully");
         var test = window.location.href + "tab_Assessment";
         window.location.href = test;
      }
}).fail(function () {
     alert("There was a problem, please try again.");
});

我做错了什么?

根据我所做的研究,似乎没有人遇到过这个问题(我查看了多个 SO 问题。)

您不应使用 location.href 来更改选项卡。 查找 Bootstrap-Doku 关于选项卡以手动更改选项卡。

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

好的,所以我设法弄明白了。 我没有尝试根据我所在的功能加载页面,而是简单地使用 localStorage 来保存我来自哪个选项卡,然后一旦我重新加载页面,我就可以访问 localStorage 并打开该选项卡。

                    $.ajax({
                        type: "POST",
                        url: '@Url.Action("etc","data")',
                        dataType: "text",
                        contentType: "application/json; charset=utf-8",
                        data: JSON.stringify(dataList)
                    }).done(function (data) {
                        if (data == "Success") {
                            alert("Edit successful");
                            localStorage.setItem('tab', "CAB");
                            location.reload();
                        }
                    }).fail(function () {
                        alert("There was a problem, please try again.");
                    });

在 document.ready:

    $(document).ready(function () {
    if (localStorage.getItem('tab')) {
        var tab = "#tab_" + localStorage.getItem('tab');
        $('[href=' + tab + ']').tab('show');
        localStorage.clear();
    }

    $(function () {
        var hash = window.location.hash;
        hash && $('ul.nav a[href="' + hash + '"]').tab('show');

        $('.nav-tabs a').click(function (e) {
            $(this).tab('show');
            var scrollmem = $('body').scrollTop();
            window.location.hash = this.hash;
            $('html,body').scrollTop(scrollmem);
        });
    });