Scriptaculous load parameter in FF 2.0.x

Question

Greetings all,

I am attempting to explicitly load the effects.js and builder.js Scriptaculous libraries on a page, using this code:

<script type="text/javascript" src="/javascripts/scriptaculous.js?load=builder,effects"></script>

This works like a charm in FF 3.0.x, IE7 and Opera 9.6.x. It does not work in Firefox 2.0.x, however. The libraries never become loaded. In order to get them to load in FF 2.0.x, I must explicitly reference them with two extra <script /> tags, i.e.:

<script type="text/javascript" src="/javascripts/scriptaculous.js?load=builder,effects"></script>
<script type="text/javascript" src="/javascripts/builder.js"></script>
<script type="text/javascript" src="/javascripts/effects.js"></script>

Does anyone happen to know what the discrepency between FF 2.0 and 3.0 is that causes this behavior? Is there a better solution to my problem?

Thanks for your help!

Answer 1

I've had too much coffee today, so I figure I will give this a go.

One possibility is the load function in scriptaculous.js does not correctly do the processing to include the libraries passed to it as parameters (scriptaculous.js?load=builder,effects).

Try putting in an alert to see if the load function in scriptaculous.js is being entered into, if it is, then the process probably doesn't do what it's supposed to on FF2:

load: function() {
    alert('In the load function!');
    ...rest of code here...

If it isn't, then (maybe) firefox 2 does not want to execute load.

The last part of load seems to do the work for including other libs:

$A(document.getElementsByTagName("script")).findAll( function(s) {
      return (s.src && s.src.match(/scriptaculous\.js(\?.*)?$/))
    }).each( function(s) {
      var path = s.src.replace(/scriptaculous\.js(\?.*)?$/,'');
      var includes = s.src.match(/\?.*load=([a-z,]*)/);
      (includes ? includes[1] : 'builder,effects,dragdrop,controls,slider,sound').split(',').each(
       function(include) { Scriptaculous.require(path+include+'.js') });
    });

From the above code, I can see that the includes variable should parse out the library names, see if that's being assigned anything, replace it with something like:

var includes = s.src.match(/\?.*load=([a-z,]*)/);
alert(includes[0] + ' ' + includes[1]);

That should give you a better idea of what's going on. While this is an interesting little problem, I would definitely go with the solution you proposed:

<script type="text/javascript" src="/javascripts/scriptaculous.js"></script>
<script type="text/javascript" src="/javascripts/builder.js"></script>
<script type="text/javascript" src="/javascripts/effects.js"></script>