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.
Example: Index.html page which gives 3 links to different pages, these links are not directed with href but with AJAX (without changing the URL). The content of the div is changed without refreshing the page and without changing the URL.
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>
<style>
ul{
list-style: none;
}
li{
display: inline;
}
</style>
</head>
<body>
<!-- Menu for links to pages -->
<div id="menu">
<ul>
<li><a href="#" onclick="showPage('1')">Page 1</a></li>
<li><a href="#" onclick="showPage('2')">Page 2</a></li>
<li><a href="#" onclick="showPage('3')">Page 3</a></li>
</ul>
</div>
<!-- HTML page is added without change in the URL address -->
<div id="content"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
/* Loads html page by AJAX in the content div */
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>