Прикрепление функции к кнопке в рельсах 3

Question

У меня есть набор кнопок, отображаемых на моей веб-странице. Эффект нажатия одной из кнопок должен заключаться в том, что вызов выполняется внешнему API (и, возможно, полученному ответу и обновлению чего-либо на странице).

Дополнительная информация: эти кнопки размещаются на странице частично и составляют часть списка пользователей. Кнопки предназначены для активации и деактивации перечисленных пользователей. Я не уверен, что эта настройка повлияет на лучший подход к выполнению того, что я хочу сделать, поэтому я подумал, что стоит упомянуть.

Как это сделать? Должны ли кнопки быть ссылками на какой-то контроллер в моем приложении rails? Разве это не требовало бы перезагрузки страницы при нажатии кнопки? Могу ли я разгрузить этот запрос ajax ?, и т. Д.

Я не знаю, как лучше подойти к этому, и любое руководство окажется неоценимым.

Answer 1

Хорошо. Я считаю, что нашел хорошую реализацию этого.

Фокус в том, чтобы создать форму, инкапсулирующую кнопку, чтобы попасть в правильный контроллер, когда нажимается кнопка. В моем случае, я использовал рельсы form_tag функцию, чтобы генерировать свою кнопку в течение моего _list_item.html.erb частичного вида на мой контроллер для разработчиков следующим образом:

<div id=<%= list_item.id %>> 
    <%= form_tag "/Developer/toggle", :method => "get", :remote => true do %> 
    <p> 
     <% if list_item.inactive? %> 
     <%= submit_tag "Activate", :name => nil %> 
     <input type="hidden" name="act" value="activate" /> 
     <% else %> 
     <%= submit_tag "Deactivate", :name => nil %> 
     <input type="hidden" name="act" value="deactivate" /> 
     <% end %> 
    </p> 
    <input type="hidden" name="dev_id" value=<%=list_item.id%> /> 
    <% end %> 
</div> 

Есть 2 вещи, которые должны быть призваны вниманием в этом частично.

1. Поскольку это частичная визуализация как часть списка, вы должны дать каждому элементу списка уникальный идентификатор, чтобы ваш javascript действовал только на этом элементе. Это делается в первой строке, <div id=<%= list_item.id %>>, которая, как я знаю, будет уникальной, потому что каждый разработчик в списке обязательно имеет уникальный идентификатор.
2. :remote => true является необходимым аргументом для функции form_for. Это то, что заставляет запрос делать в фоновом режиме, а не загружать новую страницу.

Эта форма, когда представлены хиты мой Developer#toggle действия с двумя параметрами: act, который является либо activate или deactivate и id который является идентификатор разработчика мы действуем на. Оба этих параметра являются скрытыми полями в форме.

После отправки формы внутри контроллера я просто получаю экземпляр правильного разработчика (в моем случае это довольно сложно, но в большинстве случаев это, вероятно, что-то вроде @dev = Developer.find(id)) и выполняет этапы необходимо активировать/деактивировать разработчика.

И, наконец, я создал файл toggle.js.erb в каталоге вида для моего контроллера разработчика, который получает визуализацию после того, как контроллер выполнил свою задачу. Этот файл просто получает элемент (через уникальный идентификатор мы дали его частичный) и заменяет внутренний HTML путем повторного рендеринга парциального следующим образом:

document.getElementById("<%=escape_javascript(@dev.id)%>").innerHTML="<%=escape_javascript(render :partial => 'developer/list_item', :object => @dev) %>"; 

результата является частичным существо повторно вынесен после того, как изменилось активное состояние разработчиков, в результате чего появилась соответствующая кнопка Activate или Deactivate.

Я понимаю, что этот ответ очень сфокусирован на моем конкретном приложении, особенно для того, чтобы иметь дело с переключением активных и неактивных, однако я считаю, что он легко упрощается и адаптируется к другим случаям, которые могут потребовать меньшей сложности.

Answer 2

Вы можете выполнить эту задачу с помощью Rails, но затем обновление страницы должно быть выполнено. Если вы используете Javascript/AJAX, страница не должна обновляться. Пример (JQuery):

$(":button").click(function(){ 
    //Your Code here.. 
}); 

EDIT: Выше JQuery код. То, что вы хотите сделать, - это какое-то действие, когда вы нажимаете кнопку. Если вы хотите вызвать внешний API, вы можете использовать ajax. Найдите документацию для POST и GET в jQuery: http://api.jquery.com/jQuery.post/ и http://api.jquery.com/jQuery.get/. Google for rails jquery tutorial.