www.webdeveloper.com
Results 1 to 2 of 2

Thread: Integrating the History API

  1. #1
    Join Date
    Jan 2011
    Location
    Munich, Germany
    Posts
    227

    Integrating the History API

    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):

    Code:
    init();
    is called on DOMReady

    Code:
    setupHistoryClicks();
    is called within init on return of AJAX call

    Code:
    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
    http://4nf.org/ - Ajaxify jQuery plugin

  2. #2
    Join Date
    Jan 2011
    Location
    Munich, Germany
    Posts
    227
    Solved :-)

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

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

    http://4nf.org/bo.js
    http://4nf.org/ - Ajaxify jQuery plugin

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles