Using AJAX in Rails: How do I change a button as soon as it's clicked?

Hey! I'm teaching myself Ruby, and have been stuck on this for a couple days:

• I'm currently using MooTools-1.3-compat and Rails 3.

• I'd like to replace one button (called "Follow") with another (called "Unfollow") as soon as someone clicks on it. I'm using :remote => true and have a file ending in .js.erb that's being called...I just need help figuring out what goes in this .js file

• The "Follow" button is in a div with id="follow_form", but there are many buttons on the page, and they all have an id = "follow_form"...i.e. $("follow_form").set(...) replaces the first element and that's not correct. I need help replacing the button that made the call.

• I looked at this tutorial, but the line below doesn't work for me. Could it be because I'm using MooTools instead of Prototype?

  $("follow_form").update("<%= escape_javascript(render('users/unfollow')) %>")

ps. This is what I have so far, and this works:

in app/views/shared:

<%= form_for current_user.subscriptions.build(:event => @event), :remote => true do |f| %>
  <div><%= f.hidden_fi开发者_如何学Goeld :event %></div>
  <div class="actions"><%= f.submit "Follow" %></div>
<% end %>

in app/views/events/create.js.erb

alert("follow!"); //Temporary...this is what I'm trying to replace

*in app/controllers/subscriptions_controller.rb*

def create
  @subscription = current_user.subscriptions.build(params[:subscription])
  @subscription.save
  respond_to do |format|
    format.html { redirect_to(..) }
    format.js {render :layout}
end

Any help would be greatly, greatly appreciated!

---

1. The ID selector should be used if there is only one of those elements on the page, as the Id selector us for unique IDs. A Class selector is what your looking for. Classes are used for multiple elements that have the same styles or same javascript events.

2. The code to replace Follow with Unfollow would be as follows in Mootools. I am not totally understanding your question, but you will need to assign a ID to the button.

   document.addEvent('domready',function(){
        $$('follow_form').addEvent('click',function(e){
             //Ajax Here
             this.set('value','Unfollow');
         });
    });
   

3. Mootools has a different set of functions than Prototype, so most (if not all) code designed for prototype will not work in Mootools. If you want to see the functions in Mootools, I recommend the Docs (its a good read): http://mootools.net/docs/

This code would work as well for you, if you do not/can not add unique IDs to each form element:

    $$('input').addEvent('click',function(){
        if(this.value == 'Follow') {
            //Ajax Here
            this.set('value','Unfollow');
        }
    });