ansaurus

Question

Import javascript dynamically with jQuery?

Answer 1

A:

The javascript you load, should itself already be using unique namespaces.

jitter 2009-06-15 16:31:49

Ideally. And the sky should also be green. But it's not. This is not a very helpful answer!

Josh Stodola 2009-06-15 17:18:25

Answer 2

A:

You can do something like this...

var myOtherFramework = null;

$.get("myScript.js", function(data) {
  myOtherFramework = eval("(" + data + ")");
});

And then reference it like...

myOtherFramework.funcName();

Josh Stodola 2009-06-15 17:16:58

This is kind of what I'm doing; however, it won't work because I need to define the var myOtherFramwork's name at runtime. For example, the namespace of the javascript will need to be the UUID of the widget instance. I don't know that until runtime, unfortunately.

slypete 2009-06-15 17:21:21

Well that's as simple as doing this: eval("placeUUIDhere = (" + data + ")");

Josh Stodola 2009-06-15 19:41:13

Answer 3

A:

AS Josh Stodola mentioned creating the variable at runtime isn't the problem

var holdsWidgetUUID = "widgetUUIDValue";
eval(holdsWidgetUUID + "= (" + data + ")");
alert(eval(holdsWidgetUUID));

Or if you prefer

var UUID = "widgetUUID";
var holdsWidgetUUID = "widgetUUIDValue";
window["widgets"] = new Array();
window["widgets"][holdsWidgetUUID] = data;
alert(window["widgets"][holdsWidgetUUID]);

The problem is getting the loaded javascript to work an be callable like dynamicvariablename.methodname()

I have a working solution if you force a certain coding practice upon the included javascript. Maybe this gets you in the right direction.

This is a widgets javascript (works.js). Notive that it's a javascript "class" with internally defined fields and methods. Which by itself keeps namespace pollution low and allows us the achieve the desired calling form x.getInfo()

function () {
    this.type = 1;
    this.color = "red";
    this.getInfo = function() {
        return this.color + ' ' + this.type + ' widget';
    };
}

And this is the file which includes it at runtime in a namespace

<html>
<head>
  <title>Widget Magic?</title>
  <script type='text/javascript' src='jquery.js'></script>
  <script type='text/javascript'>
    var UUID = "widgetUUID";
    var holdsWidgetUUID = "widgetUUIDValue";
    window["widgets"] = new Array();
    $.get("works.js", function(data) {
      window["widgets"][holdsWidgetUUID] = eval("(" + data + ")");
      $(document).ready(function() {
        window["widgets"][holdsWidgetUUID] = new (window["widgets"][holdsWidgetUUID])();
        alert(window["widgets"][holdsWidgetUUID].color);
        alert(window["widgets"][holdsWidgetUUID].getInfo());
      });
    });
  </script>
</head>
<body>
  <p>Just some stuff</p>
</body>
</html>

jitter 2009-06-15 20:59:51

This explanation helped me tremendously, thank you! This method is great for me since I get to specify the widget API.

slypete 2009-06-16 20:48:12

ansaurus

tags:

views:

answers:

Import javascript dynamically with jQuery?

related questions