Question

For my phonegap app which i build with jquery mobile i use rel=”external” if I want to go to another page, for example if I want to go from index.html to users.html..

I use this option because otherwise i can’t use javascript functions in users.html.. for example it doesn’t execute whats in the document.ready.. But.. if I use rel=”external” then it will work..

The problem is, is that if I use rel=”external” the transition(slide) won’t work any more.. Does someone know why it is so?

Answer 1

Try to use pageinit instead of document.ready and rel=”external”. This is triggered after the page is initialised. There are other events you can use as well, depending on your needs such as pageshow or bagebeforeshow.

    $( '#aboutPage' ).live( 'pageinit',function(event){
  alert( 'This page was just enhanced by jQuery Mobile!' );
});

More on jQM events http://jquerymobile.com/demos/1.1.1/docs/api/events.html

Here’s what they say about document.ready:

Important: Use $(document).bind(‘pageinit’), not $(document).ready()

The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as the
DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This event is explained in detail at the bottom of this page.