BootStrap: page refresh on below navbar

Question

I have a navbar that is horizontal built using bootstrap. When I select a menu option, I want only the part below the navbar to refresh. So, say I select Menu 1, I want only the part below the bar to refresh

Questions 1. How can I achieve that?
2. If I design a completely new page and have the navbar there, will it have same effect.

Answer 1

What you are looking for is Ajax. Since you are using bootstrap you will already be using jquery. Jquery has ajax functions that will load external content using server side javascripting. So you can create a content div and then load and remove data inside this div. To learn about ajax you can check out the documentation for it here Jquery ajax documentation. And SitePoint has a pretty good tutorial for it here SitePoint jquery ajax tutorial. You can also google this and find many other tutorials on how to set up ajax calls. To test your code you will obviously need to use a server or a local program like xampp.

A very easy way is to use the jquery load function which is an easy ajax call and you can read on this here Jquery Load. You could just empty your content div using jquery empty and then load the next pages content div into it.

That being said from your question it seems like you may be looking for full functionality of back button and changing of titles and things to that nature. This will require more scripting using the html5 History Api to handle browser back and forward buttons. Then to change the titles in the browser tabs will take more scripting. Also with javascript disabled and older browsers your site may not work as expected.

In this case you may want to look into an ajax library that will handle the use of the browsers back button, and the changing of the titles in the browser tabs and many more things. There are many of these libraries as well and if you have limited knowledge of ajax you may want to look into these because it might make your life a bit easier. These libraries include pjax, turbolinks, and wiselinks. I personally really like wiselinks. It will give you full functionality like you are browsing a normal page but will pull content from another page and insert it into a content div on your page instead of reloading the page. So you can place your menu, footer and other things that will remain the same throughout your site like sidebars on your page and then just replace the content. It also makes for an extremely fast browsing experience because you are not loading the full page just content. You can find wiselinks here Wiselinks. You can get started with this very easily just include the wiselinks javascript to your project and link to it after jquery. Then you can initiate it with a ready function and state your content container something like so:

$( document ).ready(function() {
    window.wiselinks = new Wiselinks($('#your-content-container'));
});

And write your links like so adding the data attribute data-replace="true":

<a href="your-page-url.html" data-replace="true">Page Title</a>

Anyway I hope this all helps and I think you may need to read up on all of the different ways to make an ajax call before deciding which method you would like to implement. But seeming as though you didn't post any code and were wondering how to achieve this in the first place you may want to opt for one of ajax libraries. Let me know if you have any questions in the comment section below and good luck.

Answer 2

You can achieve this using toggleable / Dynamic nav Tabs

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

Yes it will have the same effect in the newly created page as well if you use proper ids.

a normal navbar with toggleable tabs

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav nav-tabs">
      <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
      <li><a data-toggle="tab" href="#page1">Page 1</a></li>
      <li><a data-toggle="tab" href="#page2">Page 2</a></li>
      <li><a data-toggle="tab" href="#page2">Page 3</a></li>
    </ul>
  </div>
  </nav>
  <div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="page1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="page2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
   <div id="page3" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>