AJAX Back button content history

Question

Greets, Before marking this question duplicate, I would like to tell that I have looked every question that could help me but neither of them does. I have a simple example below, your help will be appreciable. I am a newbie, I have seen many jquery plugins for history management but I am unable to implement. Can you direct me some working example with some modification in my given example.

Example: Index.html page which gives 3 links to different pages, these links are not directed with href but with AJAX. The content of the div is changed without refreshing the page.

Problem: I can not track the history, say I clicked page 2 -> page 3 -> page 2 -> page 1 Now, the client wants to go back to previous page (div content). How is this possible.

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Back button/History Problem</title>
</head>
<body>

<a href="#page1" onclick="showPage('1')" rel="tab">Page 1</a>
<a href="#page2" onclick="showPage('2')" rel="tab">Page 2</a>
<a href="#page3" onclick="showPage('3')" rel="tab">Page 3</a>

<!-- HTML page is  added without change in the URL address  -->
<div id="content"></div>

<!-- jQuery library -->
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script>
    function showPage(page) {
        $("#content").load("pages/page" + page + ".html");
    }
</script>
</body>
</html>

page1.html

<h1>Page 1</h1>

page2.html

<h2>Page 2</h2>

page3.html

<h3>Page 3</h3>

possible duplicate of [Getting Backbutton to work in single page website and implementing "speaking" URLs](http://stackoverflow.com/questions/21426140/getting-backbutton-to-work-in-single-page-website-and-implementing-speaking-ur) — dreamweiver, Jul 23 '15 at 08:41

score 1 · Answer 1 · answered Jul 23 '15 at 05:36

Here Is the logic for you . Hope this helps :

Create a variable var stack =[] , add all pages as they are called in it.

Create a function historyReset : where the stack variable will reset back to [] , as user is back on 1st page after traversing all back.

Create a function historyBack : Which will be called when back is clicked. In this function :

Get the top value present in Stack. var stackTop = stack[stack.length - 1];

2.

if(stackTop==undefined){
     historyReset(); 
}else{
     stack.pop(); // remove the top element from stack 
     switch(stackTop){
             case "page1": call page 1 break;
             case "page2": call page 1 break;
             case "page3": call page 1 break;
     }
}

When Ajax is called and page is moved to other page , enter the page value in stack .

var stackPage = 'page3';
stack.push(stackPage);

Can you give me an example of what you want to say in jsFiddle? @vivek-tankaria — Imam Bux, Jul 23 '15 at 06:31
Here is the fiddle for you : http://fiddle.jshell.net/dpwmcu0b/10/ , Keep your console on and check the stack array while you click on load page 1/2/3 and back . Have done minor change in code. — Vivek Tankaria, Jul 23 '15 at 06:51

score -1 · Answer 2 · edited May 23 '17 at 12:30

-1

It's easy to do: Just add history management...

Here is an example for overriding the history back button: override browser back button

With these you just need an self made array which you fill every time the user hits a link and a page got loaded - whenever the user hits the browser back button, you see in the array the last page loaded and reload that page!

edited May 23 '17 at 12:30

Community

1
1

answered Jul 23 '15 at 05:28

Rene Koch

317
3
13

AJAX Back button content history

2 Answers2