Question

I think I have a problem with closures and execution contexts, although I’m not really sure.

Let me explain exactly what I’m trying to do and why I’ve coded it in the way I have:

1) I’m building a javascript powered interface, the interface contains different apps (I’m calling them widgets).

2) All the widgets are moveable/dragable/closeable/resizeable etc.. I’m trying to achieve something like a desktop interface although has to be said that what I’ve got is far less than a web based opperating system. But that is what I’m aiming for.

3) So I needed a way for the JS code to load each of these widgets without knowing which widgets exist and/or anything else about them. I decided that when the interface is loading it should call a php script to find out the names of the widgets.

4) The JS code has the name of each widget, it now loops through them all calling another php script, this php script will feed back the code for loading that particular widget and the html code to display it. The JS appends elements to the screen for the display and then it loads the JS code for the widget.

5) This is the tricky part, actually loading the code for each widget, I did it like this:

var func=new Function(ajax.responseText);
func();

And it works fine, or appears to atleast.

6) Now I have a problem with objects and arrays and I think it has something to do with execution contexts.

Array Example:

var myArray=new Array('foo', 'bar', 'fooBar', 'barFoo');

Looks OK to me, no problem with the actual array (unless I typed something wrong in there 🙂 can’t work without my Net Beans editor) I tried running this as a seperate script and it works fine, ie; with: alert(myArray[0]); resulting in foo

Array Problem:

My JS code can’t do anything usefull with this array because actually calling alert(myArray[0]); will result in foo, bar, fooBar, barFoo.. No idea why this happens really but it’s really messing everything up now.

Object Example:

var myObject=new Object();
myObject.a='foo';
myObject.b='bar';
myObject.c='fooBar';
myObject.d='barFoo';

Again, object works fine when run by it’s self.

Object Problem:

Very similar problem as with arrays, calling alert(myObject['a']); will actually result in [object Object],[object Object],[object Object], [object Object] …

…so that’s the same problem as with arrays, but it gets even worse with objects, if I call alert(myObject.a); (notice that i didn’t use [‘a’] this time) it will just result in undefined.

So to backtrack a little and further explain the way that everything is tied in together:

1) when the JS loads it will call a php script which returns a JSON encoded object containing 3 keys(‘functions’, ‘JSscript’, ‘Other’). Each key contains the source code of another javacript file. These are all loaded using a dynamically created function like: var func=new Function(ajax.responseText).

2) Then it’s these new javascript codes that call another php script for further directions.

3) Php responds with JSON, which is evaluated inside a dynamically created function and stored in a new variable.

4) The new variable is now an object containing maybe 3 keys (html, javascript, anotherObject) The html is appended into the document, The javscript is executed in a new function as above.

5) The problems come with objects/arrays that exist in the JS executed in my last statement.

So if anyone can help me out on this I’d be greatfull, and if you need further explaination or code examples then obviously I’ll be happy to provide.

Thanks,

Richard

Answer 1

Ohhhh.. Turns out this was nothing to do with closures or any other javascript for that matter, sorry to excite you all.

It was caused by a php script, and not even the php script that handles ajax requests, it was actually the script that reads the javascript files and then JSONs them. That script also has a find and replace function like a simple templating system where it will find all the words between ‘[‘ & ‘]’ which unfortunately means any arrays in the javascript will get bungled up.

I used the find and replace with square braces because it was originally meant for html templating, I just didn’t consider it properly when I started using the system in my JS code aswell.

So to clarify, my php script would change JS of obj[var].description into obj.description which is valid JS so didn’t flag any errors for me to notice it.

Ohhhhh. What a loser 🙂