I am making a phonegap/cordova project. I created a skeleton project using mand line, as the guide suggests to making a new android/phonegap project.

In the index.html file created there is a piece of code app.initialize(), and the code it es from a file called index.js.

My question is, do I have to have this piece of code in all my html files, since i will be using jQueryMobile to do the front-end, I might need to have several html files.

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicity call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

I am making a phonegap/cordova project. I created a skeleton project using mand line, as the guide suggests to making a new android/phonegap project.

In the index.html file created there is a piece of code app.initialize(), and the code it es from a file called index.js.

My question is, do I have to have this piece of code in all my html files, since i will be using jQueryMobile to do the front-end, I might need to have several html files.

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicity call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

• javascript
• android
• html
• cordova
• jquery-mobile

• 1 If you are not going to call the new pages using ajax (that means, simply opening the new .html like a new page) then yep, call on all. – RaphaelDDL Commented May 10, 2013 at 17:52
• 1 Reading a book, it says that when detecting a external link to a page, hosted on the same server/domain, jQueryMobile will call that page with Ajax. I have tried it and the other page works smoothly, I just need to be sure if this is how it is supposed to work. – Lali Pali Commented May 11, 2013 at 13:40

1 Answer 1

Since all pages are called through Ajax calls, in theory you don't need to add that line in all your pages. But in some cases you might want to add it, for example if there might be a chance that the particular page might not be called from an ajax call, or a user for some strange reason lands on that page, instead of your index page.