CODEWITHSUNDEEP
javascriptjquery
Wouter
Wouter

Reputation: 137

Got some trouble Implementing History.js for the site i am creating

I came across history.js as a possible solution to some issues i am having. For the website i am building i decided to create a static page where my content would be loaded into. So i would have 3 Divs, (one for the header, one for the menubar and one for the content) When clicking a link in the menu that page would be loaded into the content div. Because of this all traffic stays in the index.php page so clicking on the back button i would go to the last visited content but last visited page. Its my understanding i can solve this with history.js.

So on my page i have several links in the menu bar where onclick a function is called upon. For instance

    <li><a href="javascript:void(0);" onclick="myprofile()" ><span>my profile</span></a></li>
    <li><a href="javascript:void(0);" onclick="mysettings()"><span>Settings<small>

A function would look something like this.

function myprofile() {
$('#content').load('members.php');
}
function mysettings() {
$('#content').load('settings.php');
}

I added some javascript for history.js (found on this forum) And although it does change the urls inside my index.php but when clicking back it doesnt load the pages. How would i let history.js work when functions are used? (some links i do really need functions so just putting the onload inside link would not be an option for me)

<script>
                    $(function() {

    // Prepare
    var History = window.History; // Note: We are using a capital H instead of a lower h
    if ( !History.enabled ) {
         // History.js is disabled for this browser.
         // This is because we can optionally choose to support HTML4 browsers or not.
        return false;
    }

    // Bind to StateChange Event
    History.Adapter.bind(window,'statechange',function() { // Note: We are using statechange instead of popstate
        var State = History.getState();
        $('#content').load(State.url);
        /* Instead of the line above, you could run the code below if the url returns the whole page instead of just the content (assuming it has a `#content`):
        $.get(State.url, function(response) {
            $('#content').html($(response).find('#content').html()); });
        */
        });


    // Capture all the links to push their url to the history stack and trigger the StateChange Event
    $('a').click(function(evt) {
        evt.preventDefault();
        History.pushState(null, $(this).text(), $(this).attr('onclick'));
    });
});
</script>

Upvotes: 0

Views: 47

Answers (1)

Jesse Sierks
Jesse Sierks

Reputation: 2397

The first parameter of the History.pushState is "data", which is for additional information.

So to save the History entry you could do this in your click event:

History.pushState({ href: 'members.php' }, $(this).text(), $(this).attr('onclick'));

And then when reading it back out you would do this in your History.Adapter.bind function:

$('#content').load(State.data.href);

Upvotes: 1

Related Questions