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);
});
});
我有一个包含 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);
});
});