CODEWITHSUNDEEP
jqueryhtmlonclickloadrefresh
Tasos
Tasos

Reputation: 1642

Refresh html loaded on div using jQuery?

I am making a website and I use jQuery to load my html pages inside divs, so the main index html remains intact that way. The problem is that if a user is browsing an html that loads inside a div and tries to refresh his browser(F5) the content gets "lost" since it's only one page(index.html).

Is there a way to get around this?

<a onclick='$("#content").load("page1.html");'>Page1</a> 
<div id="content"></div>

Upvotes: 0

Views: 6329

Answers (1)

Alex
Alex

Reputation: 10216

There's two solutions for that. If a user clicks a link, you add a hashtag to the url. For example:

<a onclick='$("#content").load("page1.html"); window.location.hash = "page1.html";'>Page1</a>

Then, in your jQuery, you check for a hashtag when a user visits the site:

$(function() {
    if (window.location.hash.length) {
        var hash = window.location.hash.replace('#', '');

        $("#content").load(hash);
    }
});

Secondly, you could use cookies but I think the hash way works fine, too :)

Upvotes: 3

Related Questions