Change html content and url without reloading the page

Question

I see many websites such as gitHub changing it's html content and URL without refreshing pages.
I find one possible way to do this in HTML Histroy API.
Here is the code.
HTML

 <div class="container">
 <div class="row">
    <ul class="nav navbar-nav">
        <li><a href="home.html" class="historyAPI">Home</a></li>
        <li><a href="about.html" class="historyAPI">About</a></li>
        <li><a href="contact.html" class="historyAPI">Contact</a></li>
    </ul>
 </div>
 <div class="row">
    <div class="col-md-6">
        <div class="well">
            Click on Links above to see history API usage using   <code>pushState</code> method.
        </div>
    </div>
    <div class="row">    
        <div class="jumbotron" id="contentHolder">
            <h1>Home!</h1>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>
    </div>
   </div>
  </div>

home.html

 This is home page

about.html

 This is about page

contact.html

 That one is content page

JAVASCRIPT

 <script type="text/javascript">
jQuery('document').ready(function(){

    jQuery('.historyAPI').on('click', function(e){
        e.preventDefault();
        var href = $(this).attr('href');

        // Getting Content
        getContent(href, true);

        jQuery('.historyAPI').removeClass('active');
        $(this).addClass('active');
    });

});

// Adding popstate event listener to handle browser back button  
window.addEventListener("popstate", function(e) {

    // Get State value using e.state
    getContent(location.pathname, false);
});

function getContent(url, addEntry) {
    $.get(url)
    .done(function( data ) {

        // Updating Content on Page
        $('#contentHolder').html(data);

        if(addEntry == true) {
            // Add History Entry using pushState
            history.pushState(null, null, url); 
        }

    });
}
 </script>

This code is working fine even you go back or forward in browser.
But the problem is that when you refresh page it only shows the file which is being refreshed. For example, if you refresh the about.html then only the following will show: This is the about page.

Unlike the gitHub it can't show the complete page. As you see in gitHub, even you refresh a page it will show the page same as how it was before refreshing.

How can I do that?

Thanks...

if you want to set the default page every time when you refresh then you can use ajax onload of window but that is not recommended but if you want it you have that option — Domain, Oct 28 '15 at 11:30
Possible duplicate of [Good tutorial for using HTML5 History API (Pushstate?)](http://stackoverflow.com/questions/4015613/good-tutorial-for-using-html5-history-api-pushstate) — Cristik, Oct 28 '15 at 13:15

Temp O'rary · Answer 1 · 2015-10-28T07:25:09.167

0

You may use Routie or Director to do the routing. And within their callback functions write the code to update the part of your HTML page, for this you may use Fragment.js.

edited Oct 28 '15 at 07:25

answered Oct 28 '15 at 07:18

Temp O'rary

4,212
8
37
82

I think `Routie` and `Director` work with hash URL. But in question this is not hash URL. – AzeemHaider Oct 28 '15 at 07:42
This also supports history and URL routing with or without # hash – Temp O'rary Oct 28 '15 at 10:54

score 0 · Answer 2 · answered Oct 28 '15 at 07:40

0

You can change DOM anytime you want without loading the page.

Use fundamental XMLHTTPRequest or Ajax to contact the server without refreshing the browser.

There are many frameworks which offer convenient url routing which can change content automatically without page refreshes. Angular JS is my favorite such framework which offers great routing capability among many other things.

answered Oct 28 '15 at 07:40

Charlie

18,636
7
49
75

Problem is not to change content and url without refreshing page But when user refresh page it will show the page same like which is before refreshing. – AzeemHaider Oct 28 '15 at 07:52
You can handle through url routing and state monitoring. – Charlie Oct 28 '15 at 08:21
I have provided in my answer the links needed. Please see how Angular and $route works. You can then monitor the state once the url routing is there. – Charlie Oct 28 '15 at 08:28

score 0 · Answer 3 · answered Oct 28 '15 at 11:26

0

You have to check/set the value of your variable on the event onload of the page.

answered Oct 28 '15 at 11:26

EC DeV

11
3

score 0 · Answer 4 · answered Nov 03 '15 at 15:54

0

Your code does not work - when you click on a particular link the page does refresh. correct me if i am wrong.

answered Nov 03 '15 at 15:54

Neha

153
2
15

Change html content and url without reloading the page

4 Answers4