Concatenated Javascript, jQuery execution

Question

I have to bundle all my javascript files into one file. This is the requirement. Now I've set up a couple of grunt tasks to concat my javascript files. Scenario:

jquery.js
jquery.plugin1.js
custom.js
>> combined.js

On my development setup I'm using yepnopejs to load all scripts and excute them on completion. This works fine. All my javascript code works fine except as concatenated file. It seems that jQuery is executed far too early and so some of my selectors don't match the actucal markup.

development
$('input, select').not(':hidden').each(function(){...});
>> length: 21 items

works

production (concated file)
$('input, select').not(':hidden').each(function(){...});
>> length: 0 items

doesn't works.

Initialization

development
yepnope([
    {
      load: 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'
    }, 
    {
    load: 'js/jquery.plugin1.js',
    complete: function() {
        onReady();
    }
}]);

production
$(window).load(function(){
    onReady();
});

I've tried also $(document).ready(function) and so on. I'm pretty sure my initialization part is broken or totally wrong.

can you move your Javascript include location to the bottom of the page? or will that break everything horribly? — Mgetz, Jul 05 '13 at 13:01
@Mgetz but yes, tried your approach on my local machine, this solves the problem. Are there any alternatives? — onigunn, Jul 05 '13 at 13:08
How is the concatenation working? This might be a problem if you join them using the COPY command for example. See: **http://stackoverflow.com/questions/301442/how-do-i-concatenate-javascript-files-into-one-file** and i also found this interesting: **http://www.position-absolute.com/articles/simple-build-script-to-minify-and-concatenate-files-using-node-js/** — thmshd, Jul 05 '13 at 13:26
@thomasjaworski.com I'm using 'grunt-contrib-concat' fot the concatentation which is basically covered by your second link. — onigunn, Jul 05 '13 at 13:32
@onigunn on newer browsers there is the `async` attribute you an use on the script reference itself. On older versions if IE though you would need to use `defer`. The best solution however would be to figure out what in the concatenated scripts is causing the issue. My recommendation would be to surround each of your scripts (assume for now that libaries are ok) in a closure, and have each closure set as "use strict"; that will likely break everything... but will tell you where you have issues. Also... run each of your scripts through JsLint. — Mgetz, Jul 05 '13 at 13:39
@Mgetz I've followed your advice and placed the "use strict" command. It showed me one error, corrected it but it doesn't solved my problem. JSLint likes everything too. Placing the concat. file on the bottom of the HTML page solves the problem immediately. — onigunn, Jul 05 '13 at 13:44
@onigunn then I would talk to the powers that be then about getting permission to change markup. If `$(document).ready()` didn't work, then that would seem to be your only option. I can't think of anyway to deal with this otherwise. — Mgetz, Jul 05 '13 at 13:48
@Mgetz Please sumup your comments as an answer. I think they provide some good informations here. If no-one shows up with something different I'll go and accept yours. — onigunn, Jul 05 '13 at 13:53

Mgetz · Accepted Answer · 2013-07-05T14:09:32.373

In this sort of situation there are several steps that should help debug what is going on:

Try moving the JavaScript reference to the bottom of the page, does this fix it?
1. Does using the async or defer attributes on the script reference solve the issue?
Verify your scripts work under "use strict", inside a closure, and pass JSLint
Does $(document).ready() work?
If step 1 worked and steps 2 and 3 didn't, seek permission to modify the markup as while the fixes provided by step 2 will undoubtedly make things more reliable they won't solve the issue.

Concatenated Javascript, jQuery execution

1 Answers1