Использование 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'))%>")

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

в приложении / просмотры / общий доступ:

<%= 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

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

Любая помощь будет очень, очень признателен!

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, я рекомендую Документы (это хорошо читается): http://mootools.net/docs/

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

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