I use this link to allow a member to ''add a friend'' to his
account, by
clicking the following link:
<a href=\"javascript:void(0);\"
onclick=\"if(confirm(''Add ".$row->name." as
friend?'')) {
new Ajax.Request(''/perform?action=addfriend'', { method:
''post'',
postBody: ''friendid=".$row->id."'',
asynchronous:''true'',
evalScripts:''true'' })
};return false;\">Add Friend</a>
The user clicks the link, my PHP stored at perform?action=addfriend
kicks in, and the friend is added. What I then want to do is CHANGE
the ''add friend'' text to a green ''Friend
Added'' text so the user knows
its been done.
I dont know how :(
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
For the easiest way to do it, you''ll want to give your "Add
Friend"
anchors each a unique ID. Then, just add an onSuccess callback function
to your Ajax.Request which does this ...
$("anchorID").update("Friend Added");
Alternatively, you could change from an Ajax.Request object to an
Ajax.Updater and do the following ...
<a id="anchorID" href="javascript:void(0);"
onclick="if(confirm(''Add
" . $row->name . " as friend?'')) {
new Ajax.Updater("anchorID",
"/perform.php?action=addfriend",
{ ... });
}; return false;">Add Friend</a>
... just make sure that your /perform.php?action=addfriend page echoes
"Friend Added" at the bottom.
And, finally, you might be better served by using the Event.observe()
function to unobtrusively call javascript functions rather than entering
them each into the onclick handlers of your anchors. You could either
add an observer for each anchor or you could add an observer for the
table in which then makes sure that an anchor was clicked before firing
the Ajax. For clarity, depending on the number of anchors on the page,
adding observers to the anchors might be better and is definitely easier
to understand, I feel. I suggest that for this, you add a custom
attribute of "friend" to each anchor which you can read with prototype
when you need it
rather than embedding PHP in your javascript code.
<a href="javascript:void(0);"
friend="<?=$row->name?>"
id="<?=$row->id?>">
Then, you can use the $$() utility to get all anchors with a friend
attribute and apply an click observation to them:
$$("a[friend]").each(function(a) {
a.observe("click", function() {
if(confirm("Add " + a.readAttribute("friend") +
" as a
friend?")) {
new Ajax.Request("/perform.php?action=addfriend", {
postBody: "friendid=" +
a.readAttribute("id"),
asynchronous: true,
evalScripts: true,
method: "post",
onSuccess: function() {
var parent = a.up();
a.remove();
parent.innerHTML = "Friend Added"
}
});
}
});
});
With this code, I also made sure that when the success callback happens,
the link is removed from the DOM, otherwise, someone could click the
link a second time and, unless your perform.php page can handle a
double-addition of the same friend.
The code above might not work right away; I don''t know things like the
way your $row->id variable is constructed and whether or not it''s a
valid HTML ID attribute or not. But, the above should get your
started. Feel free to ask any questions you might have.
- Dash -
junkmate wrote:> I use this link to allow a member to ''add a friend'' to
his account, by
> clicking the following link:
>
> <a href=\"javascript:void(0);\"
> onclick=\"if(confirm(''Add ".$row->name." as
friend?'')) {
> new Ajax.Request(''/perform?action=addfriend'', { method:
''post'',
> postBody: ''friendid=".$row->id."'',
asynchronous:''true'',
> evalScripts:''true'' })
> };return false;\">Add Friend</a>
>
> The user clicks the link, my PHP stored at perform?action=addfriend
> kicks in, and the friend is added. What I then want to do is CHANGE
> the ''add friend'' text to a green ''Friend
Added'' text so the user knows
> its been done.
>
> I dont know how :(
>
>
> >
>
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
wow, thats a pretty impressive response! Thanks! Im completely new to Ajax so im guilty of sticking to what i know by embedding PHP here and there, but your observer method looks much better. I will try hacking that up and see how I get on. Just a quick noob question though... where does that $$ utility go? :D On Jun 14, 3:57 pm, David Dashifen Kees <dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> For the easiest way to do it, you''ll want to give your "Add Friend" > anchors each a unique ID. Then, just add an onSuccess callback function > to your Ajax.Request which does this ... > > $("anchorID").update("Friend Added"); > > Alternatively, you could change from an Ajax.Request object to an > Ajax.Updater and do the following ... > > <a id="anchorID" href="javascript:void(0);" onclick="if(confirm(''Add > " . $row->name . " as friend?'')) { > new Ajax.Updater("anchorID", "/perform.php?action=addfriend", > { ... }); > }; return false;">Add Friend</a> > > ... just make sure that your /perform.php?action=addfriend page echoes > "Friend Added" at the bottom. > > And, finally, you might be better served by using the Event.observe() > function to unobtrusively call javascript functions rather than entering > them each into the onclick handlers of your anchors. You could either > add an observer for each anchor or you could add an observer for the > table in which then makes sure that an anchor was clicked before firing > the Ajax. For clarity, depending on the number of anchors on the page, > adding observers to the anchors might be better and is definitely easier > to understand, I feel. I suggest that for this, you add a custom > attribute of "friend" to each anchor which you can read with prototype > when you need it > rather than embedding PHP in your javascript code. > > <a href="javascript:void(0);" friend="<?=$row->name?>" > id="<?=$row->id?>"> > > Then, you can use the $$() utility to get all anchors with a friend > attribute and apply an click observation to them: > > $$("a[friend]").each(function(a) { > a.observe("click", function() { > if(confirm("Add " + a.readAttribute("friend") + " as a > friend?")) { > new Ajax.Request("/perform.php?action=addfriend", { > postBody: "friendid=" + a.readAttribute("id"), > asynchronous: true, > evalScripts: true, > method: "post", > > onSuccess: function() { > var parent = a.up(); > a.remove(); > parent.innerHTML = "Friend Added" > } > }); > } > }); > }); > > With this code, I also made sure that when the success callback happens, > the link is removed from the DOM, otherwise, someone could click the > link a second time and, unless your perform.php page can handle a > double-addition of the same friend. > > The code above might not work right away; I don''t know things like the > way your $row->id variable is constructed and whether or not it''s a > valid HTML ID attribute or not. But, the above should get your > started. Feel free to ask any questions you might have. > > - Dash - > > junkmate wrote: > > I use this link to allow a member to ''add a friend'' to his account, by > > clicking the following link: > > > <a href=\"javascript:void(0);\" > > onclick=\"if(confirm(''Add ".$row->name." as friend?'')) { > > new Ajax.Request(''/perform?action=addfriend'', { method: ''post'', > > postBody: ''friendid=".$row->id."'', asynchronous:''true'', > > evalScripts:''true'' }) > > };return false;\">Add Friend</a> > > > The user clicks the link, my PHP stored at perform?action=addfriend > > kicks in, and the friend is added. What I then want to do is CHANGE > > the ''add friend'' text to a green ''Friend Added'' text so the user knows > > its been done. > > > I dont know how :(--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
The $$() utility function is a javascript addition via Prototype just like the $() function. You can read more about them online at the Prototype API docs: http://www.prototypejs.or/api. It uses a CSS selector to gather a list of elements. That list is then an instance of the Prototype Enumerable object, so you can use functions like each(), invoke(), pluck(), etc. on it. A very useful function. - Dash - junkmate wrote:> wow, thats a pretty impressive response! Thanks! Im completely new to > Ajax so im guilty of sticking to what i know by embedding PHP here and > there, but your observer method looks much better. I will try hacking > that up and see how I get on. Just a quick noob question though... > where does that $$ utility go? :D > > > > On Jun 14, 3:57 pm, David Dashifen Kees <dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > >> For the easiest way to do it, you''ll want to give your "Add Friend" >> anchors each a unique ID. Then, just add an onSuccess callback function >> to your Ajax.Request which does this ... >> >> $("anchorID").update("Friend Added"); >> >> Alternatively, you could change from an Ajax.Request object to an >> Ajax.Updater and do the following ... >> >> <a id="anchorID" href="javascript:void(0);" onclick="if(confirm(''Add >> " . $row->name . " as friend?'')) { >> new Ajax.Updater("anchorID", "/perform.php?action=addfriend", >> { ... }); >> }; return false;">Add Friend</a> >> >> ... just make sure that your /perform.php?action=addfriend page echoes >> "Friend Added" at the bottom. >> >> And, finally, you might be better served by using the Event.observe() >> function to unobtrusively call javascript functions rather than entering >> them each into the onclick handlers of your anchors. You could either >> add an observer for each anchor or you could add an observer for the >> table in which then makes sure that an anchor was clicked before firing >> the Ajax. For clarity, depending on the number of anchors on the page, >> adding observers to the anchors might be better and is definitely easier >> to understand, I feel. I suggest that for this, you add a custom >> attribute of "friend" to each anchor which you can read with prototype >> when you need it >> rather than embedding PHP in your javascript code. >> >> <a href="javascript:void(0);" friend="<?=$row->name?>" >> id="<?=$row->id?>"> >> >> Then, you can use the $$() utility to get all anchors with a friend >> attribute and apply an click observation to them: >> >> $$("a[friend]").each(function(a) { >> a.observe("click", function() { >> if(confirm("Add " + a.readAttribute("friend") + " as a >> friend?")) { >> new Ajax.Request("/perform.php?action=addfriend", { >> postBody: "friendid=" + a.readAttribute("id"), >> asynchronous: true, >> evalScripts: true, >> method: "post", >> >> onSuccess: function() { >> var parent = a.up(); >> a.remove(); >> parent.innerHTML = "Friend Added" >> } >> }); >> } >> }); >> }); >> >> With this code, I also made sure that when the success callback happens, >> the link is removed from the DOM, otherwise, someone could click the >> link a second time and, unless your perform.php page can handle a >> double-addition of the same friend. >> >> The code above might not work right away; I don''t know things like the >> way your $row->id variable is constructed and whether or not it''s a >> valid HTML ID attribute or not. But, the above should get your >> started. Feel free to ask any questions you might have. >> >> - Dash - >> >> junkmate wrote: >> >>> I use this link to allow a member to ''add a friend'' to his account, by >>> clicking the following link: >>> >>> <a href=\"javascript:void(0);\" >>> onclick=\"if(confirm(''Add ".$row->name." as friend?'')) { >>> new Ajax.Request(''/perform?action=addfriend'', { method: ''post'', >>> postBody: ''friendid=".$row->id."'', asynchronous:''true'', >>> evalScripts:''true'' }) >>> };return false;\">Add Friend</a> >>> >>> The user clicks the link, my PHP stored at perform?action=addfriend >>> kicks in, and the friend is added. What I then want to do is CHANGE >>> the ''add friend'' text to a green ''Friend Added'' text so the user knows >>> its been done. >>> >>> I dont know how :( >>> > > > > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
hey man. Heres me getting ready for loads of trouble shooting and fine tuning... your code JUST WORKED! right out of the box!!! (well, i had to remove .php from after the ajax call, but thats cos my system is non-standard) - but NICE! it is now visually perfect, and the code looks much better! thank you thank you!!! On Jun 14, 4:39 pm, David Dashifen Kees <dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> The $$() utility function is a javascript addition via Prototype just > like the $() function. You can read more about them online at the > Prototype API docs:http://www.prototypejs.or/api. It uses a CSS > selector to gather a list of elements. That list is then an instance of > the Prototype Enumerable object, so you can use functions like each(), > invoke(), pluck(), etc. on it. A very useful function. > > - Dash - > > junkmate wrote: > > wow, thats a pretty impressive response! Thanks! Im completely new to > > Ajax so im guilty of sticking to what i know by embedding PHP here and > > there, but your observer method looks much better. I will try hacking > > that up and see how I get on. Just a quick noob question though... > > where does that $$ utility go? :D > > > On Jun 14, 3:57 pm, David Dashifen Kees <dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > >> For the easiest way to do it, you''ll want to give your "Add Friend" > >> anchors each a unique ID. Then, just add an onSuccess callback function > >> to your Ajax.Request which does this ... > > >> $("anchorID").update("Friend Added"); > > >> Alternatively, you could change from an Ajax.Request object to an > >> Ajax.Updater and do the following ... > > >> <a id="anchorID" href="javascript:void(0);" onclick="if(confirm(''Add > >> " . $row->name . " as friend?'')) { > >> new Ajax.Updater("anchorID", "/perform.php?action=addfriend", > >> { ... }); > >> }; return false;">Add Friend</a> > > >> ... just make sure that your /perform.php?action=addfriend page echoes > >> "Friend Added" at the bottom. > > >> And, finally, you might be better served by using the Event.observe() > >> function to unobtrusively call javascript functions rather than entering > >> them each into the onclick handlers of your anchors. You could either > >> add an observer for each anchor or you could add an observer for the > >> table in which then makes sure that an anchor was clicked before firing > >> the Ajax. For clarity, depending on the number of anchors on the page, > >> adding observers to the anchors might be better and is definitely easier > >> to understand, I feel. I suggest that for this, you add a custom > >> attribute of "friend" to each anchor which you can read with prototype > >> when you need it > >> rather than embedding PHP in your javascript code. > > >> <a href="javascript:void(0);" friend="<?=$row->name?>" > >> id="<?=$row->id?>"> > > >> Then, you can use the $$() utility to get all anchors with a friend > >> attribute and apply an click observation to them: > > >> $$("a[friend]").each(function(a) { > >> a.observe("click", function() { > >> if(confirm("Add " + a.readAttribute("friend") + " as a > >> friend?")) { > >> new Ajax.Request("/perform.php?action=addfriend", { > >> postBody: "friendid=" + a.readAttribute("id"), > >> asynchronous: true, > >> evalScripts: true, > >> method: "post", > > >> onSuccess: function() { > >> var parent = a.up(); > >> a.remove(); > >> parent.innerHTML = "Friend Added" > >> } > >> }); > >> } > >> }); > >> }); > > >> With this code, I also made sure that when the success callback happens, > >> the link is removed from the DOM, otherwise, someone could click the > >> link a second time and, unless your perform.php page can handle a > >> double-addition of the same friend. > > >> The code above might not work right away; I don''t know things like the > >> way your $row->id variable is constructed and whether or not it''s a > >> valid HTML ID attribute or not. But, the above should get your > >> started. Feel free to ask any questions you might have. > > >> - Dash - > > >> junkmate wrote: > > >>> I use this link to allow a member to ''add a friend'' to his account, by > >>> clicking the following link: > > >>> <a href=\"javascript:void(0);\" > >>> onclick=\"if(confirm(''Add ".$row->name." as friend?'')) { > >>> new Ajax.Request(''/perform?action=addfriend'', { method: ''post'', > >>> postBody: ''friendid=".$row->id."'', asynchronous:''true'', > >>> evalScripts:''true'' }) > >>> };return false;\">Add Friend</a> > > >>> The user clicks the link, my PHP stored at perform?action=addfriend > >>> kicks in, and the friend is added. What I then want to do is CHANGE > >>> the ''add friend'' text to a green ''Friend Added'' text so the user knows > >>> its been done. > > >>> I dont know how :(--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
oh, one more question though. Is it possible for the message "friend added" to come from the ajax called script (ie. perform? action=addfriend) as I want a different message if its already a friend, or if something went wrong etc. which can only be done from the called script. On Jun 14, 4:39 pm, David Dashifen Kees <dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> The $$() utility function is a javascript addition via Prototype just > like the $() function. You can read more about them online at the > Prototype API docs:http://www.prototypejs.or/api. It uses a CSS > selector to gather a list of elements. That list is then an instance of > the Prototype Enumerable object, so you can use functions like each(), > invoke(), pluck(), etc. on it. A very useful function. > > - Dash - > > junkmate wrote: > > wow, thats a pretty impressive response! Thanks! Im completely new to > > Ajax so im guilty of sticking to what i know by embedding PHP here and > > there, but your observer method looks much better. I will try hacking > > that up and see how I get on. Just a quick noob question though... > > where does that $$ utility go? :D > > > On Jun 14, 3:57 pm, David Dashifen Kees <dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > >> For the easiest way to do it, you''ll want to give your "Add Friend" > >> anchors each a unique ID. Then, just add an onSuccess callback function > >> to your Ajax.Request which does this ... > > >> $("anchorID").update("Friend Added"); > > >> Alternatively, you could change from an Ajax.Request object to an > >> Ajax.Updater and do the following ... > > >> <a id="anchorID" href="javascript:void(0);" onclick="if(confirm(''Add > >> " . $row->name . " as friend?'')) { > >> new Ajax.Updater("anchorID", "/perform.php?action=addfriend", > >> { ... }); > >> }; return false;">Add Friend</a> > > >> ... just make sure that your /perform.php?action=addfriend page echoes > >> "Friend Added" at the bottom. > > >> And, finally, you might be better served by using the Event.observe() > >> function to unobtrusively call javascript functions rather than entering > >> them each into the onclick handlers of your anchors. You could either > >> add an observer for each anchor or you could add an observer for the > >> table in which then makes sure that an anchor was clicked before firing > >> the Ajax. For clarity, depending on the number of anchors on the page, > >> adding observers to the anchors might be better and is definitely easier > >> to understand, I feel. I suggest that for this, you add a custom > >> attribute of "friend" to each anchor which you can read with prototype > >> when you need it > >> rather than embedding PHP in your javascript code. > > >> <a href="javascript:void(0);" friend="<?=$row->name?>" > >> id="<?=$row->id?>"> > > >> Then, you can use the $$() utility to get all anchors with a friend > >> attribute and apply an click observation to them: > > >> $$("a[friend]").each(function(a) { > >> a.observe("click", function() { > >> if(confirm("Add " + a.readAttribute("friend") + " as a > >> friend?")) { > >> new Ajax.Request("/perform.php?action=addfriend", { > >> postBody: "friendid=" + a.readAttribute("id"), > >> asynchronous: true, > >> evalScripts: true, > >> method: "post", > > >> onSuccess: function() { > >> var parent = a.up(); > >> a.remove(); > >> parent.innerHTML = "Friend Added" > >> } > >> }); > >> } > >> }); > >> }); > > >> With this code, I also made sure that when the success callback happens, > >> the link is removed from the DOM, otherwise, someone could click the > >> link a second time and, unless your perform.php page can handle a > >> double-addition of the same friend. > > >> The code above might not work right away; I don''t know things like the > >> way your $row->id variable is constructed and whether or not it''s a > >> valid HTML ID attribute or not. But, the above should get your > >> started. Feel free to ask any questions you might have. > > >> - Dash - > > >> junkmate wrote: > > >>> I use this link to allow a member to ''add a friend'' to his account, by > >>> clicking the following link: > > >>> <a href=\"javascript:void(0);\" > >>> onclick=\"if(confirm(''Add ".$row->name." as friend?'')) { > >>> new Ajax.Request(''/perform?action=addfriend'', { method: ''post'', > >>> postBody: ''friendid=".$row->id."'', asynchronous:''true'', > >>> evalScripts:''true'' }) > >>> };return false;\">Add Friend</a> > > >>> The user clicks the link, my PHP stored at perform?action=addfriend > >>> kicks in, and the friend is added. What I then want to do is CHANGE > >>> the ''add friend'' text to a green ''Friend Added'' text so the user knows > >>> its been done. > > >>> I dont know how :(--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Of course it''s possible :)
new Ajax.Request (''someScript.php'', {
parameters: {
foo1: bar1,
foo2: bar2
},
method: ''get'',
onSuccess: function(data) {
$(''someElement'').update(data.responseText);
}
})
When Ajax.Request is executed onSuccess method receives an XMLHTTPRequest
object as a parameter (I called it ''data'' in this case). This
object has
responseText and responseXml properties.
If i''m not mistaken, responseXml contains XML document ONLY if server
response has "content-type" header set to "text/xml",
otherwise responseText
is usually more than enough...
--
View this message in context:
http://www.nabble.com/ajax-request-response-tf3921752.html#a11132382
Sent from the RubyOnRails Spinoffs mailing list archive at Nabble.com.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---