jquery mobile page loading widget not working

Question

Am building an app using jquery mobile, backbone.js, marionette.js and require.js. Am currently trying to use the jQuery mobile page loading widget in a view but i get this error

Uncaught TypeError: Cannot read property 'loader' of undefined 

The start point for my app looks like this

 require.config({
    paths: {
         jquery: 'vendor/jquery-1.9.1.min',
        'jquery.mobile': 'vendor/jquery.mobile-1.3',
        'jquery.mobile-config': 'vendor/jquery.mobile.config',
        underscore: 'vendor/backbone/underscore',
        backbone: 'vendor/backbone/backbone',
        marionette: 'vendor/marionette/backbone.marionette',
        text: 'vendor/text'
    },

    shim: {
        underscore: {
            exports: '_'
        },

        backbone: {
            exports: 'Backbone',
            deps: ['jquery','underscore']
        },

        'jquery.mobile-config': ['jquery'],
        'jquery.mobile': ['jquery','jquery.mobile-config'],

        marionette: {
            exports: 'Backbone.Marionette',
            deps: ['backbone']
        }
    }
});

require(['jquery','app', 'jquery.mobile'], function ($, App) {
    $(function() {
        App.start();
    });
});

the jquery.mobile.config file looks like this

define(['jquery'], function ($) {
      $(document).bind("mobileinit", function () {
          $.extend(  $.mobile , {autoInitializePage: false});
          $.mobile.ajaxEnabled = false;
          $.mobile.linkBindingEnabled = false;
          $.mobile.hashListeningEnabled = false;
          $.mobile.pushStateEnabled = false;
      });
});

and the view looks like this

define(['jquery', 'marionette','text!templates/login.html'], function ($, marionette, ViewTemplate) {

    'use strict';

    var LoginView = marionette.ItemView.extend({

        template: _.template(ViewTemplate),

        events: {
            'click #login-btn': 'login'
        },

        login: function (event) {

            $.mobile.loading('show', {
                text: 'Please wait',
                textVisible: true
            });
        }
    });

    return LoginView;
});

What could be the problem?

Answer 1

Could be DOM not ready yet, jqm not loaded yet try using something like that (or equivalent):

jQuery(document).ready(function () {
    viewModel.login();
});