-1

I want to use RequireJs in my project, but I found that I can't write the following code

<html>
   <head>
   </head>
   <body>
       <input type="button"  />
       <script>
           // Use the jQuery
           $(function() {
              //some code
             }
           )
       </script>
       <input />
       <input />

       // I had added the jQuery in required shim and jQuery is working in RequireJs.
       <script data-main="scripts/main" src="/scripts/require.js"></script>
   </body>
</html>

There was an error $ is undefined, when the page was loaded. I looked up a lot articles, but I can't solve it. How can I handle this? I don't want to move the sample js function to .js file.

user2306785
  • 3
  • 2
  • 2
    include – user2361114 May 18 '13 at 08:10
  • otherwise include this in head section – user2361114 May 18 '13 at 08:11
  • If you are not going to use jQuery in the script tag in head, if you just want the on $(document).ready event listener. Then you could do `document.addEventListener('DOMContentLoaded', function() { //some code })` If you want to support < internet explorer 9 you can have a look at this thread http://stackoverflow.com/questions/799981/ – Trond Hatlen May 18 '13 at 08:31
  • From Mr RequireJS himself: [_This project shows how jQuery can be used with RequireJS_](https://github.com/jrburke/require-jquery). – c24w May 20 '13 at 13:08

5 Answers5

1

As you wrote in your question:

All js functions need in .js file if I use the requirejs?

And with the definition of RequireJS:

RequireJS is a JavaScript file and module loader. Using a modular script loader like RequireJS will improve the speed and quality of your code.

So doing such inserting inline <script> tags in your page is not a good idea.

However, in answer to your question, because RequireJS load the scripts asynchronously, so you don't know when jQuery will load, and you can not use inline scripts as old schools, you need to use define or require methods as George Reith wrote in the answer.

Community
  • 1
  • 1
0

You also have to include jQuery. There is a whole manual page devoted to this on requirejs.org which should help you out.

Maybe what you want is also explained here. Taken from there:

require(["helper/util"], function(util) {
    //This function is called when scripts/helper/util.js is loaded.
    //If util.js calls define(), then this function is not fired until
    //util's dependencies have loaded, and the util argument will hold
    //the module value for "helper/util".
});
crackmigg
  • 4,576
  • 2
  • 26
  • 37
0

Require.js doesn't even implement $. Why are you even wrapping you function in $(..)?

MofX
  • 1,515
  • 12
  • 18
0

Try moving your sample script tag after the requirejs script tag. Currently your sample function is executed before requirejs gets a chance to load jQuery.

Tommi Komulainen
  • 2,462
  • 1
  • 16
  • 16
  • I tried to move `` in the , but it was not working. – user2306785 May 18 '13 at 08:21
  • I guess you need to wrap your sample function also in a `require(["jquery"], function($) { .. })` (or was it `define` I always get those mixed up) to let requirejs know you need jquery, otherwise it can decide not to load it. – Tommi Komulainen May 18 '13 at 08:29
0

First things first $ means nothing in JavaScript but is used by the popular jQuery library. JavaScript !== jQuery.

Secondly assuming you have loaded jQuery via require.js you need to put your initial script tag after <script data-main="scripts/main" src="/scripts/require.js"></script> as it is being called before require.js.

Thirdly require.js asynchronously loads files so you must wrap your code in the require() or define() tag with a list of dependancies so it only calls them once they have been loaded.

e.g.

<html>
   <head>
       <script data-main="scripts/main" src="/scripts/require.js"></script>
   </head>
   <body>
       <input type="button"  />
       <script>
          /* 
             RequireJS is asynchronous so you must wrap your code
             in "require(["jQuery"], ...)" so it only calls it once
             jQuery has been loaded. Each included script is available 
             to you as a parameter in the callback function.
          */
          require(["jQuery"], function($) {
              $(function() {
              });
          });
       </script>
       <input />
       <input />
   </body>
</html>

Your settings should look like this:

requirejs.config({
    paths: {
        'jQuery': 'path/to/jquery'
    },
    shim: {
        'jQuery': {
            exports: '$'
        }
    }
});
George Reith
  • 12,204
  • 16
  • 71
  • 141
  • Thanks your answer. But if the js code is minify, that is not good for me. I must include jQuery twice. `main.js` is one, in the page is two. – user2306785 May 18 '13 at 09:15
  • @user2306785 This isn't including it twice, and minification doesn't affect anything (it's still the same code). You include it in main.js and by using `require()` you tell your script to wait for it to load and ensure your code is scoped correctly to use it. You aren't loading it twice. – George Reith May 18 '13 at 09:19
  • How can I tell the `require()` to find the `jQuery` code in the main.js, because all the .js files are combined to one file. – user2306785 May 18 '13 at 11:16
  • @user2306785 You can't and you have completely missed the point of require.js which is for modular code - your code isn't modular. You should keep your javascript separate during development and then combine them via the [require.js optimizer](http://requirejs.org/docs/optimization.html) when you want to publish them. If you don't know why you are using something then don't use it. – George Reith May 18 '13 at 11:21