enhance.js libraries onScriptLoaded running before jQuery loaded

Question

See this demo from Filament Group using their Progressive Enhancement enhance.js library

Modifying to give :-

<script type="text/javascript" src="../_shared/EnhanceJS/enhance.js"></script>
<script type="text/javascript"> 
// Run capabilities test
enhance({
loadScripts: [
 {src: 'js/excanvas.js', iecondition: 'all'},
 '../_shared/jquery.min.js',
 'js/visualize.jQuery.js',
 'js/example.js'
],
loadStyles: [
'css/visualize.css',
'css/visualize-dark.css'
] 
}); 

    alert($);

</script>

I get an "$ is undefined error" on the alert presumably because jQuery has not loaded yet.

Note - the alert($) is just for debugging - I am trying to do something with that e.g. $('some-selector') - and no $(handler) or $(document).ready etc don't work either - jquery is not loaded, $ is not defined.

enhance's onScriptLoaded looks like it should do he trick but if I add in

onScriptsLoaded:[runMyCode()]

and later

function runMyCode()
{
    alert("runMyCode was called");
    alert($);
}

The first alert works but $ is still not defined.

If I call runMyCode on a click event of a button it does work.

So the question is - how can you run code once all scripts have finished loading with enhance.js?

P.S. Same problem verified in IE8/FF3/Chrome7

for debugging you should use a console and `console.log($)` to see a tree like resource for an object. — RobertPitt, Nov 09 '10 at 14:05
@Robert - its $(document).ready not $(document).read - rolling back your edit. http://api.jquery.com/ready/ — Ryan, Nov 09 '10 at 14:12

Pointy · Answer 1 · 2010-11-09T14:13:02.733

3

I think this may be a problem:

onScriptsLoaded:[runMyCode()]

have you tried (assuming the array notation is correct): (edit — it is not correct)

onScriptsLoaded: [runMyCode]

? The first way, you're calling your function at the time you're setting up the library. You want to pass just the reference to your function instead.

edit actually it should just be:

onScriptsLoaded: runMyCode

I don't know where the array came from; it's definitely not mentioned in the "enhance.js" documentation.

edited Nov 09 '10 at 14:13

answered Nov 09 '10 at 14:05

Pointy

405,095
59
585
614

Afraid thats not it - has to be [runMyCode()] and the function is being called (you get the first alert) - its that its being called before $ is defined by jQuery libs. – Ryan Nov 09 '10 at 14:08
1

Why does it "have to be `[runMyCode()]`? That makes no sense. Have you tried what I suggested? Of course you get the alert - **you are calling the function** so it will run at the time you're setting up the "enhance" library, **not** when the scripts are loaded. – Pointy Nov 09 '10 at 14:09
1

I'm pretty sure @Pointy is right, @Ryan - you need to pass the function pointer so that enhance can call it later. If you pass it with runMyCode(), the function will get executed and the result will be passed to enhance instead. – Dexter Nov 09 '10 at 14:13
Yes I did try what you suggested, the first version - which was wrong. Don't get all stroppy unless you are whiter than white! ;) Thanks for the help +1 – Ryan Nov 09 '10 at 14:22
Right sorry about that - I am unfamiliar with "enhance.js" and I typed that before checking its documentation :-) – Pointy Nov 09 '10 at 14:48

Nick Craver · Accepted Answer · 2010-11-09T14:11:58.930

I think this is what you're after, note that onScriptsLoaded is used directly as a callback, so it should be a function, not an array:

enhance({
   loadScripts: [
    {src: 'js/excanvas.js', iecondition: 'all'},
    '../_shared/jquery.min.js',
    'js/visualize.jQuery.js',
    'js/example.js'
   ],
   loadStyles: [
    'css/visualize.css',
    'css/visualize-dark.css'
   ],
   onScriptsLoaded: function() { alert($); }
});

Or more generally for a function, pass just the reference like this:

   onScriptsLoaded: runMyCode

The reason onScriptsLoaded:[runMyCode()] "kind of" works is it's immediately invoking the runMyCode function (at the time this line runs, not when the scripts finish) and makes an array from that result. This will actually throw an error when scripts do finish, since onScriptsLoaded is expected to be a callback function, not an array.

@Pointy - I see where he's having issues now, it's expecting a direct function reference — Nick Craver, Nov 09 '10 at 14:11
Yes I edited my answer - I had guessed that maybe the library would accept an array of functions, though of course that would be pretty unconventional. — Pointy, Nov 09 '10 at 14:14

enhance.js libraries onScriptLoaded running before jQuery loaded

2 Answers2