3

我的网页上显示了一组按钮。单击其中一个按钮的效果需要是调用外部 API（可能是接收到的响应，并更新页面上的某些内容）。

一些附加信息：这些按钮被部分放置在页面上，并构成用户列表的一部分。这些按钮旨在激活和停用列出的用户。我不确定这个设置是否会影响做我想做的事情的最佳方法，所以我认为值得一提。

这应该怎么做？这些按钮是否应该链接到我的 Rails 应用程序中的某个控制器？按下按钮时不需要重新加载页面吗？我可以将该请求卸载到 ajax 吗？等。

我不知道解决这个问题的最佳方法，任何指导都将证明是无价的。

4

2 回答 2

2

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

诀窍是创建一个封装按钮的表单，以便在单击按钮时点击正确的控制器。在我的例子中，我使用 railsform_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>

在这个部分中有两件事应该引起注意。

  1. 由于这是作为列表的一部分呈现的部分内容，因此您希望为每个列表项提供一个唯一的 id，以便您的 javascript 仅作用于该元素。这是在第一行完成的<div id=<%= list_item.id %>>，我知道这将是唯一的，因为列表中的每个 Developer 都必须具有唯一的 ID。
  2. :remote => true是form_for函数的必要参数，这是导致在后台发出请求而不是加载新页面的原因。

此表单在提交时会Developer#toggle使用两个参数触发我的操作：act，它是activateor deactivate，id它是我们正在操作的 Developer 的 id。这两个参数都是表单中的隐藏字段。

提交表单后，在控制器内部，我只需获取正确 Developer 的实例（在我的情况下，这样做相当复杂，但在大多数情况下可能类似于@dev = Developer.find(id)），并执行激活/停用所需的步骤开发商。

最后，我在toggle.js.erbView 目录中为我的 Developer 控制器创建了一个文件，一旦控制器完成其任务就会呈现该文件。该文件简单地获取元素（通过我们在部分中提供的唯一 id）并通过重新渲染部分来替换内部 html，如下所示：

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

结果是在开发人员活动状态发生变化后重新渲染部分，从而产生适当的Activate或Deactivate按钮。

我意识到这个答案高度关注我的特定应用程序，特别是需要处理活动与非活动的切换，但是我相信它很容易简化并适应可能需要较少复杂性的其他情况。

于 2012-07-05T22:55:34.753 回答
0

您可以使用 Rails 完成此任务，但必须完成页面刷新。如果您使用 Javascript/AJAX，则不应刷新页面。示例（jQuery）：

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

编辑：上面是 jQuery 代码。你想要做的是当你点击按钮时发生的一些动作。如果你想调用外部 API，那么你可以使用 ajax。在 jQuery 中查找 POST 和 GET 的文档：http: //api.jquery.com/jQuery.post/和http://api.jquery.com/jQuery.get/。Google for rails jquery 教程。

于 2012-07-05T00:32:34.670 回答