Using spinnerPlugin on page load is giving error.

Question

I have 2 pages. Index.html and detail.html. On index.html, when I click login, I call this function

$('form').submit(function (event) { //Trigger on form submit        
    var options = { dimBackground: true };
    SpinnerPlugin.activityStart("Loading...", options);
});

It works perfectly. But on detail.html, I call this

$(document).ready(function () {
    var options = { dimBackground: true };
    SpinnerPlugin.activityStart("Loading...", options);
});

And it gives me the following error.

Uncaught ReferenceError: SpinnerPlugin is not defined

I have installed the SpinnerPlugin using xml as well. Wat should I do? Why is it working on index.html and not on detail.html?

Answer 1

Spinner plugin will only be available after the device ready event. This means that you should wrap your code with it:

$(document).ready(function () {
  document.addEventListener("deviceready", onDeviceReady, false);
});

function onDeviceReady() {
  var options = { dimBackground: true };
  SpinnerPlugin.activityStart("Loading...", options);
}