CODEWITHSUNDEEP
javascriptjquery-mobile
Ojonugwa Jude Ochalifu
Ojonugwa Jude Ochalifu

Reputation: 27237

Starting point of jQuery Mobile applications

Am sorry if this is a "nooby" question, but where is the starting point of jQuery mobile applications? Something like the onCreate() method called when starting an Activity in Android.If for example i have a condition i want to check before anything else happens (say i want to display or hide a button in the home screen if a condition is true or false).

if (localStorage.registered) {
     //show button A
} else {
     //show button B
}

Where would i put the logic to do this to make sure it is the first thing that gets done?

Upvotes: 1

Views: 84

Answers (1)

Gajotres
Gajotres

Reputation: 57309

First first point that triggers during jQuery Mobile initialization is mobileinit event:

$( document ).on( "mobileinit", function() {
    // We want popups to cover the page behind them with a dark background
    $.mobile.popup.prototype.options.overlayTheme = "b";
    // Set a namespace for jQuery Mobile data attributes
    $.mobile.ns = "jqm-";
});

This event is triggered after jQuery Mobile has finished loading, but before it has started enhancing the start page. Thus, handlers of this event have the opportunity to modify jQuery Mobile's global configuration options and all the widgets' default option values before they influence the library's behavior.

Basically everything you need to do immediately do it at this point.

No point in doing it before because jQuery Mobile is not even initialized.

One last thing, this event must be initialized before jQuery Mobile is initilized, like this (or it want work):

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
    $( document ).on( "mobileinit", function() {
        // We want popups to cover the page behind them with a dark background
        $.mobile.popup.prototype.options.overlayTheme = "b";
        // Set a namespace for jQuery Mobile data attributes
        $.mobile.ns = "jqm-";
    });
</script>
<script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

If you are creating a Phonegap app and you also want to include Phonegap (Cordopva) then do it like this:

var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();

document.addEventListener("deviceReady", deviceReady, false);

function deviceReady() {
  deviceReadyDeferred.resolve();
}

$(document).one("mobileinit", function () {
  jqmReadyDeferred.resolve();
});

$.when(deviceReadyDeferred, jqmReadyDeferred).then(doWhenBothFrameworksLoaded);

function doWhenBothFrameworksLoaded() {

}

Upvotes: 2

Related Questions