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.) — ᴠɪɴᴄᴇɴᴛ
– ᴠɪɴᴄᴇɴᴛ, Commented Nov 28, 2014 at 15:32

aziz punjani · Accepted Answer · 2012-12-13 22:21:57Z

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, 2012 at 22:21

aziz punjani

25.8k9 gold badges49 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ᴠɪɴᴄᴇɴᴛ Over a year ago

The alert states 'back button', but it could just as well have been the forward button.

Arun David · Accepted Answer · 2012-12-14 08:50:30Z

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, 2012 at 8:50

answered Dec 14, 2012 at 8:39

Arun David

2,7843 gold badges18 silver badges18 bronze badges

5 Comments

user1775888 Over a year ago

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.

Arun David Over a year ago

Try $(window).bind('popstate', function(){return false;} Not sure, whether it will work.

Arun David Over a year ago

Have a <div id='container'>...</div> and have this as container for the page. In ajax set the data for $('#container).html(data);

user1775888 Over a year ago

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 Over a year ago

and the article index.php?=id link not available

Collectives™ on Stack Overflow

HTML5 history popstate with ajax, direct link not work

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related