Click here to Skip to main content
16,017,881 members
Please Sign up or sign in to vote.
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
Updated 2-Nov-16 20:35pm

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[^].
 
Share this answer
 
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.
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900