Использование AJAX в Rails: как изменить кнопку, как только она нажата?

Question

Привет! Я учу себя Руби, и застрял на этом пару дней:

• В настоящее время я использую MooTools-1.3-compat и Rails 3.

• Я хотел бы заменить одну кнопку (называемую "Follow") на другую (называемую "Unfollow"), как только кто-то нажмет на нее. Я использую :remote => true и у меня есть файл, оканчивающийся на .js.erb, который вызывается... Мне просто нужна помощь, чтобы выяснить, что происходит в этом файле.js

• Кнопка "Follow" находится в div с id="follow_form", но на странице много кнопок, и все они имеют id="follow_form"... т.е. $("follow_form"). Set(...) заменяет первый элемент, и это не правильно. Мне нужна помощь, чтобы заменить кнопку, которая сделала звонок.

• Я посмотрел этот урок, но строка ниже не работает для меня. Может быть потому, что я использую MooTools вместо Prototype?

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

пс. Это то, что я имею до сих пор, и это работает:

в app/views/shared:

<%= form_for current_user.subscriptions.build(:event => @event), :remote => true do |f| %>
  <div><%= f.hidden_field :event %></div>
  <div class="actions"><%= f.submit "Follow" %></div>
<% end %>

в приложении / views / events / create.js.erb

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

* в приложении / контроллеры /subscription_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

Любая помощь будет с благодарностью!

Answer 1

1. Селектор идентификаторов следует использовать, если на странице есть только один из этих элементов, так как селектор идентификаторов используется для уникальных идентификаторов. Селектор класса - это то, что вы ищете. Классы используются для нескольких элементов, имеющих одинаковые стили или одинаковые события javascript.

2. Код для замены Follow на Unfollow будет следующим в Mootools. Я не совсем понимаю ваш вопрос, но вам нужно будет присвоить идентификатор кнопке.

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

3. Mootools имеет другой набор функций, чем Prototype, поэтому большая часть (если не весь) код, разработанный для прототипа, не будет работать в Mootools. Если вы хотите увидеть функции в Mootools, я рекомендую Docs (это хорошо читается): http://mootools.net/docs/

Этот код будет работать для вас, если вы не можете / не можете добавить уникальные идентификаторы для каждого элемента формы:

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