Hello, I am finding that the tab does not return to the default value when the page is refreshed. This cause some odd behaviour on my page. How can I make the tab return to the default on refresh?
Thank you!
It is caused by the default feature of the tab widget:
Tabs visiting history is trackable through the page URL hash.
So when the URL has a hash sign, it will open the tab that is corresponding to the hash ID.
Thank you for sharing this. Hmm, how could I fix that?
I tried removing the # sign but if does not work. Would you have any ideas on how to fix it?
There is a workaround for this. Just add the following cript into your page:
<script>
function onTabSelected(tab, panelId) {
setTimeout(function () { window.location.hash = ''; }, 10);
}
</script> But it has a defect: users cannot go back to the previously visited page by clicking the Back button of the browser.
Thank you, that is very helpful.
Could the following code be changed to read the current open tab. It current looks for clicks, this causes a mismatch when the page is refreshed. P.S: I will certainly be buying more tools from you :-)
<script>
$('#btnPrintbar').css('display','none');
$('#btnPrintlinechart').css('display','block');
$('#btnPrintpie').css('display','none');
$('#line').live("click", function (){
$('#visible').css('display','block');
Chart.resize('100%','100%');
$('#btnPrintbar').css('display','none');
$('#btnPrintlinechart').css('display','block');
$('#btnPrintpie').css('display','none');
});
$('#kpi').live("click", function (){
$('#visible').css('display','block');
Chartbar.resize('100%','100%');
$('#btnPrintlinechart').css('display','none');
$('#btnPrintbar').css('display','block');
$('#btnPrintpie').css('display','none');
});
$('#pie').live("click", function (){
$('#visible').css('display','none');
<?php
foreach($this->reports as $reportName => $reportConfig) {
?>
<?php echo $reportName;?>Chart.resize('100%','100%');
<?php }?>
$('#btnPrintlinechart').css('display','none');
$('#btnPrintbar').css('display','none');
$('#btnPrintpie').css('display','block');
});
});
</script>
....but the code you posted earlier works very well and does exactly what I want. Thank you so much! :-)
You're welcome!
To read the current tab, you can read the hash from the URL, and you can also use the following code to keep track of the update of the hash value:
<script>
var hashID = window.location.hash;
function onTabSelected(tab, panelId) {
hashID = panelId;
}
</script>
Thank you. Great service and support!
If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;
If your question is related to the Responsive Tabs, click:
Ask new question: Responsive TabsOtherwise navigate to one of the following forum categories, and post your question there.
##