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-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
-~----------~----~----~----~------~----~------~--~---
