[英]Reload tab on button click
我有一个包含选项卡和子选项卡的表单,如下所示:
<div id="tabs">
<ul>
<li><a href="#tab_details">Details</a></li>
<li><a href="#tab_dia">DIA</a></li>
</ul>
<div id="tab_details">
<code>
</div>
<div id="tab_dia">
<div id="dia_sub_tabs">
<ul>
<li><a href="#DIA_details">DIA Details</a></li>
<li><a href="#IA_info">IA Information</a></li>
</ul>
<div id="DIA_details">
<code>
</div>
<div id="IA_info">
<code>
</div>
</div>
</div>
</div>
我正在使用javascript从表单中单击按钮时分别保存每个选项卡的数据:
<span><a href="javascript:void(0)" id="save_changes_id" class="button_links">Save Changes</a></span>
JS代码如下:
$("#save_changes_id").click(function() {
// To retrieve the current TAB and assign it to a variable ...
var curTab = $('.ui-tabs-active');
var curTabPanelId = curTab.find("a").attr("href");
if(curTabPanelId == "#tab_dia"){
var curTab = $('#dia_sub_tabs .ui-tabs-active');
var curTabPanelId = curTab.find("a").attr("href");
}
responseData = doAjaxCall($(curTabPanelId + " form"));
if(responseData == 1)
showMessage('status_msg', 'Project details updated successfully', 'green');
else
showMessage('status_msg', 'Error: Please check all the fields', 'red');
});
我想要的是每次我单击保存按钮时重新加载页面,并显示重新加载后从中进行保存的活动选项卡。
我尝试给window.location.reload(),但是在重新加载后显示第一个选项卡,而不显示之前处于活动状态的选项卡。
请为此提出解决方案。 提前致谢。
如果您重新加载页面,那么您将无法具有js状态,因为它也会被重新加载。 一种无需联系服务器就ui行为进行联系的方法是将active选项卡作为参数传递给anchor / window.location.hash或url查询参数。 然后从您的js中,您可以从window.location解析URL并相应地调整您的ui。
其他方法可能是使用cookie,html5网络存储(本地存储,会话存储)。 但是,对于您的情况,我认为最精简和用户友好的方式(例如可添加书签的网址)将是使用该网址。
$(document).ready(function () {
$(this).parent('li').addClass('ui-tabs-active');
var activeTab = window.location.hash;
$('a[href="' + activeTab + '"]').parent('li').addClass('ui-tabs-active');
$('a').click(function () {
$('li.ui-tabs-active').removeClass('ui-tabs-active');
$(this).parent('li').addClass('ui-tabs-active');
});
$("#save_changes_id").click(function () {
var curTab = $('.ui-tabs-active');
var curTabPanelId = curTab.find("a").attr("href");
window.location.href = window.location.href.split("#")[0] + curTabPanelId;
window.location.reload();
/*
if(curTabPanelId == "#tab_dia"){
var curTab = $('#dia_sub_tabs .ui-tabs-active');
var curTabPanelId = curTab.find("a").attr("href");
}
responseData = doAjaxCall($(curTabPanelId + " form"));
if(responseData == 1)
showMessage('status_msg', 'Project details updated successfully', 'green');
else
showMessage('status_msg', 'Error: Please check all the fields', 'red');*/
});
});
看看小提琴,为了清楚起见,已注释掉与ajax相关的代码。 单击时将添加活动类,您可能还有一些其他过程,仅添加了此过程是为了演示选择/选项卡的选择以及重新加载后如何对其进行处理。 http://jsfiddle.net/ChTGc/4/show/
试试这个逻辑,
单击保存按钮后,您将...
$("#save_changes_id").click(function() {
// set the active tab id in localStorage against key 'ACTIVE_TAB_ID'
window.localStorage.setItem('ACTIVE_TAB_ID',yorActiveTabId);//yorActiveTabId is js varible which contains active tab id.
});
现在重新加载页面后,获取活动标签的ID,例如...
var activeTabId=window.localStorage.getItem('ACTIVE_TAB_ID');
现在使用js,您可以使用“ activeTabId”添加类以将其激活至标签页
您可以使用sessionStorage代替localStorage,但是在关闭浏览器后,您的数据将丢失,但是如果您使用localStorage,则数据将不会终身丢失。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.