I am doing a script, like:
I have anonymous function "xhr.onreadystatechange = function() {}" in the method "this.update" of an object that receives 2 arrays through AJAX. I need these 2 arrays to be assigned to this.images and this.folders, respectively, through this anonymous function. I try to use "var self" technique, but it doesn't work.
I was writing my classes in an old fashion until today when I came across a new design pattern. Javascript is not an established OOP like C++ or Java. It doesn't have any easy way to create classes and to make private/public methods or properties as well as class-constructor. But it could be done in many ways.
My old way of OO design in Javascript was like following:
Code:
Those who were trying to write constructor and access public vars from private or vice versa, you would have probably faced some minor difficulties. But it was doable.
Now, the challenge is how can we make things cleaner and better. Here's the procedure I came up with:
Code:
I just released javascript lib that really helps to develop robust and clear js-scenarios following the OOP directions. The library is compatible with wide range of browsers on different platforms, including Netscape 4.x, Netscape 6.x, Netscape 7.x, Opera 6, Opera 7, Mozilla 1.0, IE 4, IE 5, IE 6.
View 3 Replies View RelatedAny websites or good books to learn real heavy object oriented javascript?
View 1 Replies View RelatedI'm pretty new to programming object oriented javascript and I'm wondering if I could get some quick advice.
Code JavaScript:
When I do checkAll(true), it checks all of the athletes, but, it throws an error saying:
Why is it saying setChecked is not a function?
I will be the first to admit, I don't know much about JS and am just starting to wrap my mind around object oriented js. I have this small bit of code that has been giving me problems for days.
playlistItems[numItems-1] = soundManager.createSound({
id : songId,
url : $(this).attr('href'),
whileloading : player.whileloading,
onfinish: next
});
"next" is a function on the same object that playlistItems is defined on, but it doesn't ever seem to fire. I tried this.next as well, but it just gives me a runtime error....
Can someone tell me all the OOP's that can be made from javascript.
View 3 Replies View RelatedHow to do this:
function MyObject(){
Error messages I am getting on above are: this.callMe(); is not a function callMe(); is not defined
The problems with the setTimeout and setInterval functions provided in Javascript are twofold. First, you can't call a local object method without losing your scope, and second, you can't pass objects to the function, since the function call is implemented as a string.
The Timer class solves these difficulties by employing a static array to store the parent object and function arguments until the function is called.
This class is provided as-is and pro bono, so go ahead and muck with it if you see things that could be done better.
Thanks to WA for giving me the idea for this (albeit indirectly)!
Updated 4/18/2003: Footprint decreased, minor code improvements.
Updated 5/3/2003: Minor comment clarification; no code changes.
Updated 5/10/2003: Minor code improvements.
// The constructor should be called with
// the parent object (optional, defaults to window).
function Timer(){
this.obj = (arguments.length)?arguments[0]:window;
return this;
}
// The set functions should be called with:
// - The name of the object method (as a string) (required)
// - The millisecond delay (required)
// - Any number of extra arguments, which will all be
// passed to the method when it is evaluated.
Timer.prototype.setInterval = function(func, msec){
var i = Timer.getNew();
var t = Timer.buildCall(this.obj, i, arguments);
Timer.set[i].timer = window.setInterval(t,msec);
return i;
}
Timer.prototype.setTimeout = function(func, msec){
var i = Timer.getNew();
Timer.buildCall(this.obj, i, arguments);
Timer.set[i].timer = window.setTimeout("Timer.callOnce("+i+");",msec);
return i;
}
// The clear functions should be called with
// the return value from the equivalent set function.
Timer.prototype.clearInterval = function(i){
if(!Timer.set[i]) return;
window.clearInterval(Timer.set[i].timer);
Timer.set[i] = null;
}
Timer.prototype.clearTimeout = function(i){
if(!Timer.set[i]) return;
window.clearTimeout(Timer.set[i].timer);
Timer.set[i] = null;
}
// Private data
Timer.set = new Array();
Timer.buildCall = function(obj, i, args){
var t = "";
Timer.set[i] = new Array();
if(obj != window){
Timer.set[i].obj = obj;
t = "Timer.set["+i+"].obj.";
}
t += args[0]+"(";
if(args.length > 2){
Timer.set[i][0] = args[2];
t += "Timer.set["+i+"][0]";
for(var j=1; (j+2)<args.length; j++){
Timer.set[i][j] = args[j+2];
t += ", Timer.set["+i+"]["+j+"]";
}}
t += ");";
Timer.set[i].call = t;
return t;
}
Timer.callOnce = function(i){
if(!Timer.set[i]) return;
eval(Timer.set[i].call);
Timer.set[i] = null;
}
Timer.getNew = function(){
var i = 0;
while(Timer.set[i]) i++;
return i;
}
Here's an example of the code in action:
function Ticker(){
this.count = 0;
this.timer = new Timer(this);
}
Ticker.prototype.tick = function(d){
this.count+=d;
window.status = ""+this.count;
this.timer.setTimeout("tick", 1000, d);
}
window.onload = function(){
var ticker = new Ticker();
ticker.tick(1);
}
I'm trying to convert some Procedural code to be more Object Oriented and I'm stuck...
The page is really simple:
It's just a big picture w/ a caption under it, and a few thumbnail pics off to the side, that when clicked, replace the big picture as well as swap out the caption for a new one.
In the code (external JS file):
I've got 2 arrays:
One that holds the thumbnail image file URLs, and the other that holds the captions.
And a function:
I've created an object prototype that I can instantiate in order to:
1.) create the event: do the actual swapping of the thumbnail, and the changing of the caption.
2.) and attach that event to the thumbnail's link onclick event handler.
The code below is the closest I've come to making it work. The problem is that when I click any of the thumbnail links it only executes the last event instead of the one that corresponds to the link that was just clicked. Hopefully someone can take a look at my code and let me know what I'm doing wrong.
Simplified version of the code:
The x,y,z variable assignments are only in the window.onload function for the sake of clarity, but the event object instantiation block has to be in there for anything to work at all.
I know that the event0,event1,event2 objects work, and are attached to the onclick handler because they will swap the last thumbnail and caption when I click any of the thumbnail links. Of course that's the problem now... any click only activates the last event. It's like it attached the last event to all the onclick event handlers.
In fact, if I only create the event0 object, it works like it's supposed to... but when I create the event1 object, it does what it's supposed to and it takes over for event0. Creating event2 makes it take over for all of them. Each subsequent event# object seems to attach its own addy[ ] and caption[ ] to each previous x[ ] link.
I am trying to make a round corners script in object oriented programming method. This is purely for learning purposes.
The script is no where near complete but I am already having problems with it.
I am trying out the techniques described in 'David Flanagan ' text book 'JavaScript: The Definitive Guide, 5th Edition'
This code is called from html page which once working will place a round container around element
The selector parameter in Custom_rounded_container function is defined because only the else part of the if statement in Custom_rounded_container is executing. I put this in because few people at other forums thought the problem was because of the selector parameter being undefined.
External Javascript file
I am trying to make a round corners script in object oriented programming method. This is purely for learning purposes.
The script is no where near complete but I am already having problems with it.
I am trying out the techniques described in 'David Flanagan ' text book 'JavaScript: The Definitive Guide, 5th Edition'
This code is called from html page which once working will place a round container around element
Code:
Javascript functions below
Code:
Trying to figure out OO programming for JavaScript and I'm totally lost.
Here's what I'm trying to do:
I'm posting search data to a PHP form to run a query on a database.
The structure is sort of like this:
So I'm thinking I need to create search objects or arrays. Initially, I thought I could do something like this:
Code:
This doesn't seem to work. It says object not defined whenever I try to do something.
I've also tried creating a JSON object like this:
Code:
This will allow me retrieve the data like I want to:
Code:
The problem is I can't figure out how to add data to the JSON object without manually typing it in. I need to be able to loop through form elements on my HTML page and set them to these variables. I'm using jQuery and doing something like this:
Code:
We all know that feature detection technique works from very beggining
of user-agents supporting JavaScript. We can alway check if eg.
document has a write property or smth else:
if(document.write) {
}
We could do that for all of objects, so i have been surprised when i
found 'in' operator, which for above example would be used like this:
if("write" in document) {
}
So i have questioned myself what for ? I can always do:
if(document["write"]) {
}
or even
var prop = [...];
if(document[prop]) {
}
which is supported better then 'in' operator ('in' is supported since
W. IE 5.5 and NN 6 - around 2000 year). I can only guess that 'in' was
provided in W. IE 5.5 only for convenience... but that is my guess and
someone more knowlegable could write here some more opinions on this
operator...
I'm planning on making a website which is mainly just a gallery of images.
The site will essentially look like one page with a jCarousel on it, when the user clicks left or right on the carousel, I would like the URL to change but for the animation not to get interupted.
I would also need to change some HTML on the page too, essentially each image will have a Facebook 'like' button and that will need to change to the corresponding URL.
The carousel is going to be database driven and dynamically built up with potentially 1000's of images, so I'm not sure what the best technique for this would be? I'm building it in ASP.NET / Ajax and using the SlideJS carousel [code]...
I'm looking for different JS form validation techniques. I've seen quite a few but nothing that really stands out. I'm particularly interested in finding design techniques...ie: how and where are the errors displayed inside a form? I realize that I can't count on JS for validation, but I'm trying to add an assistive technology to make a web form feel more like a web application. I'd love to see your favorite way of displaying form errors via JS. I've got a few of my own but if you've ever tried to do this you know it's a difficult problem to handle the general case.
View 7 Replies View RelatedThis is what I'm attempting at the moment, links is an array. Should this work? I understand that HTML headers cannot contain complex datasets like arrays, so what format is the data sent in? Ie. how do I decompose the array on the PHP end? Or is there a better way entirely of doing this?
$.ajax({
type: "POST",
url: "http://asdfasdf.heliohost.org/multiurl.php",
[code]....
I just got this script for a countdown on a website and I got it to work locally but when I upload it to the server i get the error "index.html:22 Uncaught TypeError: Object [object Object] has no method 'fancycountdown'".
I have checked to make sure all other javascript files are loading and they are and I can't figure out whats wrong. You can see it [URL]
I have the following code:
A = {
"value": "a",
};
B = A ;
B.value = "b";
alert (A.value); // => b
I expected A.value to be "a". how can I change values of a new object, without changing the parent-object?
13 line causes this exception. Function is called insied of ready() handler. function renderGridSystemRecursively(scheme, container){
[Code]...
I have come across an issue that only happens with IE.I have a custom save function that is designed to handle different ajax submits but I will simplify it for debugging. The issue is that once I make a submit everthing is fine at first. Then once I try to submit a second time it craps out. I am checking to see if there is an onsubmit function and then executing it like so before continuing. After the inital submit it is no longer found. When I alert the typeof document on the form it returns object but when I add the onsubmit it says object expected or object is null or undefined.
Code:
function secureBarSubmit(formId)
{
alert(typeof document.getElementById(formId)); // object always
alert(typeof document.getElementById(formId).onsubmit); // func first time then it is broken
[code]...
Can assign a new function to a built-in object in Firefox:
But IE and Opera don't have a MouseEvent or HTMLElement that can be set up in the same way. Can you do this in IE or Opera, or just Firefox, and maybe Webkit?
every time I try and alert:
[ { number:0, secondnumber:0 }, { number:2, secondnumber:1 }, { number:1, secondnumber:2 } ]
it just shows [object object], [object object], [object object]. Why is this and what can I do to make the record be shown as it is above in an alert?
Is there any way at all to create a new template object that inherits from the built in Date object so as to be able to add new methods to that child object without adding them to the built in Date object? I've tried everything I can think of and as far as I can tell it keeps referencing the Date function instead of the Date object and so doesn't work.
View 3 Replies View RelatedI have an object with a single Method to load content from a xml file. The problem is... how do I add a property to the object to store the data loaded?? I tryed adding a simple Array inside the object, but didn't work.
[Code]...
I am using a Photo Gallery script called Galleria which uses jQuery/JavaScript to display photos. On my index page load (only in Internet Explorer), a message box pops up saying "Message from Web Page [object Object]". After clicking OK the photo gallery loads and there is no problem.No idea how to fix this, or really what the error means. You can view the error from my site here
View 3 Replies View Related