HTML5 history popstate with ajax, direct link not work

Question

This Demo I want to click forward to content(index.php?id=id) click back to subject(index.php).

Q1. (index.php?id=id) direct link content page not available, it will show (index.php) subject , why?

Q2. Click back after the second times (forward > back > forward > back) then url will stop change, why? (Safari 5) update: Use window.onpopstate url works fine. Not get this error.

Any suggestion will be appreciated.

$(window).bind('popstate', function(){
    $.ajax({
        url:location.pathname,
        success: function(data){
            $('.container').html(data);
        }
    });
});

Demo

$('.subject').click(function(){
    $.ajax({
        url: 'index.php?id=' + $(this).attr('rel'),
            success: function(data){
                $('.container').html(data);
            }
    });
    var pageurl;
    pageurl = 'index.php?id=' + $(this).attr('rel');
    if(pageurl != window.location){
        window.history.pushState({path: pageurl}, "", pageurl);
    }
    return false;
});

index.php

<div class="container">
    <?php
        if($_GET['id']){
           ...
            print"<div class="content"></div>";
        }
        else{
           ...
           print"<div class="subject" rel="id"></div>"
        }
    ?>
</div>

You save the URL via `history.pushState()`, but you never use it in your `popstate` handler. In that handler you could use `event.state.path` instead of `location.pathname`, which you use currently for the `url` param of your XHR call. (You would need to change `, function() {` to `, function(event) {` as well.) — ᴠɪɴᴄᴇɴᴛ, Nov 28 '14 at 15:32

score 1 · Answer 1 · answered Dec 13 '12 at 22:21

1

The popstate event handler will receive an event object which contains the state you passed in to pushState. It's accessible via event.state Here's the event interface definition. Here's some demo code to illustrate the concept.

window.addEventListener("popstate", function(event) {
if( event.state !== null )    
    alert('Browser back button was clicked, state returned ' + JSON.stringify( event.state ) ); 
};

answered Dec 13 '12 at 22:21

aziz punjani

24,673
9
42
56

1

The alert states 'back button', but it could just as well have been the forward button. – ᴠɪɴᴄᴇɴᴛ Nov 28 '14 at 15:28

Arun David · Answer 2 · 2012-12-14T08:50:30.873

1

You just have to fetch the page content(i.e. subject for your scenario) using ajax and show it in your page container. Consider if you are in 'index.php' and clicks on a subject.. so your url changes to 'index.php?id=7'. Now you are clicking back.. here in 'popstate' event, 'location.pathname' gives 'http://host/index.php'. Thats it, fetch the data from 'location.pathname' using ajax and show it.

$(window).bind('popstate', function(){
    $.ajax({
        url:location.pathname,
        success: function(data){
            $('.content').html(data);
        }
    });
});

edited Dec 14 '12 at 08:50

answered Dec 14 '12 at 08:39

Arun David

2,576
2
16
18

Thanks for reply, but I want to click back (to index.php) only subject can be seen. is it possible? I'm following this, just change url (to index.php) content still be seen. – user1775888 Dec 14 '12 at 08:49
Try $(window).bind('popstate', function(){return false;} Not sure, whether it will work. – Arun David Dec 14 '12 at 08:53
Have a
...
and have this as container for the page. In ajax set the data for $('#container).html(data); – Arun David Dec 14 '12 at 09:10
Thank for reply, it is what i'm looking for, click forward only show content,back only show subject. But update the code in question, when I click the second times back (forward>back>forwarad) >back the url not change, still with `?=id`. – user1775888 Dec 14 '12 at 09:31
and the article `index.php?=id` link not available – user1775888 Dec 14 '12 at 09:36

HTML5 history popstate with ajax, direct link not work

2 Answers2