Integrating the History API

[arvgta]

Hello all, I'm trying to integrate this:

http://diveintohtml5.info/history.html

...into this:

http://4nf.org/bo.js

You can see it working on:

http://4nf.org/ and sub-pages.


It works alright in the sense that only the "content" div is swapped, but the back-button functionality doesn't work properly.
(same behaviour in all browsers, that support the History API)

What am I doing wrong?

Salient code (in http://4nf.org/bo.js):

init();

is called on DOMReady

setupHistoryClicks();

is called within init on return of AJAX call

function setupHistoryClicks() {
  $(document.links).each( function(){
    if(this.href.split('//')[1].split('/')[0].indexOf(document.domain)!=-1) addClicker(this);
  });
}

function addClicker(link) {
  link.addEventListener("click", function(e) {
    swapDiv(link.href);
    history.pushState(null, null, link.href);
    e.preventDefault();
  }, false);
}

function swapDiv(href) {
  $.ajax( {url: "http://4nf.org/bo.php", 	// cross-domain request to tag server at 4nf.org
  type:"GET",					
  data:"u="+href+"&d=content", 		 
  success:function(r){ swapDiv2(r); }, 	
  error:function(){alert("CORS error");}
 });
}

function swapDiv2(r) {
  $("#content").replaceWith('<div id="content">'+r+'</div>');
  setupHistoryClicks();
  window.addEventListener("popstate", function(e) {
    swapDiv(location);
  });

Any ideas?


Kind regards

[arvgta]

Solved :-)

See it working on http://4nf.org/

Any comments on the code of the plugin are very welcome:

http://4nf.org/bo.js