backbone.js router

Question

I would like to go to one of the links below the code:

    var  menukeuze;

   var AppRouter = Backbone.Router.extend({
        routes: {
            "menukeuze": "getPost",
            "*actions": "defaultRoute" // matches http://example.com/#anything-here
        }
    });
    // Instantiate the router
    var app_router = new AppRouter;
    app_router.on('route:getPost', function (menukeuze) {
        // Note the variable in the route definition being passed in here
        if (menukeuze == 'Welkom') { MakeRequest_goto(menukeuze); }
        if (menukeuze == 'Dogs1') { MakeRequest_goto(menukeuze); }
        if (menukeuze == 'Dogs2') { MakeRequest_goto(menukeuze); }
    });
    app_router.on('route:defaultRoute', function (actions) {
        MakeRequest_goto('Welkom');
    });
    // Start Backbone history a necessary step for bookmarkable URL's
    Backbone.history.start();

function MakeRequest_goto (ganaarpagina) {
                    $(document).ready(function() {
                    $('#div-main-content').fadeOut(function() { $.ajaxSetup( {
                    cache: false,
                    beforeSend: function() {
                    $('#div-main-content').fadeOut();
//                $('#content').hide();
//                $('#loading').show();
                    },
                    complete: function() {
//                $('#loading').hide();
//                $('#content').show();
                    },
                    success: function() {
//                $('#loading').hide();
                  $('#div-main-content').fadeIn();
//                  $('#div-main-content').show();
            }
        });
                    var $container = $("#div-main-content");
            //        $container.load(MakeRequest);
                    alert ("Loading: " + "page_" + ganaarpagina + ".php");
                            $container.load("page_" + ganaarpagina + ".php");
                }); }); }

I call these routes via:

<td>
 <a href="#/menu/Welkom" >
 <img src="images/test1.png" />
 </td>

<td>
 <a href="#/menu/Dogs1" >
 <img src="images/test2.png" />
</td>

<td>
 <a href="#/menu/Dogs2" >
 <img src="images/test3.png" />
</td>

When I type in the browser http://link.nl/#/menu/Welkom I get a perfect page, but the url looses the #. When I refresh the page, the webserver says: the requested URL is not found. (this is because the URL changed from with "#" to without "#".) When I click one of the href's it never works and I receive a : GET http://link.nl/Welkom?_=1365638638131 404 (Not Found)

How can I load ajax via these routed URL's? I've tried the setup and information of the following sites, but non did help:

http://thomasdavis.github.io/examples/restful-app/

http://jsfiddle.net/ambiguous/xkZtB/

Backbone router listener not hitting hash tag

I've triend many more, but they end up the same, or don't have any "completed info". I hope someone sees my problem? The browser I'm using is: Chrome v26 on OSX.

The java scripts I'm using are:

<script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http:////ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src='http://underscorejs.org/underscore-min.js'></script>
<script src='http://documentcloud.github.io/backbone/backbone-min.js'></script>

The default route is working when I browse to the http://link.nl/ site. Link.nl is not a real site, just as an example. Regards,

Answer 1

Try starting Backbone.history with pushState as true :

Backbone.history.start({pushState: "pushState" in window.history});

(The test only enable pushState for compatible browser. You can either set it to true or false manually. See the doc here)

This will force the url to always be without the hashbang (#!/). If you always want it, set it to false.

Now, for your 404 errors, it's because when you load a "real" url (link.nl/menu/Welkom), your web server (apache, nginx, etc) will search for this file (either a static one, or a virtual one via url rewriting). Since it can not find it (because you expect it to exists only in the frontend client, via Backbone), it will return a 404 errors before showing you the page.

To avoid the 404, you can set a url rewrite rules that will load the specific page containing your javascript, for any url you want.