[Proto-Scripty] Re: Help with linking events withing Class instances
Hi Todd,
It's worth sitting down and having a good solid read through the API
docs front to back. That's what I did when I started using
Prototype. It took about an hour, and it's saved me a huge amount of
time. (Actually, it's been long enough that I should probably go back
and do it again to remind myself of things I haven't used lately; I'll
do that when 1.6.1 is finished.)
In this case, you want to use Event.stop[1] in your apply() function,
probably at the outset:
apply: function(event){
event.stop();
[...]
}
[1] http://prototypejs.org/api/event/stop
HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Apr 14, 1:07 am, Todd Nine todd.n...@gmail.com wrote:
Hi guys,
Thanks for the help. I've fixed my initial problem, but now I'm running
into an issue when I try to handle the 'click' of the the 'received' link.
Basically the page is always jumping to the top, and the click handler does
not seem to be correctly intercepting the click. The javascript is
executed, but the page still refreshes with a '#' attached to the URL. I'm
using the latest FF on Windows to test. Here is my handler class and link.
As you can see my handler returns false, so I'm not sure why the page is
refreshing.
Thanks,
Todd
HTML link (output from the createAnhor call)
a href=#received/a
Javascript code that creates link and handler
var markReceived = createAnchor('#', 'received');
var receiveControl = new MessageReceive(message.Id, messageDiv,
markReceived);
/**
Class to control actions on each message
**/
var MessageReceive = Class.create({
/*
* Give the parent div and the inbox or outbox for AJAX request
*/
initialize: function(id, messageDiv, anchor) {
this.url = '/Message.mvc/MarkMessageAsReceived?messageId=' + id;
this.messageDiv = messageDiv;
this.anchor = anchor;
this.anchor.observe('click', this.apply.bind(this));
},
apply: function(event) {
var ajaxRequest = new Ajax.Request(this.url, {
method: 'POST',
asynchronous: false
});
//TODO add pretty info if server doesn't respond
if (ajaxRequest.transport.status != 200) {
return;
}
this.anchor.hide();
new Effect.Highlight(this.messageDiv);
return false;
}
});
On Thu, Apr 9, 2009 at 7:44 PM, T.J. Crowder t...@crowdersoftware.com wrote:
Hi,
element.onclick = this.apply;
Chris is right that you may want to consider using Element#observe[1]
(or Event.observe) rather than assigning a function to the onclick
attribute, which is the old way of doing it. That would look like
this:
element.observe('click', this.apply); // = STILL INCOMPLETE
BUT: That won't solve your 'this' problem. It helps with several
other things, and I'd recommend it, but the 'this' issue is separate.
However, when on onclick event
is fired and the apply function is executed, the this pointer does
not exist within the scope of the apply function.
Yes, JavaScript doesn't have methods (functions bound to instances),
although it seems to; the instance referenced by 'this' during a
function call is determined entirely by how the function was called.
More on that here[2].
What you want is Prototype's Function#bind() function[3] (which is
also part of the upcoming JavaScript 3.1 specification). The
unofficial wiki provides complete examples of how to do what you're
doing[4] and links to a couple of articles and blog posts about what's
going on under the covers.
[1]http://prototypejs.org/api/element/observe
[2]http://blog.niftysnippets.org/2008/03/mythical-methods.html
[3]http://prototypejs.org/api/function/bind
[4]
http://proto-scripty.wikidot.com/prototype:tip-using-an-instance-meth...
Pulling together both Element#observe and Function#bind, this line:
element.onclick = this.apply;
...would be rewritten:
element.observe('click', this.apply.bind(this);
But please do see the references for why and how that solves the
problem. :-)
HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Apr 9, 7:03 am, Todd Nine todd.n...@gmail.com wrote:
Hi all,
I'm building an AJAX list controller, and I'm having a few issues.
I'm new to Prototype and anything worth doing in javascript as well.
Please bear with me if my questions are obvious.
Basically, for each list item, I want to attach a function call to an
onclick event. Generally this is easy if you use inline functions.
However, I have a lot of logic to perform, and I'd prefer to
encapsulate all of the functionality within a class to keep my code
cleaner.
I create the Element objects in the DOM dynamically from a JSON
response and attache the onclick event. However, when on onclick event
is fired and the apply function is executed, the
[Proto-Scripty] Re: Help with linking events withing Class instances
Hi, Todd, I think you should use Prototypes Event.Observe feature insted the element.onclick you use at the moment (http://prototypejs.org/api/ event). Greetings from Germany, Chris --~--~-~--~~~---~--~~ 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-scriptaculous@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: Help with linking events withing Class instances
Hi,
element.onclick = this.apply;
Chris is right that you may want to consider using Element#observe[1]
(or Event.observe) rather than assigning a function to the onclick
attribute, which is the old way of doing it. That would look like
this:
element.observe('click', this.apply); // = STILL INCOMPLETE
BUT: That won't solve your 'this' problem. It helps with several
other things, and I'd recommend it, but the 'this' issue is separate.
However, when on onclick event
is fired and the apply function is executed, the this pointer does
not exist within the scope of the apply function.
Yes, JavaScript doesn't have methods (functions bound to instances),
although it seems to; the instance referenced by 'this' during a
function call is determined entirely by how the function was called.
More on that here[2].
What you want is Prototype's Function#bind() function[3] (which is
also part of the upcoming JavaScript 3.1 specification). The
unofficial wiki provides complete examples of how to do what you're
doing[4] and links to a couple of articles and blog posts about what's
going on under the covers.
[1] http://prototypejs.org/api/element/observe
[2] http://blog.niftysnippets.org/2008/03/mythical-methods.html
[3] http://prototypejs.org/api/function/bind
[4]
http://proto-scripty.wikidot.com/prototype:tip-using-an-instance-method-as-a-callback-or-event-handler
Pulling together both Element#observe and Function#bind, this line:
element.onclick = this.apply;
...would be rewritten:
element.observe('click', this.apply.bind(this);
But please do see the references for why and how that solves the
problem. :-)
HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Apr 9, 7:03 am, Todd Nine todd.n...@gmail.com wrote:
Hi all,
I'm building an AJAX list controller, and I'm having a few issues.
I'm new to Prototype and anything worth doing in javascript as well.
Please bear with me if my questions are obvious.
Basically, for each list item, I want to attach a function call to an
onclick event. Generally this is easy if you use inline functions.
However, I have a lot of logic to perform, and I'd prefer to
encapsulate all of the functionality within a class to keep my code
cleaner.
I create the Element objects in the DOM dynamically from a JSON
response and attache the onclick event. However, when on onclick event
is fired and the apply function is executed, the this pointer does
not exist within the scope of the apply function. Given that I set up
things in the constructor, how can I access these properties within an
event and keep my code in a class?
var MessagePagingConroller = Class.create({
loadPage: function(){
var parentDiv = new Element('div', {'class':'message'});
var markRead = new Element('a', {'href':'#});
markRead.insert('mark as read');
}
});
new MarkReadHandler(markRead, message.Id, parentDiv);
var MarkReadHandler = Class.create({
initialize: function(element, messageId, messageDiv){
this.url = '/MessageCenter.mvc/MarkAsRead?id='+messageId;
this.flashElement = messageDiv;
element.onclick = this.apply;
}
apply: function(event){
var ajaxRequest = new Ajax.Request(this.url, { synchronous:
true});
//TODO handle error
if(ajaxRequest.transport != 200){
return;
}
event.element.hide();
new Effect.Highlight(this.flashElement);
.. Do shifting etc
}
});
--~--~-~--~~~---~--~~
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-scriptaculous@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
-~--~~~~--~~--~--~---
