Re: [Proto-Scripty] this and setTimeout in Prototype-based class
Hi there,
IMHO, Ajax wouldn't help as the real timing issue is around the image load
which I don't think is predictable.
So, why don't you use a image preload mechanism such as the one I use in a
slightly different way. I display a waiting message, preload the pic and then
hide the waiting message thus revealing the full image.
I think the following code should help you, I found it sometime ago it
is based on this page :
http://www.webreference.com/programming/javascript/gr/column3/
Basically, you need to have
- an array with url's for your big images such as picSrc[0] = 'images/
big1.jpg'; picSrc[1] = 'images/big3.jpg'
- a hidden div id=waitingPic in your page which displays your
waiting message
When you want to load your big images you call these two lines:
$('waitingPic').show()
initPics()
Here's the code
function initPics(){
var ImagePreLoader = Class.create({
callback: null,
imageCache: new Array,
loaded: 0,
processed: 0,
noOfImages: 0,
initialize: function(images, options) {
if (options) {
if (options.callback) this.callback =
options.callback;
}
this.noOfImages = images.length;
for ( var i = 0; i images.length; i++ )
this.preload(images[i]);
},
preload: function(imgSrc) {
var image = new Image;
this.imageCache.push(image);
Event.observe(image, 'load',
this.onload.bindAsEventListener(this),
false);
Event.observe(image, 'error',
this.onerror.bindAsEventListener
(this), false);
Event.observe(image, 'abort',
this.onabort.bindAsEventListener
(this), false);
image.preloader = this;
image.loaded = false;
image.src = imgSrc;
},
onComplete: function() {
this.processed++;
if (this.processed==this.noOfImages) {
this.callback(this.imageCache, this.loaded);
}
},
onload: function(e) {
this.loaded++;
this.onComplete();
},
onerror: function(e) {
this.onComplete();
},
onabort: function(e) {
this.onComplete();
}
});
var imgPreloadCallback = function(imageCache, loaded) {
// where:
// imageCache is an array of the loaded images
// loaded is an int of the number of images that loaded.
//doSomethingAfterImagesAreLoaded();
$('waitingPic').hide();
picsPreLoaded = true;
}
var imgLoader = new ImagePreLoader(picSrc,
{callback:imgPreloadCallback});
}
Hope this helps.
Christophe
Le 3 déc. 2009 à 17:34, Peter De Berdt a écrit :
On 02 Dec 2009, at 15:25, fma wrote:
But it does not work. In the _show() method, the call to
this._flashNavButtons() leads to an error (this._flashNavButtons() is
not a function). I think I understand why: when called from the
timeout mecanism, 'this' no longer exists, or does not point anymore
on my object...
Is there a way to pass 'this' in the timeout callback? I also use such
timeout callback to make the navgation buttons blink 3 times when the
photo is opened in full size...
Instead of relying on setTimeout, you would be better off just rewriting the
whole thing in a more Prototype way and using Ajax to fetch the image, then
use the callback to display the fullscreen version.
Now if you still just want to get the setTimeout working, you probably could
just use:
setTimeout(function() {this._show}.bind(this),300);
Best regards
Peter De Berdt
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
Re: [Proto-Scripty] Using Ajax.Request to fetch an image
You cant .. simply fetch HTML and have the image in the html with css or img / Alex Mcauley http://www.thevacancymarket.com - Original Message - From: fma f...@gbiloba.org To: Prototype script.aculo.us prototype-scriptaculous@googlegroups.com Sent: Friday, December 04, 2009 6:59 AM Subject: [Proto-Scripty] Using Ajax.Request to fetch an image Hello, Could someone explain me how to fetch an image using Ajax.Request? I can only find how to retreive text/xml datas, but not binary datas... Thanks, -- You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en. -- You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
Re: [Proto-Scripty] Re: document.write() vs Element/appendChild()
There isn't one Alex Mcauley http://www.thevacancymarket.com - Original Message - From: fma f...@gbiloba.org To: Prototype script.aculo.us prototype-scriptaculous@googlegroups.com Sent: Friday, December 04, 2009 7:09 AM Subject: [Proto-Scripty] Re: document.write() vs Element/appendChild() BTW, what is the tag to format code on this group? -- You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en. -- You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: Using Ajax.Request to fetch an image
Ok, I see. Someone on the web proposed to encode images in base64 to be able to fetch them using text answer. Do you think it is a good idea? -- You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: this and setTimeout in Prototype-based class
Thanks for the code! -- You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
Re: [Proto-Scripty] Re: Using Ajax.Request to fetch an image
I can see alot of security issues with that! Alex Mcauley http://www.thevacancymarket.com - Original Message - From: fma f...@gbiloba.org To: Prototype script.aculo.us prototype-scriptaculous@googlegroups.com Sent: Friday, December 04, 2009 9:34 AM Subject: [Proto-Scripty] Re: Using Ajax.Request to fetch an image Ok, I see. Someone on the web proposed to encode images in base64 to be able to fetch them using text answer. Do you think it is a good idea? -- You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en. -- You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
Re: [Proto-Scripty] this and setTimeout in Prototype-based class
To pass a function to setTimeout that is binded to an object of choice, to
something along these lines:
// where obj is obviously your object
var func = function() {
this.doSomething()
}.bind( this );
window.setTimeout( func, 1000 );
Function.prototype.bind is a function that's defined in the Prototype
library. Hope this helps.
Daan
On Wed, Dec 2, 2009 at 15:25, fma f...@gbiloba.org wrote:
Hi,
I'm new to Prototype. I'm using it to write a little application for
our photoclub. Its goal is to allow users to upload photos, and then
vote for them.
I display all the thumbs, and a double-click on a thumb opens the
photo in full-screen (in a div). As the photo can take time to load, I
use setTimeout() to delay the display. The code looks like:
But it does not work. In the _show() method, the call to
this._flashNavButtons() leads to an error (this._flashNavButtons() is
not a function). I think I understand why: when called from the
timeout mecanism, 'this' no longer exists, or does not point anymore
on my object...
Is there a way to pass 'this' in the timeout callback? I also use such
timeout callback to make the navgation buttons blink 3 times when the
photo is opened in full size…
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
Re: [Proto-Scripty] this and setTimeout in Prototype-based class
I'm sorry, I made some typos. This is correct:
// where obj is obviously your object
var func = function() {
this.doSomething()
}.bind( obj );
window.setTimeout( func, 1000 );
Daan
On Thu, Dec 3, 2009 at 15:28, Daan Mortier daanmort...@gmail.com wrote:
To pass a function to setTimeout that is binded to an object of choice, to
something along these lines:
// where obj is obviously your object
var func = function() {
this.doSomething()
}.bind( this );
window.setTimeout( func, 1000 );
Function.prototype.bind is a function that's defined in the Prototype
library. Hope this helps.
Daan
On Wed, Dec 2, 2009 at 15:25, fma f...@gbiloba.org wrote:
Hi,
I'm new to Prototype. I'm using it to write a little application for
our photoclub. Its goal is to allow users to upload photos, and then
vote for them.
I display all the thumbs, and a double-click on a thumb opens the
photo in full-screen (in a div). As the photo can take time to load, I
use setTimeout() to delay the display. The code looks like:
But it does not work. In the _show() method, the call to
this._flashNavButtons() leads to an error (this._flashNavButtons() is
not a function). I think I understand why: when called from the
timeout mecanism, 'this' no longer exists, or does not point anymore
on my object...
Is there a way to pass 'this' in the timeout callback? I also use such
timeout callback to make the navgation buttons blink 3 times when the
photo is opened in full size…
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] element.insert not working in safari 4.0.3 (OS X)
hi everybody,
I'm not sure I my code is wrong or if this is a problem with safari
(it's working in FF):
In a Ajax.Request statement I have
onComplete: function(transport) {
$('container_td_loading').insert({
after: transport.responseText
});
}
But this hangs in Safari without any error.
Whats wrong or can confirm someone this behaviour in Safari?
Thanks for any tips.
J
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Element.remove, Element.stopObserving, Function.bindAsEventListener
RE: Element.remove(DOMelement) Does this method remove all children of the specified DOMelement before removing the specified DOMelement or must I delete all of the DOMelements children, grandchildran, etc. first? RE: Element.stopObserving(DOMelement) Does this method remove all events being observed for the given DOMelement or must I stop each one individually? At what point does this actually get removed from the DOM (garbage collection)? RE: Function.bindAsEventListener Should Element.StopObserving work to immediatly remove everything added to the DOM when using BindAsEventListener? I'm seeing a slew of memory leaks in my application and can only assume elements are not being removed from the DOM as they should be. Any help would be appreciated. I'm going though the prototype.js code now by any insight would be great. Thanks guys. -- You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] storing a closure as the value in a Hash (and then calling it later)
Hi all,
I'm trying to implement a somewhat generic way for my controller
objects to listen for changes to various properties of my model
objects. I'm not a javascript expert, so there is quite possibly a
Better Way™ of solving the bigger problem - I'm open to pointers in
that direction, if my current approach is not a good idea.
Here's the machinery I currently have in place:
MyClass.prototype.observeValueChange = function(observer, property,
callback) {
if (this.observableChanges == null) this.observableChanges = new
Hash();
if (this.observableChanges.get(property) == null)
this.observableChanges.set(property, new Hash());
this.observableChanges.get(property).set(observer, callback);
}
MyClass.prototype.fireValueChanged = function(property) {
if (this.observableChanges == null) return;
var observerInfo = this.observableChanges.get(property);
if (observerInfo == null) return;
observerInfo.each(function(info) {
info.key.info.value(this));
});
}
Here's an example of registering to listen:
objectOfMyObservableClass.observeValueChange(this, 'foo', function
(destination) {
alert(observed change in foo);
});
objectOfMyObservableClass.fireValueChanged(foo);
Tracing through the code, everything appears fine up to the point
where I try to call the stored callback. This line:
info.key.info.value(this));
info.key and info.value are both valid objects, but nothing happens.
Thanks in advance!
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: Element.remove, Element.stopObserving, Function.bindAsEventListener
Hi,
On Dec 3, 3:35 pm, Rob Cluett rob.clu...@gmail.com wrote:
RE: Element.remove(DOMelement)
Does this method remove all children of the specified DOMelement
before removing the specified DOMelement or must I delete all of the
DOMelements children, grandchildran, etc. first?
Removing an element, by its nature, removes all of its descendants.
Neither you nor Prototype needs to do anything special to make that
happen.
RE: Element.stopObserving(DOMelement)
Does this method remove all events being observed for the given
DOMelement or must I stop each one individually? At what point does
this actually get removed from the DOM (garbage collection)?
Per the docs[1], if you call stopObserving without specifying either
an event name or a handler, all events hooked up to that element (via
Prototype) will be removed. They are removed from the element
immediately. When any memory consumed by those event handlers is
actually released is dependant on the browser's implementation and
varies dramatically across browsers.
RE: Function.bindAsEventListener
Should Element.StopObserving work to immediatly remove everything
added to the DOM when using BindAsEventListener?
You almost certainly don't need to use bindAsEventListener; more here
[2]. Whether you use it or not, stopObserving removes the event
handler from the element immediately.
I'm seeing a slew of memory leaks in my application and can only
assume elements are not being removed from the DOM as they should be.
Any help would be appreciated. I'm going though the prototype.js code
now by any insight would be great. Thanks guys.
Be sure to disconnect events prior to removing elements, that could be
part of the problem. For example, if you have:
div id='outer'
div id='inner'
...
/div
/div
And you have:
$('outer').observe('click', doSomething);
$('inner').observe('click', doSomethingElse);
Suppose you do this:
$('outer').remove();
You've just left two event handlers dangling around in memory.
Alternately, suppose you did this:
$('outer').stopObserving().remove();
You've still left one event handler dangling around in memory, the one
on the 'inner' div. You'd need to do this to clean up completely:
$('inner').stopObserving();
$('outer').stopObserving().remove();
Your application logic needs to be sure it knows about handlers it
needs to remove. Although you could do this:
var outer;
outer = $('outer');
outer.descendants().invoke('stopObserving');
outer.stopObserving().remove();
...doing so is very inefficient.
[1] http://api.prototypejs.org/dom/event.html#stopobserving-class_method
[2]
http://proto-scripty.wikidot.com/prototype:tip-you-probably-don-t-need-bindaseventlistener
HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / com
www.crowdersoftware.com
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: storing a closure as the value in a Hash (and then calling it later)
Hi Wil,
info.key.info.value(this)); have two closed brace, but I'm sure that
it's a cut paste error :))
Something surprise me, you call info.key.info.value as an object and
you say that info.key and info.value is defined. It's strange, because
you should have say info.key.info.value is an existing object.
But, the real problem is that you call this inside an anonymous
function:
observerInfo.each(function(info) {
info.key.info.value(this));
});
this should refer to your objectOfMyObservableClass? is that rigth ?
But inside the anonymous function, it lost its binding to the defined
class and refer the function (so in fact is the window object)
To keep the reference to this inside the anonymous function, there is
a first way:
var that=this;
observerInfo.each(function(info) {
info.key.info.value(that));
});
And another way could be done in a more prototypish way:
var myFunction=(function(info) {
info.key.info.value(this));
}).bind(this);
observerInfo.each(myFunction);
--
david
On 3 déc, 22:00, Wil wil.tur...@gmail.com wrote:
Hi all,
I'm trying to implement a somewhat generic way for my controller
objects to listen for changes to various properties of my model
objects. I'm not a javascript expert, so there is quite possibly a
Better Way™ of solving the bigger problem - I'm open to pointers in
that direction, if my current approach is not a good idea.
Here's the machinery I currently have in place:
MyClass.prototype.observeValueChange = function(observer, property,
callback) {
if (this.observableChanges == null) this.observableChanges = new
Hash();
if (this.observableChanges.get(property) == null)
this.observableChanges.set(property, new Hash());
this.observableChanges.get(property).set(observer, callback);
}
MyClass.prototype.fireValueChanged = function(property) {
if (this.observableChanges == null) return;
var observerInfo = this.observableChanges.get(property);
if (observerInfo == null) return;
observerInfo.each(function(info) {
info.key.info.value(this));
});
}
Here's an example of registering to listen:
objectOfMyObservableClass.observeValueChange(this, 'foo', function
(destination) {
alert(observed change in foo);
});
objectOfMyObservableClass.fireValueChanged(foo);
Tracing through the code, everything appears fine up to the point
where I try to call the stored callback. This line:
info.key.info.value(this));
info.key and info.value are both valid objects, but nothing happens.
Thanks in advance!
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: storing a closure as the value in a Hash (and then calling it later)
Hi,
Tracing through the code, everything appears fine up to the point
where I try to call the stored callback. This line:
info.key.info.value(this));
info.key and info.value are both valid objects, but nothing happens.
Your 'info.key' property is your observer, which I tend to suspect
doesn't then have a property called 'info' on it, but that's what
info.key.info retrieves. Then you retrieve the 'value' property from
that and try to call it (info.key.info.value(this)). You're also
passing in a 'this' value which refers to the browser window, whereas
I suspect you wanted to refer to the observable object.
I think this is what you meant:
observerInfo.each(function(info) {
info.value.call(info.key, this);
}, this);
...which will call the callback setting the observer as the context
(the 'this' value within the callback) and passing in the observed
object -- note that to do that, I had to pass 'this' into #each as its
second argument because otherwise context is lost when you call #each.
But the above, by itself, won't solve the problems because I think you
probably have an issue here:
this.observableChanges.get(property).set(observer, callback);
Hash#set is documented as accepting a String for the key, but you're
passing in other kinds of objects, not just strings. You can't rely on
the key not getting converted to a string (a string that will probably
be [Object] or similar).
FWIW, I probably wouldn't use Hash for this at all, it's overkill for
the 'observableChanges' property and mis-matched for the values within
that. I'd probably just use a plain JavaScript object for
'observableChanges' using the property name as the key, with the value
being an array of tuples for the callbacks to make.
HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / com
www.crowdersoftware.com
On Dec 3, 9:00 pm, Wil wil.tur...@gmail.com wrote:
Hi all,
I'm trying to implement a somewhat generic way for my controller
objects to listen for changes to various properties of my model
objects. I'm not a javascript expert, so there is quite possibly a
Better Way™ of solving the bigger problem - I'm open to pointers in
that direction, if my current approach is not a good idea.
Here's the machinery I currently have in place:
MyClass.prototype.observeValueChange = function(observer, property,
callback) {
if (this.observableChanges == null) this.observableChanges = new
Hash();
if (this.observableChanges.get(property) == null)
this.observableChanges.set(property, new Hash());
this.observableChanges.get(property).set(observer, callback);
}
MyClass.prototype.fireValueChanged = function(property) {
if (this.observableChanges == null) return;
var observerInfo = this.observableChanges.get(property);
if (observerInfo == null) return;
observerInfo.each(function(info) {
info.key.info.value(this));
});
}
Here's an example of registering to listen:
objectOfMyObservableClass.observeValueChange(this, 'foo', function
(destination) {
alert(observed change in foo);
});
objectOfMyObservableClass.fireValueChanged(foo);
Tracing through the code, everything appears fine up to the point
where I try to call the stored callback. This line:
info.key.info.value(this));
info.key and info.value are both valid objects, but nothing happens.
Thanks in advance!
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: element.insert not working in safari 4.0.3 (OS X)
Hi jjaayy,
first, do you have trry an alert inside the oncomplete function, so it
indicate that the AJAX request work.
Next, does your AJAX.Request return something (transport.responseText
contain something) ?
that is some question you did not answer, but it could be so much
think !! Any chance to have a live view of the problem ??
--
david
On 3 déc, 16:26, jjaayy jan.gloeck...@gmail.com wrote:
hi everybody,
I'm not sure I my code is wrong or if this is a problem with safari
(it's working in FF):
In a Ajax.Request statement I have
onComplete: function(transport) {
$('container_td_loading').insert({
after: transport.responseText
});
}
But this hangs in Safari without any error.
Whats wrong or can confirm someone this behaviour in Safari?
Thanks for any tips.
J
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: storing a closure as the value in a Hash (and then calling it later)
Hi,
Thanks to TJ answer, I forgot THE each second argument to
automatically bind the called function to a context.
--
david.
On 4 déc, 12:22, T.J. Crowder t...@crowdersoftware.com wrote:
Hi,
Tracing through the code, everything appears fine up to the point
where I try to call the stored callback. This line:
info.key.info.value(this));
info.key and info.value are both valid objects, but nothing happens.
Your 'info.key' property is your observer, which I tend to suspect
doesn't then have a property called 'info' on it, but that's what
info.key.info retrieves. Then you retrieve the 'value' property from
that and try to call it (info.key.info.value(this)). You're also
passing in a 'this' value which refers to the browser window, whereas
I suspect you wanted to refer to the observable object.
I think this is what you meant:
observerInfo.each(function(info) {
info.value.call(info.key, this);
}, this);
...which will call the callback setting the observer as the context
(the 'this' value within the callback) and passing in the observed
object -- note that to do that, I had to pass 'this' into #each as its
second argument because otherwise context is lost when you call #each.
But the above, by itself, won't solve the problems because I think you
probably have an issue here:
this.observableChanges.get(property).set(observer, callback);
Hash#set is documented as accepting a String for the key, but you're
passing in other kinds of objects, not just strings. You can't rely on
the key not getting converted to a string (a string that will probably
be [Object] or similar).
FWIW, I probably wouldn't use Hash for this at all, it's overkill for
the 'observableChanges' property and mis-matched for the values within
that. I'd probably just use a plain JavaScript object for
'observableChanges' using the property name as the key, with the value
being an array of tuples for the callbacks to make.
HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / comwww.crowdersoftware.com
On Dec 3, 9:00 pm, Wil wil.tur...@gmail.com wrote:
Hi all,
I'm trying to implement a somewhat generic way for my controller
objects to listen for changes to various properties of my model
objects. I'm not a javascript expert, so there is quite possibly a
Better Way™ of solving the bigger problem - I'm open to pointers in
that direction, if my current approach is not a good idea.
Here's the machinery I currently have in place:
MyClass.prototype.observeValueChange = function(observer, property,
callback) {
if (this.observableChanges == null) this.observableChanges = new
Hash();
if (this.observableChanges.get(property) == null)
this.observableChanges.set(property, new Hash());
this.observableChanges.get(property).set(observer, callback);
}
MyClass.prototype.fireValueChanged = function(property) {
if (this.observableChanges == null) return;
var observerInfo = this.observableChanges.get(property);
if (observerInfo == null) return;
observerInfo.each(function(info) {
info.key.info.value(this));
});
}
Here's an example of registering to listen:
objectOfMyObservableClass.observeValueChange(this, 'foo', function
(destination) {
alert(observed change in foo);
});
objectOfMyObservableClass.fireValueChanged(foo);
Tracing through the code, everything appears fine up to the point
where I try to call the stored callback. This line:
info.key.info.value(this));
info.key and info.value are both valid objects, but nothing happens.
Thanks in advance!
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
Re: [Proto-Scripty] Re: Using Ajax.Request to fetch an image
On 04 Dec 2009, at 10:34, fma wrote: Ok, I see. Someone on the web proposed to encode images in base64 to be able to fetch them using text answer. Do you think it is a good idea? Let me rephrase what I meant (AJAX wasn't the correct term, you just need to rely on asynchronous events and callbacks instead of polling all the time): - Create your image object: new Image(); - Attach an onLoad event handler to that image object - Assign the .src to the image object. Remember: first define the onload handler, then assign the source url - Then you have a choice: either fire a custom event that you capture into another object prototype that does the actual processing or just fill in the handler right away Best regards Peter De Berdt -- You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] background-color stucked after an highlight effect
Hi,
I have a table with even rows having an even class name.
even changes the background color of the row:
tr.even { background-color: #def; }
My concern is that after using a Effect.Highligth on some rows, if I
add or remove the even className to them, their background color
doesn't change anymore.
I tried without success those 3 approaches:
new Effect.Highlight(tr,{queue: 'end', afterFinish:
function() { tr.style.backgroundColor = undefined;}});
new Effect.Highlight(tr,{queue: 'end', afterFinish:
function() { tr.setStyle({'background-color: 'none'});}});
new Effect.Highlight(tr,{queue: 'end', afterFinish:
function() { tr.setStyle({'background-color': 'inherit'});}});
Can anyone tell me what I am doing wrong?
Eric
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: Trouble removing a select
Hi srufle,
it works for me in FF3.5.
Don't you have modified the remove() merthod in the specified object.
Because myElement.remove() ans Element.remove('myElementId') are the
same function.
--
david
On 1 déc, 15:54, srufle sru...@gmail.com wrote:
I am not sure I may have found an issue.
On FF35
Does not work:
var dd = $('some_dropdown');
dd.remove(); - I end up in emptyFunction
Does work:
var dd = $('some_dropdown');
Element.remove(dd);
select id=some_dropdown style=width: 135px; name=some
option selected= value=VALValText/option
/select
BUT I was able to make the element.remove() calls on elements that
were not selects.
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: background-color stucked after an highlight effect
Hi Eric,
do you try to reset the element style property for background-color ??
try this
new Effect.Highlight('b',{queue: 'end', afterFinish:
function() { $('b').setStyle({backgroundColor:''});}});
--
david
On 4 déc, 12:55, Eric lefauv...@gmail.com wrote:
Hi,
I have a table with even rows having an even class name.
even changes the background color of the row:
tr.even { background-color: #def; }
My concern is that after using a Effect.Highligth on some rows, if I
add or remove the even className to them, their background color
doesn't change anymore.
I tried without success those 3 approaches:
new Effect.Highlight(tr,{queue: 'end', afterFinish:
function() { tr.style.backgroundColor = undefined;}});
new Effect.Highlight(tr,{queue: 'end', afterFinish:
function() { tr.setStyle({'background-color: 'none'});}});
new Effect.Highlight(tr,{queue: 'end', afterFinish:
function() { tr.setStyle({'background-color': 'inherit'});}});
Can anyone tell me what I am doing wrong?
Eric
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: Using Ajax.Request to fetch an image
That's what I did, using 'observe' to register the 'load' event. Not that I had to use stopObserving() to ensure that the callback was not called several times... -- You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Element initialisation
Hello there, I have another question that I hope someone can give me some insight too... As I want all javascript code to be in a seperate file, I wrote a function initialiseElements which literally takes an element and initialises its behaviour based upon some attributes (classname for instance). Basically it takes the elemen, checks whether el.readAttribute (isInitialised) == false, and in that case processes the element (adding tooltips for action images, adding onclick behaviour, onmouseover behaviour, add validators to inputs and so on...) When processed we set el.writeAttribute(isInitialised) = true so that it will only process one element a single time... I found this way of working to be going great, and I basically call the initialiseElement method for each element upon loading the form, making it a very generic process... However (yes, there is a but!!!), I do have an issue of course when I cal some ajax to update the content; in that case I need to initialise the elements that have been added... Is there a way to observe the dom and automatically run newly created elements through the initialise function? Would this be a good approach? How do you guys deal with stuff like this? thanks so much in advance again for your much appreciated feedback. -- You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] How to queue Multiple effects?
Is it possible to combine Multiple effect and Queue? I tried the
following:
new Effect.multiple([this._view.prevButton, this._view.nextButton,
this._view.hideButton],
Effect.Opacity, {from: 0, to: 1, duration: 2},
{queue: {position: 'end', scope: 'fade'}});
new Effect.multiple([this._view.prevButton, this._view.nextButton,
this._view.hideButton],
Effect.Opacity, {from: 1, to: 0, duration: 2},
{queue: {position: 'end', scope: 'fade'}});
but I don't get good results; the effects does not occur at the same
time on the 3 elements, and I get flickering...
Is my usage correct?
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: background-color stucked after an highlight effect
Thanks David,
It does work!
And do does tr.style.backgroundColor = '';
Why did I look for something complex when solution was so simple :o)
Thanks again!
Eric
On Dec 4, 1:08 pm, david david.brill...@gmail.com wrote:
Hi Eric,
do you try to reset the element style property for background-color ??
try this
new Effect.Highlight('b',{queue: 'end', afterFinish:
function() { $('b').setStyle({backgroundColor:''});}});
--
david
On 4 déc, 12:55, Eric lefauv...@gmail.com wrote:
Hi,
I have a table with even rows having an even class name.
even changes the background color of the row:
tr.even { background-color: #def; }
My concern is that after using a Effect.Highligth on some rows, if I
add or remove the even className to them, their background color
doesn't change anymore.
I tried without success those 3 approaches:
new Effect.Highlight(tr,{queue: 'end', afterFinish:
function() { tr.style.backgroundColor = undefined;}});
new Effect.Highlight(tr,{queue: 'end', afterFinish:
function() { tr.setStyle({'background-color: 'none'});}});
new Effect.Highlight(tr,{queue: 'end', afterFinish:
function() { tr.setStyle({'background-color': 'inherit'});}});
Can anyone tell me what I am doing wrong?
Eric
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
Re: [Proto-Scripty] How to queue Multiple effects?
What about using afterFInish instead of a queue ?
I know, it's not very nice...
new Effect.multiple([this._view.prevButton, this._view.nextButton,
this._view.hideButton],
Effect.Opacity, {from: 0, to: 1, duration: 2,afterFinish:function(){
new Effect.multiple([this._view.prevButton,
this._view.nextButton,this._view.hideButton],
Effect.Opacity, {from: 1, to: 0, duration: 2}
);
}}
)
Hope this helps,
Le 4 déc. 2009 à 13:29, fma a écrit :
Is it possible to combine Multiple effect and Queue? I tried the
following:
new Effect.multiple([this._view.prevButton, this._view.nextButton,
this._view.hideButton],
Effect.Opacity, {from: 0, to: 1, duration: 2},
{queue: {position: 'end', scope: 'fade'}});
new Effect.multiple([this._view.prevButton, this._view.nextButton,
this._view.hideButton],
Effect.Opacity, {from: 1, to: 0, duration: 2},
{queue: {position: 'end', scope: 'fade'}});
but I don't get good results; the effects does not occur at the same
time on the 3 elements, and I get flickering...
Is my usage correct?
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: How to queue Multiple effects?
I didn't know yet this param ;o) I'll give it a try... Thanks, -- You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: this and setTimeout in Prototype-based class
Well, since you're in Prototype, you can do this:
this.doSomething.bind(this).delay(1000, ...);
where the ... stand for other parameters of doSomething method (if
they are needed).
Eric
On Dec 3, 3:29 pm, Daan Mortier daanmort...@gmail.com wrote:
I'm sorry, I made some typos. This is correct:
// where obj is obviously your object
var func = function() {
this.doSomething()}.bind( obj );
window.setTimeout( func, 1000 );
Daan
On Thu, Dec 3, 2009 at 15:28, Daan Mortier daanmort...@gmail.com wrote:
To pass a function to setTimeout that is binded to an object of choice, to
something along these lines:
// where obj is obviously your object
var func = function() {
this.doSomething()
}.bind( this );
window.setTimeout( func, 1000 );
Function.prototype.bind is a function that's defined in the Prototype
library. Hope this helps.
Daan
On Wed, Dec 2, 2009 at 15:25, fma f...@gbiloba.org wrote:
Hi,
I'm new to Prototype. I'm using it to write a little application for
our photoclub. Its goal is to allow users to upload photos, and then
vote for them.
I display all the thumbs, and a double-click on a thumb opens the
photo in full-screen (in a div). As the photo can take time to load, I
use setTimeout() to delay the display. The code looks like:
But it does not work. In the _show() method, the call to
this._flashNavButtons() leads to an error (this._flashNavButtons() is
not a function). I think I understand why: when called from the
timeout mecanism, 'this' no longer exists, or does not point anymore
on my object...
Is there a way to pass 'this' in the timeout callback? I also use such
timeout callback to make the navgation buttons blink 3 times when the
photo is opened in full size…
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: document.write() vs Element/appendChild()
When you have a large piece of code to post, it is nice to also post a link on pastie.org or jsbin.com. For example, I pasted the code you've posted on pastie here: http://pastie.org/727583 Eric On Dec 4, 8:09 am, fma f...@gbiloba.org wrote: BTW, what is the tag to format code on this group? -- You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: this and setTimeout in Prototype-based class
Thanks for the tip! -- You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
