Loading local jQuery, jQuery UI and other files via RequireJS

Question

I started learning javascript/jQuery and wanted to use RequireJS. The following is my file hierarchy:

my_project/
├── index.php
└── scripts/
    ├── require.js
    ├── loader.js
    ├── app/
    │   ├── app.js  // this is where I'd like to write functions for the app
    │   └── helper/ // this folder is empty for now
    └── lib/
        ├── jquery/
        │    └── 1.10.2/
        │        └── jquery.min.js
        └── jqueryui/
            └── 1.10.3/
                └── jquery-ui.min.js

I read through RequireJS docs and StackOverflow posts (example) related to this and set up RequireJS configs to be something like this-

In my_project/index.php, I have

<script data-main="scripts/loader.js" src="scripts/require.js"></script>

In scripts/loader.js, I have

requirejs.config({
    baseUrl: 'scripts/lib',

    enforceDefine: true,

    paths: {
        "app": '../app', // mapping for my 'scripts/app/' directory
        "jquery": [
            'jquery/1.10.2/jquery.min',
            //'//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min', this works
                ],
        "jquery-ui": [
            'jqueryui/1.10.3/jquery-ui.min',
            //'//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min', this works
                ],
},

    shim: {
        "jquery-ui": {
            exports: "$",
            deps: ["jquery"],
        },
    },
});

In scripts/app/app.js, I have

define(['jquery-ui'], function () {
    .... // some js code here
}

Whenever I test the index.php, I see (in Firebug console) Error: No define call for loader, Error: No define call for jquery and Error: Load timeout for modules: jquery-ui. I can eliminate the last two errors by subbing local jQuery and jQueryUI libraries with CDN based one like Google's (shown above as comments).

I would like to know how to load jquery and jqueryUI from local files without getting Error: No define call for jquery and Error: Load timeout for modules: jquery-ui.

I'm sorry if this a long post. As I mentioned above, I am still learning javascript and am trying my best to keep my code clean. If any experienced coder could help me answer any of the above questions, I would really appreciate the help. Thank you.

PW Kad · Answer 1 · 2013-07-14T01:56:49.513

1

In your define call you need to give any loaded JavaScript a name. You have already shimmed jQueryUI so you shouldn't need to define it again in your PHP file.

Remove jquery-ui from your define statement and leave it blank. If you have another JavaScript file you want to load (let's say for instance session.js) you would say

define(['app/session'], function (session) {

To load it up and then use session.whatever() to reference it.

Next -loading jQuery -

You seem to have renamed your jQuery files and changed its naming convention. By default jQuery would be named jQuery-1.9.2.min.js or something, but in your example you have it under lib/jQuery/1.9.2/jQuery.min.js. I would recommend removing all the jQuery files you have edited and readding it under lib and then setting your require.js config up the default way. Don't try to reinvent the wheel why you are learning a new technology!

See the docs for set up info

http://requirejs.org/docs/jquery.html

edited Jul 14 '13 at 01:56

answered Jul 14 '13 at 01:48

PW Kad

14,953
7
49
82

Thank you @kadumel. I think I've figured out the problem after reading the docs you gave me. BUT I'm facing a new issue which is asked here: http://stackoverflow.com/questions/17636642/referenceerror-jquery-is-not-defined-requiredjs-when-loading-from-local-jquery I would like you to take a look at it if you have time and help me figure out why it's causing the error. Thanks so much again! – user1330974 Jul 14 '13 at 04:57
You get better help around here when you don't get answer and then come back to slightly change it and answer your own question, just FYI – PW Kad Jul 14 '13 at 05:56
I'm sorry if you get upset for me changing the question. I updated the original post (with three questions) after not getting an answer because I'm afraid people are skipping it because it's too long and too many. Your answer wasn't posted until I edited. I answer my question to admit that I made a mistake (not including `requirejs(["app/app"]);`) which turns out to be the fix for the issue above. But, I also make sure to give you credit for directing me to the right resource. Sorry about the misunderstanding. Hope you keep contributing to help others on StackOverflow – user1330974 Jul 14 '13 at 13:43

user1330974 · Answer 2 · 2013-07-14T05:16:32.943

0

Turns out I was getting those loader errors because I missed

requirejs(["app/app"]);

in scripts/loader.js. That makes all three errors go away.

Hope this issue, when faced by another beginner to requireJS like me, will be easily overcome.

Also, please read this, this and this in general if you want to learn more directly from requireJS docs as @kadumel suggested above.

edited Jul 14 '13 at 05:16

answered Jul 14 '13 at 05:05

user1330974

2,500
5
32
60

Loading local jQuery, jQuery UI and other files via RequireJS

2 Answers2