CODEWITHSUNDEEP
jqueryjquery-mobileasynchronousrequirejs
frequent
frequent

Reputation: 28513

how to get jquery-mobile and dependend plugins to work with require.js?

I'm sitting on my first attempt on implementing Require.js and although I'm trying to follow both of these tutorials (here and here) I don't quite get it to work. This is what I have so far:

Inside my index file:

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

Inside main.js

require.config({ baseUrl: "../js/",
  paths: {       
   "jq-loader":    "libs/jquery/jquery",
   "jqm-loader":   "libs/jquery-mobile/jquery-mobile",
   "someplug":     "libs/someplug/somplug",
   }
 });
// define app and dependencies??? - not sure what goes here? All plugins I'm using?
require(['app','order!libs/jquery/jquery', 'order!libs/jquery-mobile/jquery-mobile'], 

function(App){
    App.start();
    });

Inside jquery.js

 define([ 'order!libs/jquery/jquery.min' ], function(){ return $; });

Inside jquery.js (which is depending on Jquery)

 // ERROR here in "mobile" being undefined
 define(['order!libs/jquery-mobile/jquery-mobile.min'], function(){ return mobile; });

And app.js

define([ 'jq-loader', 'jqm-loader'], function($, mobile){
    var start = function() {
    $(document).ready(function() {
        alert("Hello world!");
        })
      }
     return {"start":start};
   });

I'm happy I have made it so far, but would really like to see everything clicking. Right now, I'm getting an error mobile is not defined inside my jquery-mobile.js file. I guess because Jquery-Mobile does not really belong where it is...

Can someone shed some light? Thanks a lot!

EDIT:
Here is a link to my sample setup

Upvotes: 2

Views: 1783

Answers (1)

sleepwalker
sleepwalker

Reputation: 1032

Seems to me that at that moment jqm just knows nothing about jquery. So you get an error. If to use such loaders, maybe it's needed to load jquery in one require block. Than in callback load jqm using one more require. But you don't need these wrappers-loaders to load jquery with jqm.

In main js at first load jquery, than jqm. That will be enough. Also you don't have to define them in your app.js.

Main.js should look something like:

require.config({ baseUrl: "../js/",
  paths: {  
   "app": "path to app",
   "jquery":    "path to jquery",
   "jqm":   "path to jqueryMobile",
   "someplug":     "libs/someplug/somplug",
   }
});
require(['order!jquery', 'order!jqm', 'app'], 

function(jquery, jqm, App){
    App.start();
    });

And your app.js:

define([], function(){
  var start = function() {
  $(document).ready(function() {
    alert("Hello world!");
  })
  }
  return {"start":start};
  });

Please, let me know if it won't help and upload your sources somewhere. Regards.

Upvotes: 6

Related Questions