last day (15 days later) » 

14:37
Hello, do you mind helping me with a issue?:)
I'll certainly try :)
Thank you, I will write some background info first.
I am creating an application that uses server side technology for creating the views. So I have created a master template that other pages is included into.

Now, I have some JavaScript code that I need to have on ALL pages, and then I have some JavaScript that I only need on a particular page.
However I am having trouble managing this with RequireJS.
Did the question I linked to not assist?
No, I will post code.
require.config({
    'baseUrl': '/myApp',

    'paths': {
        // All my paths
    },

    shim: {
        'jquery': {
            'deps': []
        },
        'jquery-ui': {
            'deps': ['jquery']
        },
        'jquery-tools': {
            'deps': ['jquery', 'jquery-ui']
        }
    }
});

require(['jquery'], function($) {

});
That is the script from main.js
which is loaded in the template
As you see I try to require jquery for all pages here.
14:45
require(['domReady', 'jquery', 'myapp/about', 'jquery-ui', 'jquery-tools'], function(domReady, $, page) {
    domReady(function() {
        page.init();
    });
});
<script type="text/javascript">
    require(['about']);
</script>
Then this code is in the about.jsp
and last:
define(['jquery'], function($) { // module def }
However, this does not load everything in right order :(
What goes wrong?
I want: jquery, jquery-ui, jquery-tools, domReady, myapp/about
I want the script tags to be added like that
I need all the jquery things for instance to be loaded first
Okay, i can see your intentions. It all seems fine
But what happens?
The myapp/about script does not work
because it depends on jquery
the order of the script tags in the html is all wrong
Right, but then I have a problem
I don't believe they matter as RequireJS attempts to laod things as fast as possible
It executes them in order though
14:51
Ah, so it should not matteR?
Should not no. What error do you get? Is it a dependency on $ or something
Does it fail every time you load the page or sometimes?
So even though the script tag of myapp/about is added first, then query with friends. it should not matter since it executes it in the same order as the dependency list?
"RequireJS loads scripts asynchronously and out of order for speed."
From the docs
yeah, ok. But that shouldn't matter when the script is run in the order of the depedency list+
I think you're focussing on something that might not be the issue
14:54
Yeah, probably
I will retry, give me a sec I will check error
I know that you don't need to shim jquery
That already defines itself as a module
not the plugins either?
Yes, plugins but not the main lib
What is shimming?
Can I see your paths?
14:56
I got it to work though
Oh
Shimming is used for non-AMD code
Things that don't use define
from paths:
'lib': 'lib',
'domReady': 'domReady',
'jquery': 'lib/jquery/jquery',
'jquery-ui': 'lib/jquery/plugins/jquery-ui-1.8.12.custom.min',
'jquery-tools': 'lib/jquery/plugins/jquery.tools.min',
Okay cool, and you say it works now?
No
Uncaught TypeError: Object [object Object] has no method 'accordionfp'
$('.highscores').accordionfp();
define(['jquery', 'jquery-ui', 'jquery-tools'], function($) {
define header
Ahhh
It seems like the jquery stuff must be in the require that I use to require the define stuff
Not sure I follow, but always request the modules you explixitly use in the callback even if one of those modules already requires it
15:02
No, it doesn't just randomly works
Stops things loading out of order
Whenever I have random loading issues it tends to be because something isn't setup as a module properly or that shim isn't working
I had a plugin once that referenced jQuery at the top and even shim couldn't solve it so I had to wrap it in a define
Sometimes my code works partly
strange
Is the error coming from your about module?
yes
the one with defnie
I think I know what might be it
15:09
You do?
Your define doesn't declare the other jquery assets as dependencies
So sometimes they happen to load in time
Other times they don't
Try adding them to the define array
define(['jquery', 'app/ui-helper', 'jquery-ui', 'jquery-tools'], function($, uihelper) {
Like that? I tried
No joy?
No :(
Damn, and what line throws the error? I can't see that code from your prev examples
15:14
$('.highscores').accordionfp(); that line
Uncaught TypeError: Object [object Object] has no method 'accordionfp'
And that accordion comes from jquery tools?
yes
require(['domReady', 'jquery', 'jquery-ui', 'jquery-tools', 'app/about'], function(domReady, $, about) {
    domReady(function() {
define(['jquery', 'jquery-ui', 'jquery-tools', 'app/uihelper'], function($, uihelper) {
Are there any probelms with that
So, to keep it concise, the require in about should only load what it needs
require(['domReady', 'myapp/about'], function(domReady, page) {
domReady(function() {
page.init();
});
});
page hould now take care of what it needs, which I think you have done
Oh wait
You have your args in an incorrect order I think
What is uihelper?
from ui-helper: define(['jquery', 'jquery-ui', 'jquery-tools'], function($) { // general code
Okay that is fine, but the args on this line
define(['jquery', 'jquery-ui', 'jquery-tools', 'app/uihelper'], function($, uihelper) {
Are not in the correct order
jquery-ui is the second arg to the callback and you are referencing it as uihelper
This is tricky without the seeing the body of the modules, as I can't see what dependencies you actually need inside each callback
15:21
It seems like it works now!
It just waits for the images to load
So.. all good?
Almost
define(['jquery', 'jquery-ui', 'jquery-tools', 'app/ui-helper'], function($, ui, tools, uihelper) {
changed it to that
and this is the uihelper module: define(['jquery', 'jquery-ui', 'jquery-tools'], function($) {
    $(element).overlay({
but it complains about that
SCRIPT438: Object doesn't support property or method 'overlay'
Right, is that in the uihelper module?
yes
Obviously the ui lib is not loading in the correct order
15:26
sometimes it does not work at all
nothing of the javascript
I will accept your answer, thanks for your help
I don't manage to fix it
Sorry man
Perhaps this will help? - github.com/jrburke/jqueryui-amd
It's a way to use the ui lib as seperate modules from what I can see
And it's written by the RequireJS dev. The syntax looks nice too

last day (15 days later) »