Make js and css work with Ratchet's push.js

Question

I'm using Ratchet to build a phonegap app. I have a tab bar at the bottom and tapping icons will take users to specific view.

My setup is basically like this: 1.html, 1.js, 1.css and 2.html, 2.js, 2.css and I'm using Ratchet's push.js to switch between the two html.

The problem is with push.js, any scripts/css is not loaded. So if I switch to 2.html from 1.html, 2.js, 2.css are not loaded. Also, I guess cordova.js also needs to be loaded every time.

Is there a work around? Googling got me to

window.addEventListener('push' function(){});

and this might work with js but not css?

Answer 1

Push.js is going to load 2.html dynamically with ajax. Any javascript or styles that you want from page to should be loaded in page 1.html. Upon navigation, Push.js will parse out the content in 2.html and swap those content areas with what was on 1.html. Your javascript and css in 2.html wont be applied.

You can add an event handler to the push event as you have found, and people wired into that to load javascript when a page is loaded. Its a hack that, to me, means there is probably a better approach.