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

Question

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

sleepwalker · Accepted Answer · 2012-04-23 22:56:07Z

6

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.

edited Apr 23, 2012 at 22:56

answered Apr 23, 2012 at 22:00

sleepwalker

1,0321 gold badge9 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

frequent Over a year ago

Thanks so far. Trying this now. I will post again, if it doesn't work.

frequent Over a year ago

Ok. I'm still getting my error inside jquery-mobile.js, return "mobile" being undefined... What do I have to return here? I'm putting up the source, too. Will be a minute.

sleepwalker Over a year ago

I meant, that you should remove your loaders and in config provide path to jquery.min and jquery-mobile.min libs.

frequent Over a year ago

Getting closer... and an error, that App.start() -inside main.js- is not a function

sleepwalker Over a year ago

Looked through the source code again and cannot find 'app' in your config.

|

Collectives™ on Stack Overflow

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

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related