CODEWITHSUNDEEP
jquerypage-refreshhistory.js
hugsbrugs
hugsbrugs

Reputation: 3611

handle page refresh with jquery history plugin

the problem that occupies my today is "how can I catch page refresh with jQuery History plugin" !

Start with a few code :

function changePage(PageURI){
    History.pushState({PageURL:PageURI}, PageURI, "/"+PageURI);
}

// Bind to StateChange Event
History.Adapter.bind(window,'statechange',function(){
    var State = History.getState();
    dispatchURL(State.data.PageURL);
});

So everything works perfectly in the better world, all my anchors have a : 

onclick="javascript:changePage('New-Page');"

The trick is that when I do a page refresh (F5 or browser icon), the History statechange event is not fired (that is understable cause URL doesn't change) but that's not good for my affairs.

So could people who uses History plugin tell me how they handle page refresh or tell me how can I catch page refresh event through History (or just jquery ) events ?

Thanks !

EDIT

While waiting for a better solution, here is a work around that does the trick :

window.onbeforeunload = function() {
    History.pushState({PageURL:'#'}, '#', '/#');
}

Upvotes: 1

Views: 2083

Answers (2)

James Duffy
James Duffy

Reputation: 1387

You can do this:

function changePage(PageURI){
  History.pushState({PageURL: PageURI, rand: Math.random()}, PageURI, "/"+PageURI);
}

Not sure if there's any downside to this method, but it will trigger statechange on page refresh.

Upvotes: 0

hugsbrugs
hugsbrugs

Reputation: 3611

My web site is full ajax, this means I never refresh the browser to go from page to page.

So when I do a page refresh (or a direct access to a particular page), I have to handle it server side to know which page is called and pass appropriate parameters to my javascript to display what is needed.

I do this with a kind of RESTfull api:

  1. Lets say you want to refresh www.my-site/page1 : tell .htaccess to redirect page1

    RewriteCond %{THE_REQUEST} ^[A-Z]{3,}\s/+index\.php\?request=page1 [NC]

RewriteRule ^ /page1? [R=301,L]

RewriteRule ^page1$ index.php?request=page1 [QSA,NC,L]

  2. Your index.php will receive a request parameter, retrieve it:

    $_REQUEST['request']

  3. bis : if you have complex URL (www.my-site/page1/page2) do an explode:

    $args = explode('/', rtrim($_REQUEST['request'], '/'));

  4. Write javascript variable :

    var pageToLoad = page1;

  5. When DOM is ready, do appropriate action:

    if(typeof pageToLoad !== 'undefined'){
    if(pageToLoad==='page1'){
        // DISPLAY WHAT YOU NEED
    }
}

ADDITIONAL INFO:

If like me you handle you page's actions inside state change event:

(function(window,undefined){

    History.Adapter.bind(window,'statechange',function(){ 
        var State = History.getState(); 

        dispatchURL(State.data.PageURL, State.data.PageID);
    });

})(window);

there won't be any statechange event fired on page refresh, so what you can do is testing current state (note I give a different parameter of my PageID because if all parameters are identical to previously state, statechange event still doesn't fire !!)

function changePage(PageURI){
    if(PageURI===null){ PageURI=''; }
    var State = History.getState();
    if(State.data.PageURL===PageURI){
        History.replaceState({PageURL:PageURI, PageID:'1'}, PageURI, "/"+PageURI);
    } else {
        History.pushState({PageURL:PageURI, PageID:null}, PageURI, "/"+PageURI);
    }
}

Upvotes: 1

Related Questions