Sammyjs routes not working with Phonegap

Question

I have built an app with SammyJs. It currently works perfectly in the browser. However, when I package it to Android using PhoneGap, the routes does not work anymore.

I have found this SO question. However, the solution given does not work :

(function($) {

    var app = $.sammy('[role=main]', function() {
      this.disable_push_state = true;
      ...
    });
}

Has anyone ever experienced the same issue?

EDIT

I am also using jquery mobile with the following script to disable its routing :

 <script type="text/javascript">
      // DISABLE JQM ROUTER
      $(document).bind("mobileinit", function () {
        $.mobile.ajaxEnabled = false;
        $.mobile.linkBindingEnabled = false;
        $.mobile.hashListeningEnabled = false;
        $.mobile.pushStateEnabled = false;
        $.mobile.changePage.defaults.changeHash = false;
      });
    </script>

I created a gist with my app sammy javascript (including routes).

Answer 1

I think the problem is with this around clause:

this.around(function(callback) {
  var context = this;

  url = 'http://localhost:3000/api.json?school=' + localStorage.school

  this.load(url)
    .then(function(data) {
      parsed = JSON.parse(data);

      //if (parsed.meta != undefined) {
      //  alert(parsed.meta.message);
      //}
      context.products = parsed.products;
      context.places = parsed.places;
      context.school = parsed.school;
      context.title = $('[data-role=header] h1');
    })
    .then(callback); // *** this won't get called if load() rejects promise
});

As I understand it, the around clause is called with a callback(), which will continue loading the route when it is called.

I think there is a problem with your promise chain. If load() returns a rejected promise (which probably does, as there is no localhost:3000 on your phone), then neither of your then() functions will load. As such, callback() isn't called and the app "stops". I would advise (a) adding some error handling there, so you can see what it happening, and definitely (b) executing callback no matter the result of load(). Also - JSON.parse(data) will throw an error if data is not a proper JSON-encoded string - you want a try/catch around that, too.

I would try this:

this.load(url)
.then(function(data) {
  try {
     parsed = JSON.parse(data);
  } catch(e) {
     console.log('error decoding json!: '+errorMsg);
  }

  //if (parsed.meta != undefined) {
  //  alert(parsed.meta.message);
  //}
  context.products = parsed.products;
  context.places = parsed.places;
  context.school = parsed.school;
  context.title = $('[data-role=header] h1');
},function(errorMsg){
  console.log('error loading json!: '+errorMsg);
})
.fin(callback); // *** fin() is meant to execute on both success and error, like a "finally".

If your promises implementation does not support fin(), look up what it is calling its equivalent. It is essentially shorthand for: .then(callback).otherwise(callback)

Long story short - you want to make sure that the callback passed to around will be executed no matter what, or you app will not continue loading the route, which is what your unexpected behaviour seems to be.

As for the point about not being able to see the console, I am not sure what your environment looks like, but I have had success with Eclipse and ADT in the past - I can see console logs and errors just fine.