[Proto-Scripty] Re: Class with Ajax and onclick event
On Aug 4, 2:24 pm, Liviu Timar mailti...@gmail.com wrote:
var Dynamic = Class.create({
initialize: function(selector, container, script)
{
this.selector = selector;
this.script = script;
this.container = container;
this.changeContent =
this.changeContent.bindAsEventListener(this);
this.getContent();
},
getContent: function()
{
new Ajax.Request(this.script, {
onSuccess: function(req)
{
this.content = req.responseJSON;
This is ths problem. Inside the function definition, there is a new
scope, and 'this' will not have been assigned (because callbacks don't
get called as methods).
Either you need to #bind your onSuccess function, or I would just use
another variable:
getContent: function()
{
var that = this;
onSuccess: function(req)
{
that.content = req.responseJSON;
...
--~--~-~--~~~---~--~~
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: Class with Ajax and onclick event
Thank you for the response. You're right, I declared another variable
and now it works fine.
I have two other problems, though: I can't pass an aditional argument
to the event handler(changeContent) and I can't figure out how can I
make the content change automatic...
On Aug 5, 11:33 am, ColinFine colin.f...@pace.com wrote:
On Aug 4, 2:24 pm, Liviu Timar mailti...@gmail.com wrote:
var Dynamic = Class.create({
initialize: function(selector, container, script)
{
this.selector = selector;
this.script = script;
this.container = container;
this.changeContent =
this.changeContent.bindAsEventListener(this);
this.getContent();
},
getContent: function()
{
new Ajax.Request(this.script, {
onSuccess: function(req)
{
this.content = req.responseJSON;
This is ths problem. Inside the function definition, there is a new
scope, and 'this' will not have been assigned (because callbacks don't
get called as methods).
Either you need to #bind your onSuccess function, or I would just use
another variable:
getContent: function()
{
var that = this;
onSuccess: function(req)
{
that.content = req.responseJSON;
...
--~--~-~--~~~---~--~~
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: Class with Ajax and onclick event
Depending on when you wanted to pass the additional argument you could
just attach it to the argument chain on bind
this.changeContent = this.changeContent.bindAsEventListener(this,
extraArgument);
Since we're already looking at that line of code, be careful,
reassigning the function to a bound version of itself could get tricky
if you decide to create a subclass of Dynamic.
--
http://positionabsolute.net
On Aug 4, 9:24 am, Liviu Timar mailti...@gmail.com wrote:
Hello,
This is my first post here. Thus, I'll like to say hello to everybody
in this community and I want to appologize if this question was asked
before.
I am a web developer for a site that has 1mil+ visitors/month: www
[dot] ziare [dot] ro, and I want to use the Prototype Framework to
make an element refresh itself (with an scriptaculous Effect)
periodically.
This is my class:
var Dynamic = Class.create({
initialize: function(selector, container, script)
{
this.selector = selector;
this.script = script;
this.container = container;
this.changeContent =
this.changeContent.bindAsEventListener(this);
this.getContent();
},
getContent: function()
{
new Ajax.Request(this.script, {
onSuccess: function(req)
{
this.content = req.responseJSON;
//document.fire('content:retrieved',
req.responseJSON);
}
});
$$(this.selector).invoke('observe', 'click',
this.changeContent.bind
(this));
},
changeContent: function(event)
{
event.preventDefault();
console.log(this.content);
console.log(this.container);
/*new Effect.Fade($(this.container), { afterFinish:
function() {
new Effect.Appear($(this.container));
}
});
$(this.container).update('cucu');*/
}});
document.observe('dom:loaded', function() {
var dyn = new Dynamic(.tzNavLink a, tzContent,
titlurileZilei.php);
});
'tzContent' is the div whose content changes by clicking on of the
links with the 'tzNavLink' css class (the 1 2 3 4 5 6 links onwww.ziare.ro).
The problem is that this.content is undefined in changeContent (a
function that listens for the click event), although this.container
works well in the same function. Why is that? It has something to do
with the Ajax.Request?
Also, I want to ask how can I 'tzContent' to change periodically using
such and object (I want everything to be encapsulated so I can use
this object in other projects)?
Thank you for your response.
--~--~-~--~~~---~--~~
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: Class with Ajax and onclick event
Sorry, I forgot to specify. This is the code:
getContent: function()
{
var dyn = this;
new Ajax.Request(this.script, {
onSuccess: function(req)
{
dyn.content = req.responseJSON;
document.fire('content:retrieved',
req.responseJSON);
}
});
//$$(this.selector).invoke('observe', 'click',
this.changeContent.bind(this));
$$(this.selector).each(function(element, index) {
element.observe('click', dyn.changeContent.bind(dyn));
});
}
I want to pass the index as an extra argument to dyn.changeContent,
because I want to know which of the links was clicked.
--~--~-~--~~~---~--~~
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: Class with Ajax and onclick event
I figured it out. I understand that the extra argument will be null because it doesn't exist when the link is being clicked. The solution I found was to make my own attribute count for the a element: a href= count=#number. This attribute can be read by using readAttribute in the changeContent function. After I will figure out how to make the content change automatically (to simulate the clicking on 1 2 3 4 5 6) I will post here the finished class. Maybe it can be used by JS beginners like me to do something similar or maybe someone will use in this form. --~--~-~--~~~---~--~~ 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 -~--~~~~--~~--~--~---
