Backbone.js router backward/forward not working

Question

my Javascript

function ajaxPushUrl(thisobj) {}


function updatePage(url) {
    if ($('body').find('.ajax-content-column').length == 0) {
        // has NO certain class, use normal page request.
        window.location.href=url;

        return true;
    }

    if (url.toLowerCase().indexOf('page') >= 0) {
        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'html',
            success: function(data) {
                $('.ajax-content-column').html(data);

                return false;
            }
        });
    }
}


var AppRouter = Backbone.Router.extend({
    routes: {
        "page:id.php": "displayPage",
        "*actions": "defaultRoute" // matches http://example.com/#anything-here
    },

    initialize: function(options) {
        console.log('initialized');
    },

    displayPage: function(id) {
        console.log('load page id: '+id);
        return false;
    },
});

// Initiate the router
var app_router = new AppRouter;

app_router.on('route:displayPage', function(id) {
    console.log('page id: '+id);
    return false;
});
app_router.on('route:defaultRoute', function(actions) {
    console.log(actions);
    return false;
});

Backbone.history.start({pushState: true, root: "/ajax-backbone-js/"});


$(function() {
    /**
     * @link http://stackoverflow.com/questions/9328513/backbone-js-and-pushstate
     */
    $('a.ajax-link').click(function(e) {
        var href = $(this).attr('href');
        var protocol = this.protocol + '//';

        if (href.slice(protocol.length) !== protocol) {
            e.preventDefault();
            app_router.navigate(href, true);
            alert('h');
            updatePage(href);
            $('title').text($(this).text());
        }
    });
});

my html

<ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="page1.php" class="ajax-link" onclick="return ajaxPushUrl($(this));">Page 1</a></li>
    <li><a href="page2.php" class="ajax-link" onclick="return ajaxPushUrl($(this));">Page 2</a></li>
    <li><a href="page3.php" class="ajax-link" onclick="return ajaxPushUrl($(this));">Page 3</a></li>
    <li><a href="page4.php" class="ajax-link" onclick="return ajaxPushUrl($(this));">Page 4</a></li>
</ul>

From Home page > click on page 1 & 2 & 3 & 4 works fine.
But click backward and forward did not work.

I just want to use Backbone router, no views, no model, no collection. Please help.

Answer 1

I found that this works great!

function ajaxPushUrl(thisobj) {}

function updatePage(url) {
    if ($('body').find('.ajax-content-column').length == 0) {
        // has NO certain class, use normal page request.
        window.location.href=url;

        return true;
    }

    if (url.toLowerCase().indexOf('page') >= 0) {
        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'html',
            success: function(data) {
                $('.ajax-content-column').html(data);

                return false;
            }
        });
    }
}

var AppRouter = Backbone.Router.extend({
    routes: {
        "page:id.php": "displayPage",
        "*actions": "defaultRoute" // matches http://example.com/#anything-here
    },

    initialize: function(options) {
        console.log('initialized');

        $(document).on('click', 'a.ajax-link', function(e) {
            console.log('ajax link clicked');
            var href = $(this).attr('href');
            var protocol = this.protocol + '//';

            if (href.slice(protocol.length) !== protocol) {
                if ($('body').find('.ajax-content-column').length !== 0) {
                    e.preventDefault();
                    app_router.navigate(href, true);
                    $('title').text($(this).text());

                    return false;
                }
            }
        });
    },

    displayPage: function(id) {
        console.log('load page id: '+id);
    },
});

// Initiate the router
var app_router = new AppRouter;

app_router.on('route:displayPage', function(id) {
    var href = Backbone.history.fragment;

    console.log('page id: '+id);
    console.log(href);

    if ($('body').find('.ajax-content-column').length == 0) {
        console.log('no ajax-content-column class');
    } else {
        updatePage(href);

        // lookup link of this ajax page and set title.
        $('title').text($('.menu a[href$="'+href+'"]:first').text());
    }
    return false;
});
app_router.on('route:defaultRoute', function(actions) {
    console.log(actions);
    return false;
});

Backbone.history.start({pushState: true, root: "/ajax-backbone-js/"});