在轨道3附加功能按钮 [英] Attaching functionality to a button in rails 3

问题描述

我有一组显示在我的网页按钮。点击按钮中的一个的作用需要有一个呼叫正在到外部API的（也许正在接收的响应，并更新页的东西）。

一些额外的信息：这些按钮被放置在页面上由一个局部的，并弥补了用户的列表的一部分。按钮是为了激活和去激活被列出的用户。我不知道，如果这个设置将影响做我想要做的最好的办法，所以我认为这将是值得一提。

应如何做？如果按钮是我的Rails应用程序中链接到一些控制器？会不会需要的页面当按钮被击中重新加载？我可以卸载该请求阿贾克斯？等等。

我不知道接近最好的办法，任何指导，将是非常宝贵。

解决方案

确定。我相信我已经找到了一个很好的实现了这一点。

关键是要创建一个表单，以打正确的控制器单击按钮时封装的按钮。就我而言，我用钢轨的form_tag 功能为我的 _list_item.html.erb 局部视图中生成我的按钮我开发的控制器如下：

 ＆LT; D​​IV ID =＆LT;％= list_item.id％GT;＆GT;
    ＆LT;％=的form_tag/开发/切换：方法=＆GT; 搞定，：遥控=＆GT;真正做到％GT;
    ＆所述p为H.;
        ＆LT;如果list_item.inactive％？ ％GT;
        ＆LT;％= submit_tag激活，：名称=＆GT;零％GT;
        ＆LT;输入类型=隐藏名称=行动值=激活/＆GT;
        ＆LT;％其他％GT;
        ＆LT;％= submit_tag停用：名称=＆GT;零％GT;
        ＆LT;输入类型=隐藏名称=行动值=禁用/＆GT;
        ＆LT;％结束％GT;
    ＆所述; / P＆GT;
    ＆LT;输入类型=隐藏的名字=的dev_id值=＆LT;％= list_item.id％GT; /＆GT;
    ＆LT;％结束％GT;
＆LT; / DIV＆GT;
 

有两件事情应该被要求注意在这个部分。

1. 由于这是一个部分呈现为一个列表的一部分，你想给每个项目一个唯一的ID，这样你的JavaScript将只在该元素上采取行动。这是在第一线做的，＆LT; D​​IV ID =＆LT;％= list_item.id％GT;＆GT; ，我知道会是独一无二的，因为在每一个开发者列表不一定都有唯一的ID。


2. ：远程=＆GT;真正是一个必要的参数传递给的form_for 的功能，这是什么原因造成的在后台进行的要求，而不是加载了新的一页。

这个表单，提交的时候打我的开发者＃切换操作有两个参数：行为，可以是激活或停用和 ID 这是对的ID我们在行动上开发。这两个参数的形式中隐藏字段。

在提交表单

后，控制器里面，我只获得正确的开发者的一个实例（在我的情况下，这样做是相当复杂的，但在大多数情况下，它可能像 @dev = Developer.find（ID）），并进行激活/停用的开发商。必要步骤

最后，我创建了一个 toggle.js.erb 一旦控制器已经完成了它的任务，被渲染为我开发的控制器视图目录中的文件。该文件只获得元素（通过唯一的ID，我们把它的部分），并通过重新渲染局部如下替换内部HTML：

<$p$p><$c$c>document.getElementById(\"<%=escape_javascript(@dev.id)%>\").innerHTML=\"<%=escape_javascript(render ：部分=＆GT; 开发者/ LIST_ITEM'：对象=＆GT; @dev）％＆gt;中;

其结果是开发商的工作状态发生了变化后，部分被重新渲染，导致相应的激活或停用按钮。

我知道这个答案是高度集中在我的特定的应用，尤其是需要处理的活跃与不活跃的来回切换，但我相信它很容易简化，适应，可能需要降低复杂性的其他案件。

I have a set of buttons displaying on my webpage. The effect of clicking one of the buttons needs to be that a call is made to an external API (and maybe the response being received, and updating something on the page).

Some additional information: these buttons are placed on the page by a partial, and make up part of a list of users. The buttons are intended to activate and deactivate the users being listed. I'm not sure if this setup will affect the best approach for doing what I want to do, so I thought it would be worth mentioning.

How should this be done? Should the buttons be links to some controller within my rails app? Wouldn't that require the page to be reloaded when the button is hit? Can I offload that request to ajax?, etc.

I don't know the best way to approach this, and any guidance would prove invaluable.

解决方案

Ok. I believe I have found a good implementation of this.

The trick is to create a form encapsulating the button in order to hit the proper controller when the button is clicked. In my case, I used the rails form_tag function to generate my button within my _list_item.html.erb partial view for my Developer controller as follows:

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

There are 2 things that should be called to attention within this partial.

1. Since this is a partial rendered as part of a list, you want to give each list item a unique id so that your javascript will act on only that element. This is done in the first line, <div id=<%= list_item.id %>>, which I know will be unique because each Developer in the list necessarily has a unique id.
2. :remote => true is a necessary argument to the form_for function this is what causes the request to be made in the background as opposed to loading a new page.

This form, when submitted hits my the Developer#toggle action with two parameters: act, which is either activate or deactivate and id which is the id of the Developer we are acting on. Both of these parameters are hidden fields within the form.

After the form is submitted, inside of the controller, I just obtain an instance of the correct Developer (in my case, doing so is rather complicated, but in most cases it's probably something like @dev = Developer.find(id)), and performs the steps necessary to activate/deactivate the developer.

Lastly, I created a toggle.js.erb file within the view directory for my Developer controller which gets rendered once the controller has completed its task. This file simply obtains the element (through the unique id we gave it in the partial) and replaces the inner html by re-rendering the partial as follows:

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

The result is the partial being re-rendered after the developers active status has changed, resulting in the appropriate Activate or Deactivate button.

I realize that this answer is highly focused on my particular application, especially needing to deal with the toggling of active vs. inactive, however I believe it is easily simplified and adapted to other cases that may require less complexity.

这篇关于在轨道3附加功能按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！