Previous and next functionality in javascript

Question

0.00/5 (No votes)

See more:

Hi All,
I am preparing navigation application. In this application I want to place “Previous/Next” buttons on map menu. For this I wrote code in many forms.
Actually at the time of map pan the coordinates in URL are getting change and the URL is not saved in browser history.
Example URL for clarification.
http://network/index.html#/map/17.775178,73.791582,10z

http://network/index.html#/map/16.041423,76.043410,10z

http://network/index.html#/map/11.298843,99.014032,10z

http:// network/index.html#/map/8.944884,99.075045,10z

Based on this type of URLs I want to perform “Previous/Next” functionality.
For this I want to store every URL in array and retrieve the URLs based on index. For this I did following code.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
var URLlist = [];
var ind = 0;
$(document).ready(function () {
$("button").click(function () {
URLlist[ind] = pageURL;
ind = ind + 1;
alert(pageURL);
});
});
function goBkHist(a) {
var l_ref = ind - 2;
var pageURL2 = URLlist[l_ref];
ind = l_ref + 1;
loadURL(pageURL2);
}
function goFdHist(a) {
var l_ref_2 = ind;
var pageURL2 = URLlist[l_ref_2];
ind = l_ref_2 + 1;
loadURL(pageURL2);
}
function loadURL(newLocation) {
window.location = newLocation;
return false;
}
</script>

</head>
<body>
<input type="button" value="Previous " onclick="goBkHist(-1)" />
<input type="button" value="Next" onclick="goFdHist(1)" />
<button type="button">
Get URL</button>
</body>
</html>

By click on “Get URL” I am storing URL into array and click on “Previous/Next” it goes to that URL.
I want to store URLs based on the URL changed in address bar. But I am unable to get URLs based on URL change in Address bar.
I decided to use mouse events to store URLs for this I tried “onmousedown” event to store URL in array but when I click on “Previous/Next” buttons it is not working fine.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
var urllist = [];
var ind = 0;
function whichbutton(event) {
urllist[ind] = pageURL;
ind = ind + 1;
alert(pageURL);
}
function goBkHist(a) {
var l_ref = ind - 2;
var pageURL2 = urllist[l_ref];
ind = l_ref + 1;
loadUrl(pageURL2);
}
function goFdHist(a) {
var l_ref_2 = ind;
var pageURL2 = urllist[l_ref_2];
ind = l_ref_2 + 1;
loadUrl(pageURL2);
}
function loadUrl(newLocation) {
window.location = newLocation;
return false;
}
</script>

</head>
<body>
<div onmousedown="whichbutton(event)">
<input type="button" value="BACK " onclick="goBkHist(-1)" />
<input type="button" value="FORWARD" onclick="goFdHist(1)" />
<button type="button">
Get URL</button>
</div>
</body>
</html>

Any one please tell me possible solution for doing this functionality.
How can I store URLs without any event performance? I want to store URLs into Array at the time of url changed in Address bar.

What I have tried:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
var urllist = [];
var ind = 0;
function whichbutton(event) {
urllist[ind] = pageURL;
ind = ind + 1;
alert(pageURL);
}
function goBkHist(a) {
var l_ref = ind - 2;
var pageURL2 = urllist[l_ref];
ind = l_ref + 1;
loadUrl(pageURL2);
}
function goFdHist(a) {
var l_ref_2 = ind;
var pageURL2 = urllist[l_ref_2];
ind = l_ref_2 + 1;
loadUrl(pageURL2);
}
function loadUrl(newLocation) {
window.location = newLocation;
return false;
}
</script>

</head>
<body>
<div onmousedown="whichbutton(event)">
<input type="button" value="BACK " onclick="goBkHist(-1)" />
<input type="button" value="FORWARD" onclick="goFdHist(1)" />
<button type="button">
Get URL</button>
</div>
</body>
</html>

Posted 2-Nov-16 8:18am

G.Mahendra

Updated 2-Nov-16 20:35pm

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

G.Mahendra · Answer 1 · 2016-11-02T20:35:00

Thanks Richard

First i tried below code for "Previous and Next"functionality. But it doesn't fulfill my requirement.

<button onclick="window.history.back()">
Go Back</button>
<button onclick="window.history.forward()">
Go Forward</button>

By using this script code back button only working forward not working.

After that we think to get URL and store it in array as above.

Now i tried on another way also for getting url.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
var urllist = [];
var ind = 0;
function WhichButton(event) {
if (event.button == 0) {
$(document).ready(function () {
var pageURL = $(location).attr("href");
urllist[ind] = pageURL;
ind = ind + 1;
alert(pageURL);
});
}
}
function goBkHist(a) {
var l_ref = ind - 2;
var pageURL2 = urllist[l_ref];
ind = l_ref + 1;
alert(pageURL2);
loadUrl(pageURL2);

}
function goFdHist(a) {
var l_ref_2 = ind;
var pageURL2 = urllist[l_ref_2];
ind = l_ref_2 + 1;
alert(pageURL2);
loadUrl(pageURL2);
}
function loadUrl(newLocation) {
window.location = newLocation;
return false;
}

</script>
</head>
<body>
<div onmousedown="WhichButton(event)">
<input type="button" value="BACK " onclick="goBkHist(-1)" />
<input type="button" value="FORWARD" onclick="goFdHist(1)" />
</div>
</body>
</html>

Actually what happen is i try to get URL by click on mouse-left click.In the above code i got URL successfully but when i try to click on buttons also mouse-left event fires button event not fired.

How can i solve this problem.If i placed buttons in another div it works fine. But my requirement is need to place buttons in same div only otherwise i am facing issues with design.

How to avoid mouse-left click event at the time of button click.

Richard Deeming · Answer 2 · 2016-11-02T08:49:00

Solution 1

Don't try to invent your own history management solution. Use the built-in history API[^].

If you need to support older browsers, use a polyfill[^].

Posted 2-Nov-16 8:49am

Richard Deeming