Creating function for head.js gives pretty wild errors in different browsers

Question

I'm building a function for head.js ( http://headjs.com) that will load scripts into it in much the same way as the jQuewy ( http://jquewy.com) library does. However, I'm getting some pretty crazy errors with different browsers. The desired result is to get an alert with the version of jQuery loaded:

 (function() {
  head.js(
   jquewy_get("","jquery","ui")
  );

  head.ready(function(){
   alert($.fn.jquery);
  });

  //Takes arguments and sets them so that it 
  //loads the urls in headjs
  function jquewy_get(){
   var ret = new Array();
   var arg = arguments[0];

   var rand = Math.floor(Math.random()*999*999);
   for (var i = 1; i < arguments.length; i++){
    var arg = arguments[i];
    ret[i] = 'hxxp://jquewy.com/dev/headjs/?name='+arg+'&rand='+rand;
   }
   return ret;
  }

 })();

In Firefox, I get:

$ is undefined on line 39

But even weirder, the script tag is loaded (<script type="text/javascript" src="http://jquewy.com/dev/headjs/?name=ui&rand=717786"></script>), but Firebug says that it has:

Failed to load source for: hxxp://jquewy.com/dev/headjs/?name=ui&rand=717786

Which obviously resolves fine. In Chromium it doesn't even load the script tags, and I haven't bothered to look at any other browsers yet because if it doesn't work in those two then chances are it won't work anywhere else.

You can take a look at the source here: http://jquewy.com/dev/static/headjs/test/

Edit: for those wanting to know the point of this, the point is so that you don't need to remember urls - I'm porting another service I've built called jQuewy, which allows for fast prototyping by loading libraries based on their name. My service will automatically fetch the latest sources and embed them in the page automatically. head.js is another script that does a similar thing (but is much more popular), so I want to make my service compatible with it, so that end users can choose how they load their scripts.

Edit #2: Hardcoding in my links seems to create the same errors. My server uses redirects to point to the right scripts. Is this behaviour normal, and is there a workaround that will be browser independent?

Passing an array to head.js doesn't seem to be explicitly expected or supported by that code. It *might* work I guess. — Pointy, Dec 19 '10 at 15:52
@Pointy, how would you return it in this situation? I want to keep the head.js part very clean and simple, and move all complexity away from there. Thanks — John Hamelink, Dec 19 '10 at 15:56
Also, on that test page Chrome gives me two errors: "jQuery is not defined" and "$ is not defined". — Pointy, Dec 19 '10 at 15:56
@Pointy, those errors come from the script not being loaded on chrome (or chromium) — John Hamelink, Dec 19 '10 at 15:56
@John Hamelink well I can't understand what in the world this whole thing is about, so I can't help you with that decision. What is the point of all this? — Pointy, Dec 19 '10 at 15:56
You could try `head.js.apply(window, jquewy_get(...))` I guess — Pointy, Dec 19 '10 at 15:58
Also: you realize that the return value from "jquewy_get" will be an array with element 0 being null, right? I don't really understand why it skips element zero. — Pointy, Dec 19 '10 at 15:58
The point is so that you don't need to remember urls - I'm porting another service I've built called jquewy, which allows for fast prototyping by loading libraries based on their name. My service will automatically fetch the latest sources and embed them in the page automatically. head.js is another script that does a similar thing (but is much more popular), so I want to make my service compatible with it, so that end users can choose how they load their scripts. — John Hamelink, Dec 19 '10 at 16:00
OK that's a good explanation and I understand that now. What happens if you set up a test with a call to head.js() with a hard-coded list of your URLs? — Pointy, Dec 19 '10 at 16:09
I get the same error. This must mean that the way my server reacts is not liked very much by head.js, correct? Here's how my server reacts to headjs right now: It reads the $_GET['name'] and looks up its database for the url, then redirects to it. My suspicion is the redirect is causing problems. How can I remedy this? (I cannot have the server serving the files, because this defeats the point of the cdn - currently amazon aws for testing purposes). Ps, you can see what it does now yourself here: http://jquewy.com/dev/static/headjs/test/ — John Hamelink, Dec 19 '10 at 16:17
I don't know enough about what head.js does, or really how it attempts to track script loading. That's a hard problem because it's almost always based on quirky, not-standardized browser behavior. — Pointy, Dec 19 '10 at 16:44

score 1 · Accepted Answer · answered Dec 19 '10 at 17:32

1

An error occurs due to the fact that the $ alias for jQuery is not set. Script loaded normally. You can check it by calling

alert(jQuery('#nav').html());

for example. It works. Thus you need to set alias yourself. For example:

window.$ = jQuery;
alert($('#nav').html());

no error as you can see.

BTW, since $ alias can be set any library, you must provide a mechanism for conflict resolution. As is done in jQuery.noConflict().

answered Dec 19 '10 at 17:32

Lex

1,378
11
10

1

P.S. On http://headjs.com/test/headjs.html same error. Author headjs shows an example with script loading but not manipulating. So that lib doesn't work as expected, IMHO. – Lex Dec 19 '10 at 17:37
Thanks, looks like its not my script then. I'll forward this article to the guys over at headjs. – John Hamelink Dec 19 '10 at 22:14

Creating function for head.js gives pretty wild errors in different browsers

1 Answers1