Custom Javascript Objects with Embedded JQuery
To all of you non coding geeks, you don’t have to read this. It might confuse bewilder bore you to death not be of relevance to you.
As some of you know, I’m a multimedia developer (read: web developer… that seems to be the majority of what I do) at a relatively new University in Southern Ontario, Canada. I’ve been working on a website for first year students to brush up on writing and math skills. Back at the beginning, someone had the idea of having a “virtual campus” as another means of students finding their information.
One thing led to another, it started with Flash, then moved over to an AJAX solution.
I worked on said AJAX solution and had it working relatively nicely. However, due to some usability quirks, I needed to rewrite a huge chunk of code.
I decided to objectify it, purely for my own amusement and further education.
The problem that I kept on having is that whenever I used a JQuery call and needed to reference the object’s properties, it would always give me an undefined error. Being the Actionscript junkie I am, and knowing that Actionscript borrows heavily from Javascript, I tried using parent.variable instead of this.variable.
It all seems to be working at this point. But I thought this might be of some use to someone, somewhere. I thought it was working, however, what using parent.variable did was created a variable outside of both the JQuery and VirtualCampus objects. Not a great idea, however, it served my purpose and was a lot easier than using the VirtualCampus object to extend the JQuery object.
Quick example:
function VirtualCampus() {
this.campus_location = []; //array with locations visited
this.campus_depth = 0; // what level in the nav tree they are at
this.campus_faculty = 0; // id of faculty they entered
this.current_info = []; // Data for current location in VC
$.getJSON(‘virtualcampus/vc.js’, function(jsony){ // Get JSON data for campus
$.each(jsony.location, function(i, item) {
parent.campus_info[i] = [];
parent.campus_info[i][0] = jsony.location[i].name;
parent.campus_info[i][1] = jsony.location[i].file;
parent.campus_info[i][2] = jsony.location[i].depth;
parent.campus_info[i][3] = jsony.location[i].faculty;
});
});
}
So there’s the constructor, that sets variables and gets the JSON data for the VirtualCampus. Notice the parent.campus_info 2D array… that’s stored as global scope. I tried very hard to make it local to the object, but JQuery and my object weren’t playing nice. If anyone has any idea how to get around that, let me know.
Comments
Tell me what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!