How to stop an tag from loading a new page with html5 history api

Question

I am trying out the history api for changing the url after swapping out content and have run into an issue with stopping the a tags from loading a new page. So far, when you click a button, it loads the requested content within the page but then loads the page where the requested content is stored. Any suggestions about how to stop this and get a result of a webpage with new content and a fresh url that can be shared?

Here's the JS.

function supports_history_api() {
return !!(window.history && history.pushState);
}

function swapText(href) {
var req = new XMLHttpRequest();
req.open("GET",
       "http://bonkmas.com/historytest/gallery/" +
         href.split("/").pop(),
       false);
req.send(null);
if (req.status == 200) {
document.getElementById("open-content").innerHTML = req.responseText;
setupHistoryClicks();
return true;
}
return false;
}

function addClicker(link) {
link.addEventListener("click", function(e) {
if (swapText(link.href)) {
  history.pushState(null, null, link.href);
  e.preventDefault();
}
}, true);
}

function setupHistoryClicks() {
  addClicker(document.getElementById("next-vid"));
  addClicker(document.getElementById("previous-vid"));
}

window.onload = function() {
if (!supports_history_api()) { return; }
 setupHistoryClicks();
 window.setTimeout(function() {
window.addEventListener("popstate", function(e) {
  swapText(location.pathname);
}, false);
}, 1);
}

http://bonkmas.com/historytest/

LJᛃ · Answer 1 · 2013-05-03T02:55:22.383

1

This is because your scope is broken, in the click listener you need to use "this" to access the link element. Because of the exception all following code will not be executed.

Use firebug or chrome developer tools to debug your code, they'll brake/pause on exceptions.

edited May 03 '13 at 02:55

answered May 03 '13 at 02:44

LJᛃ

5,935
2
20
31

Why dont you use developer tools like firebug or chrome dev tools ?! The error is obvious then. In your addClicker function you need to use "this" instead of "link" in the eventListener callback. – LJᛃ May 03 '13 at 03:13
I user chrome dev tools. How does that help me figure out what's going on in this particular case? – Emanegux May 03 '13 at 03:15
When i click the "next video" button i get an exception that link is null. Maybe you need to setpause on uncaught exceptions in your Source tab(third icon from the left in the lower left corner). – LJᛃ May 03 '13 at 03:17

score 1 · Answer 2 · answered May 03 '13 at 03:45

Hitting the previous button requests the following url:

http://bonkmas.com/historytest/gallery/previous.html

This url contains the text "okokokok". This text is then inserted in place of the buttons. Then your code trys to interact with those buttons, which no longer exist. Calling link.addEventListener( where link no longer exists blows up. Since you have placed e.preventDefault() after this code, it is never reached and the default action of the a tag is executed.

This is the very reason why it is normally a good idea to place e.preventDefault() at the very top of your code.

If you look at the example which you are trying to mimic; the pages it requests also contain the buttons. This is why the code re-attaches the click handlers with every request. Your pages do not contain the buttons, so it blows up.

this solution works halfway. It gives the user new content and a new url. But once the url is refreshed, the page no longer exists. How do I have my server recognize the url as a state of index.php page with new content? — Emanegux, May 03 '13 at 04:33

How to stop an tag from loading a new page with html5 history api

2 Answers2