Re: [Proto-Scripty] Attach Ajax.Updater to link
On Sunday, 28 October 2012 22:06:35 UTC, Walter Lee Davis wrote: I use elm to stand for element, and evt to stand for event. It's just a habit I have, to keep clear in my head what I am dealing with when I use an observer or an iterator. snip I see - that seems like a very good habit for me to copy! I prefer unobtrusive observers for several reasons. First, they remove the masses of repeating inline code from the HTML, snip Second, if your observer is all in one place, you can make sweeping changes without having to go back and rewrite every invocation of the method. snip Again, that makes a lot of sense, expecially now I've read over everything again this morning. Thanks again for your help, Walter - I spent most of Friday on this, and wouldn't have worked it out on my own. -- You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/Z62ZzORltGUJ. 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] Attach Ajax.Updater to link
I'm new to Prototype, and I'm trying to use AJAX to update divs inthe
background, pulling data from a database. I've got Ajax.Updater to work
with the output of a form, but I'm having difficulty with adpting it for
use with a link. Basically, I have a list of words produced by the db,
each of them a clickable link, and when I click on the word I want the
context of the word (likewise drawn from the db) to come up in a div below
the list.
What I have at the minute:
*calling page:*
diva href=javascript:void(0); class='textword' id='myword1'
onclick=get_word()myword1/a/div
diva href=javascript:void(0); class='textword' id='myword2'
onclick=get_word()myword2/a
div id=output[Results appear here.]/div
script
function get_word()
{
new Ajax.Updater
(
'output',
'mylist.php',
{
method: 'get',
parameters: { word: $(this).attr(id) }
}
);
}
/script
*
mylist.php:*
[db connection stuff]
$word=trim($_GET['word']);
$sql=query(select * from mytable where word~'$word';);
while ($row=pg_fetch_object($sql))
{
echo $context.br /;
}
Run by itself, mylist.php gives the results I want, so I think I haven't
got the right invocation for the link, but after several hours searching
and experimenting, I have to ask!
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To view this discussion on the web visit
https://groups.google.com/d/msg/prototype-scriptaculous/-/z616OxDuu6oJ.
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.
Re: [Proto-Scripty] Attach Ajax.Updater to link
On Oct 28, 2012, at 4:15 AM, donnek wrote:
I'm new to Prototype, and I'm trying to use AJAX to update divs inthe
background, pulling data from a database. I've got Ajax.Updater to work with
the output of a form, but I'm having difficulty with adpting it for use with
a link. Basically, I have a list of words produced by the db, each of them a
clickable link, and when I click on the word I want the context of the word
(likewise drawn from the db) to come up in a div below the list.
What I have at the minute:
calling page:
diva href=javascript:void(0); class='textword' id='myword1'
onclick=get_word()myword1/a/div
diva href=javascript:void(0); class='textword' id='myword2'
onclick=get_word()myword2/a
div id=output[Results appear here.]/div
script
function get_word()
{
new Ajax.Updater
(
'output',
'mylist.php',
{
method: 'get',
parameters: { word: $(this).attr(id) }
I'm pretty sure your problem is right here. There's no attr() method in
Prototype. Try readAttribute() instead, and you appear to have everything right
besides.
Walter
}
);
}
/script
mylist.php:
[db connection stuff]
$word=trim($_GET['word']);
$sql=query(select * from mytable where word~'$word';);
while ($row=pg_fetch_object($sql))
{
echo $context.br /;
}
Run by itself, mylist.php gives the results I want, so I think I haven't got
the right invocation for the link, but after several hours searching and
experimenting, I have to ask!
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To view this discussion on the web visit
https://groups.google.com/d/msg/prototype-scriptaculous/-/z616OxDuu6oJ.
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.
--
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.
Re: [Proto-Scripty] Attach Ajax.Updater to link
On Sunday, 28 October 2012 15:53:37 UTC, Walter Lee Davis wrote:
I'm pretty sure your problem is right here. There's no attr() method in
Prototype. Try readAttribute() instead, and you appear to have everything
right besides.
Thanks, Walter, but unfortunately changing that line to:
parameters: { word: $(this).readAttribute(id) }
doesn't help.
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To view this discussion on the web visit
https://groups.google.com/d/msg/prototype-scriptaculous/-/eL8tDmQMQUQJ.
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.
Re: [Proto-Scripty] Attach Ajax.Updater to link
On Oct 28, 2012, at 12:05 PM, donnek wrote:
On Sunday, 28 October 2012 15:53:37 UTC, Walter Lee Davis wrote:
I'm pretty sure your problem is right here. There's no attr() method in
Prototype. Try readAttribute() instead, and you appear to have everything
right besides.
Thanks, Walter, but unfortunately changing that line to:
parameters: { word: $(this).readAttribute(id) }
doesn't help.
What does Firebug say your request looks like? What does your server respond
with?
Walter
--
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.
Re: [Proto-Scripty] Attach Ajax.Updater to link
On Sunday, 28 October 2012 15:53:37 UTC, Walter Lee Davis wrote:
What does Firebug say your request looks like? What does your server
respond with?
TypeError: $(this).readAttribute is not a function
parameters: { word: $(this).readAttribute(id) }
There's no change to the calling page - it shows nothing in the output div.
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To view this discussion on the web visit
https://groups.google.com/d/msg/prototype-scriptaculous/-/23HHumtY6uYJ.
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.
Re: [Proto-Scripty] Attach Ajax.Updater to link
Okay, that means that 'this' inside the Ajax.Updater is not set to what you
think it is. Try this:
function get_word(elm)
{
new Ajax.Updater
(
'output',
'mylist.php',
{
method: 'get',
parameters: { word: $(elm).readAttribute(id) }
}
);
}
call it with get_word(this) in your inline handler example.
A much neater way to handle this is with an unobtrusive handler. For this HTML
(note the differences):
divp class='textword' id='myword1'myword1/p
p class='textword' id='myword2'myword2/p/div
div id=output[Results appear here.]/div
could be handled with this JavaScript:
script type=text/javascript
document.observe('dom:loaded', function(){
document.on('click','.textword', function(evt, elm){
new Ajax.Updater(
'output',
'mylist.php', {
method: 'get',
parameters: {
word: elm.readAttribute('id')
}
}
);
});
});
/script
Much cleaner and fewer global variables are massacred.
Walter
On Oct 28, 2012, at 3:23 PM, donnek wrote:
On Sunday, 28 October 2012 15:53:37 UTC, Walter Lee Davis wrote:
What does Firebug say your request looks like? What does your server respond
with?
TypeError: $(this).readAttribute is not a function
parameters: { word: $(this).readAttribute(id) }
There's no change to the calling page - it shows nothing in the output div.
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To view this discussion on the web visit
https://groups.google.com/d/msg/prototype-scriptaculous/-/23HHumtY6uYJ.
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.
--
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.
Re: [Proto-Scripty] Attach Ajax.Updater to link
On Sunday, 28 October 2012 20:32:34 UTC, Walter Lee Davis wrote: Okay, that means that 'this' inside the Ajax.Updater is not set to what you think it is. Try this: snip Much cleaner and fewer global variables are massacred. Hey, thanks! Both of those work. But I don't understand what elm (not the tree, I assume!) and evt are/do. And why is the second cleaner (because I find the first easier to understand). Thanks again for taking the time on this. -- You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/eGR_Yuma92gJ. 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.
Re: [Proto-Scripty] Attach Ajax.Updater to link
I use elm to stand for element, and evt to stand for event. It's just a habit I
have, to keep clear in my head what I am dealing with when I use an observer or
an iterator.
If I am iterating over a collection of elements with each, I will usually write
this:
$$('.foo').each(function(elm){
/* do something to elm here */
});
Using elm here reminds me that I am dealing with an element, rather than an
event, and that I will have direct access to the element.
Using the same collection and observing the click on it, I would write this:
$$('.foo').invoke('observe', 'click', function(evt){
// inside here, evt is the click event
evt.stop();
// and 'this' is the element that received the click: one of the .foo
elements
this.highlight();
});
I prefer unobtrusive observers for several reasons.
First, they remove the masses of repeating inline code from the HTML, where all
it does is bloat the page without adding any value. Any time you find yourself
writing the same thing more than once, that's an opportunity for improvement.
Second, if your observer is all in one place, you can make sweeping changes
without having to go back and rewrite every invocation of the method. Imagine
if you changed your function definition to need two variables passed to it
rather than one. With your method, that means touching every row of your
interface, while with mine, you just rewrite it in one place.
Walter
On Oct 28, 2012, at 5:51 PM, donnek wrote:
On Sunday, 28 October 2012 20:32:34 UTC, Walter Lee Davis wrote:
Okay, that means that 'this' inside the Ajax.Updater is not set to what you
think it is. Try this:
snip
Much cleaner and fewer global variables are massacred.
Hey, thanks! Both of those work. But I don't understand what elm (not the
tree, I assume!) and evt are/do. And why is the second cleaner (because I
find the first easier to understand). Thanks again for taking the time on
this.
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To view this discussion on the web visit
https://groups.google.com/d/msg/prototype-scriptaculous/-/eGR_Yuma92gJ.
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.
--
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.
