Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    HTML5 History API initial load issue

    I'm trying to store the first page information when the page first loaded. So that I can retrieve back the first page information when I click on the second page.

    Code:
    Initial Page -> Page2 -> Initial Page
    After hours of working, I decided to store a global variable called firstLoad and use replaceState instead of pushState. It works now. But there is one problem, It could not go like this:

    Code:
     Initial Page -> Page2 -> Page3 -> Page2
    When Page 3 goes back to Page 2, console shows:

    Code:
        GET http://localhost/[object%20Object] 404 (Not Found)
    I've Google-ed but I could not find any proper tutorial to deal with this issue, most of them suggest to use history.js, but i'm trying to learn how it works first. Any help would be appreciated!


    Code:
        <script>
        $(function(){
        	var firstLoad = 1;
        
        	$('a').on('click', function(e){	
        		e.preventDefault();
        		var path = this.href;
        		var currentPath = window.location.pathname;
        		loadContent(path);
        
        		if(firstLoad==1){
        			console.log(firstLoad);
        			console.log(currentPath);
        			firstLoad=0;
        			history.replaceState(currentPath, '', '');
        			history.pushState({},'',path);
        		}else{
        			console.log('Not first load')
        			history.pushState(path,'',path);
        		}
        	});
        
        	//Pop State
        	$(window).on('popstate', function(e){
        		var state = e.originalEvent.state;
        		if(e.originalEvent && state){
        			loadContent(state);
        		}
        	});
        
        	//Load Content
        	function loadContent(path){
        		$.get(path, function(data){
        			$('#result').html(data);
        		});
        	};
        
        });
        </script>

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    With
    Code:
    history.pushState(path,'',path);
    you are pushing a string as a state to the history stack. The first parameter is supposed to be a JSON data structure (see History API - Dive Into HTML5). In popstate it will obviously be retrieved as an object, but loadContent is expecting a string. The object's toString method will (automatically) be called and will result in [object Object] which will be used as the URL for loadContent.

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,461
    Thanks
    11
    Thanked 600 Times in 580 Posts
    Quote Originally Posted by devnull69 View Post
    The first parameter is supposed to be a JSON data structure
    what the heck is a "JSON data structure"?
    that's a mis-leading term. i know it's from the book you linked, but it's still confusing.

    the first argument should be a serializable object or just a string.

    history.pushState({},'',path); would be history.pushState(path,'',path); or history.pushState({path: path},'',path);

    but, you don't really even need to use that state argument unless your'e actually passing around, ahem, state.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%


  •  

    Posting Permissions

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