Cordova 2.2.0 on iOS - RequireJS won't load Cordova correctly

Question

I\'m currently developing a webapp using Cordova (Phonegap), Backbone and JQtouch. Among other things, I need to add events in the user calendar.

Everything works fi

Answer 1

Update to Cordova-2.4.0 and you can lazy-load it with RequireJS- as was mentioned as a release note on their blog: http://shazronatadobe.wordpress.com/2013/02/08/whats-new-in-cordova-ios-2-4-0/

Answer 2

Sorry to answer my own question.

It was what I thought in my last edit: RequireJS is messing with Cordova 2.2.0!

Before, I used this code to load cordova:

require.config({
  paths: {
    cordova: 'libs/cordova/cordova-2.2.0', ...

Before any of my script which use cordova, I was writing:

define([
  'jquery',
  'cordova',
  ...
], function($) { ... }

In my index.html, I had:

<script data-main="js/main" src="js/libs/require/require-jquery.js"></script>

And it worked well with cordova 2.0.0! But with cordova 2.2.0, this is just WRONG.

To resolve my problem:

I got rid of everything about cordova in the previous lines.

• No more cordova in require.config.
• No more cordova in the define part of my js functions.

Instead, I added just one line in my index.html:

<script type="text/javascript" src="libs/cordova/cordova-2.2.0.js"></script>
<script data-main="js/main" src="js/libs/require/require-jquery.js"></script>

And everything works fine! I can call cordova.exec() again! (Tested on iOS 4, iOS 6, and on iPhone 5).

To be honest, I don't understand very well how all of this work. I just suppose that cordova needs to be loaded before everything else (like jquery), and RequireJS is not good at doing this (or I don't know how to use it).

It was awful going through this. I'm glad it's over :)

Anyway, I hope this will be useful for someone.

Answer 3

In your require.config object, you need to export cordova via the shim attribute:

require.config({
   baseUrl: 'js',
   paths: {
      cordova: '../lib/cordova/cordova-2.2.0'
   },
   shim: {
      cordova: {
         exports: 'cordova'
      }
   }
});

It is best to define a module to access cordova's exec module:

/*global define */

define(['cordova'], function (cordova) {
   'use strict';

   return cordova.require('cordova/exec');
});

Creating a custom plugin is now easy:

/*global define */

define(['plugins/cordovaExec'], function (cordovaExec) {
   'use strict';

   return function showToast(callback, message) {
      cordovaExec(callback, function (error) {}, "Toaster", "show", [message]);
   };
});

You could do it in one module only:

/*global define */

define(['cordova'], function (cordova) {
   'use strict';

   var exec = cordova.require('cordova/exec');

   return function showToast(callback, message) {
      exec(callback, function (error) {}, "Toaster", "show", [message]);
   };
});

Hope that helps :)