Programmatically load a url using Ratchet push.js

Question

The Ratchet single-page application framework uses push.js to load new pages into view. For example:

<a href="link.html">link<a>

This will use push to replace everything in the .content div with the .content of link.html. It will also update .bar-title and .bar-tab if you have them on both pages.

I would like to use the same mechanism with a Javascript function call. Before I start patching Ratchet, is there an elegant way to do that?

Thanks!

Answer 1

It's not elegant, but you could create a global function that exposes the push function. Open ratchet.js and add

myGlobalPushFunction = function(){  PUSH(options)  }

around line 276 (above the PUSH function). Then call it like this:

myGlobalPushFunction({ url: "index2.html",  transition: "fade" })

Answer 2

user2078515's answer didn't work for me. options isn't defined correctly and defining the function that way doesn't put it on the global scope. PUSH is on the global scope anyway, so you can just do this:

PUSH({
  url: 'file:///android_asset/www/userlist.html'
});

I can't get transition to work for some reason but that might be a separate issue...

Answer 3

I've been working on this and discovered that PUSH will only work with a full file path. Therefore, I've created this function which can be called like so: pushRedirectTo('my_page.html').

    function pushRedirectTo(path){
        var new_path = window.location.href.split('/');
        new_path.pop();
        path.replace('/', '');
        new_path.push(path);
        new_path = new_path.join('/');
        //alert('p: ' + new_path);
        PUSH({url: new_path, transition: 'fade'});
    }

Thanks to #mr-Chimp for his answer which helped me work out the full path issue.