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

Question

我有一个包含 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 问题。）

Answer 1

您不应使用 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)

Answer 2

好的，所以我设法弄明白了。我没有尝试根据我所在的功能加载页面，而是简单地使用 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);
        });
    });

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

Bootstrap 3 - Refreshing page to specific tab

javascript

ajax

redirect

href

razor