Farooq Ahmad Farooq Ahmad - 4 months ago 40
HTML Question

Refresh page on tab click bootstrap

I create tabs to play videos, and need to refresh page while some one click on other tab to play other video. I attached script to remain on same page and reload page but reload not pause the video but reload shortly not clearly.

Not whole page refresh on tab click??

HTML Part:

<div id="tabs-list">
<ul class="nav nav-tabs nav-justified" id="myTab">
<li class="active"><a href="#t1" data-toggle="tab">Live 1</a></li>
<li><a href="#t2" data-toggle="tab">Live 2</a></li>
<li><a href="#t3" data-toggle="tab">Live 3</a></li>
<li><a href="#t4" data-toggle="tab">Live 4</a></li>

<div class="tab-content">
<div id="t1" class="tab-pane fade in active"><?php echo get_post_meta( $post->ID, 'live1', true ); ?></div>
<div id="t2" class="tab-pane fade"><?php echo get_post_meta( $post->ID, 'live2', true ); ?></div>
<div id="t3" class="tab-pane fade"><?php echo get_post_meta( $post->ID, 'live3', true ); ?></div>
<div id="t4" class="tab-pane fade"><?php echo get_post_meta( $post->ID, 'live4', true ); ?></div>


<script type="text/javascript">

$(document).ready(function() {
$('#tabs-list').click(function() {

$('#myTab a').click(function(e) {
$("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) {
var id = $(e.target).attr("href").substr(1);
window.location.hash = id;
var hash = window.location.hash;
$('#myTab a[href="' + hash + '"]').tab('show');



You should use the location.reload(true) overload which makes it not to be loaded from the cache.

The true parameter makes it not to be read from cache. You can reload the page with the help of anyone of these function, they should work.

  1. location.reload()
  2. history.go(0)
  3. location.href = location.href
  4. location.href = location.pathname
  5. location.replace(location.pathname)
  6. location.reload(false)

for Reference from the other SO Question