HTML5 pushState with Backbone.js router not working on specific server but working on others

Question

Been pulling my hair out over a certain issue. I can't seem to find out why my pushState router is not working on our development server while it works perfectly on 2 other real servers (staging and client's live domain) and it also works for my local MAMP server.

Here's my router:

    jQuery(function(){
        // define routes
        var Router = Backbone.Router.extend({
           routes: {
                '': 'chrono',
                ':number': 'chrono',
                ':number/plus': 'chrono'
           },

          // load views
          initialize: function() {
              Backbone.history.start({
                  pushState: true,
                  hashChange: false     // use html5 pushState with hashChange set to false
                                        // to handle navigation of hash anchors
            });
          },

          chrono: function(number) {
                url = window.location.hash.split("/");

                this.reset();
                this.content = new chronoView();

                if(number == undefined){
                    number = 0;
                }
                if(url[1]=="plus") {
                    this.content.showMiddleBox();
                    jQuery('#overlay2').show();
                }
          },

          reset: function() {
                if (this.content != undefined){
                    this.content.hide();
                 }
          }
      });

      var Router = new Router;
    });

My .htaccess file on the non-working server does have quite a few engine re-write rules already, and the file itself is 200+ lines but here's what I deem to be the relevant parts:

    # Block access to "hidden" directories whose names begin with a period. This
    # includes directories used by version control systems such as Subversion or Git.
    <IfModule mod_rewrite.c>
      RewriteCond %{SCRIPT_FILENAME} -d
      RewriteCond %{SCRIPT_FILENAME} -f
      RewriteRule "(^|/)\." - [F]
    </IfModule>

    <IfModule !mod_rewrite.c>
        # If we don't have mod_rewrite installed, all 404's
        # can be sent to index.php, and everything works as normal.
        # Submitted by: ElliotHaughin

        ErrorDocument 404 index.php
    </IfModule>

    # URL and hash rewrite for backbone
    # Used for HTML 5 pushState support *NOT WORKING*
    <ifModule mod_rewrite.c>
        RewriteEngine On
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteCond %{REQUEST_URI} !index
        RewriteRule (.*) index.html [L]
    </ifModule>

/* EDIT */

After comparing the .htaccess file of the non-working server against the working server.htaccess I've not had any success, as both files were essentially the same except for some accounting for subfolder paths. I.e.:

Working server: RewriteRule ^(.*)$ index.php?/$1 [L] Non-working server: RewriteRule ^(.*)$ dj24/index.php?/$1 [L]

And that's the only difference between the two files, but this makes sense because the client's version (working .htaccess) is hosted on subdomain with no subfolder, i.e. http://subdomain.ClientsDomain.com/ whereas our development server version hosts the project on a subfolder path to a subdomain, i.e. http://dev.Our_Domain.com/OurApplication

I'm starting to believe it's the subdomain + subfolder combo that's causing the issue. Any help with this would be appreciated. Thanks!

Answer 1

Since the main difference between the working project and the one that doesn't is the folder structure and using another configuration for your httaccess does not solve this issue, try setting a folder root to your router, i had a similar issue a few months ago but i can't recall exactly what i was(but i do remember it was related to using a subfolder inside my domain and backbone), so this is just a suggestion, might or might not help, but in my case it did.

First get the base folder

var baseFolder =  window.location.pathname.replace('/','').split('/')[0];

Then use it as the router root

routes: {
    '(:number)(/plus)': 'chrono'
},

initialize: function() {
    Backbone.history.start({
        pushState: true,
        hashChange: false,
        root: baseFolder                                       
    });
 },

Let me know if it helps =)

Answer 2

Here's how I managed to fix the issue.

On the problematic server I configured the backbone.js router to accept hash uri changes without using pushState, then I removed pushState conditions.

Here's what the route looks like now:

jQuery(function(){
    // define routes
    var Router = Backbone.Router.extend({
        routes: {
            '': 'chrono',
            ':number/': 'chrono', /* NOTE: ':number/' instead of the previous  ':number' */
            ':number/plus/': 'chrono' /* NOTE: ':number/plus/' instead of the previous ':number/plus' */
    },

        // load views
        initialize: function() {
            Backbone.history.start(); // pushState settings removed
    },

    // ... other router functions
    // reset: etc.

    var Router = new Router;
});

Using this configuration I am now able to handle all of the hash tag anchor routes of my application which I had previously handled using pushState:

• http://dev.OurDomain.com/OurAplication/chrono
• http://dev.OurDomain.com/OurAplication/chrono#0 - http://dev.OurDomain.com/OurAplication/chrono#6 (i.e. there are 7 of these numbered routes)
• http://dev.OurDomain.com/OurAplication/chrono#0/plus - http://dev.OurDomain.com/OurAplication/chrono#6/plus (i.e. each numbered hash route has a modal info pop-up box called by adding /plus to the current number route

I will also mention each of these 14 links has Facebook and Twitter sharing buttons assoicoated to it. This is why we are explicitly writing their hashes to the url bar so we can control how open graph information is getting scraped from our server. Depending on what section of the page the user is sharing/tweeting from, different OG data is served. In other words, it's arbitrarily easy to click and navigate the page sections for #0-6 and /plus but the purpose of writing their clicks directly to the url bar is to register information and thumbnails with Facebook and Twitter's APIs. These query strings are able to register with the Facebook API because of secondary backend PHP architecture which doesn't need to be discussed here :D

A NICE TO HAVE THOUGH:

So now that everything works again!

I still WOULD want to revert to the pushState version we use on our client's live server. (This is so the animations of each chrono#0 (#0-6) don't fire a second time when closing the lightbox overlay opened by the /plus routes.) If anyone can figure out how to do this (I assume it's a .htaccess subfolder RewriteCondition or flag I am missing) I will gladly re-assign / award the accepted answer and associated bounty to you.

EDIT: Was able to re-integrate pushState on the non-working server by adding the root param to Backbone.history.start() as per Zagen's answer.