Responsive Tabs / Posts /

Tab not returning to default on page refresh

1

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!

ccoles3  2 years ago   viewed: 1946    

7 Answers

0

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.


Milo   2 years ago
0

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?

ccoles3
  2 years ago
0

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.

Milo   2 years ago
0

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>

ccoles3
  2 years ago
0

....but the code you posted earlier works very well and does exactly what I want. Thank you so much! :-)

ccoles3
  2 years ago
0

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>

Milo   2 years ago
0

Thank you. Great service and support!

Ccoles3
  2 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • 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;

  • When you want to start a new page for your question: