将function附加到导轨3中的按钮
我的网页上有一组按钮。 单击其中一个按钮的效果需要是调用外部API(可能是收到的响应,并更新页面上的内容)。
一些附加信息:这些按钮由部分放置在页面上,并构成用户列表的一部分。 这些按钮用于激活和停用列出的用户。 我不确定这种设置是否会影响我做我想做的最佳方法,所以我认为值得一提。
该怎么做? 按钮是否应该链接到我的rails应用程序中的某个控制器? 当按钮被击中时,是否需要重新加载页面? 我可以将该请求卸载到ajax吗?等。
我不知道解决这个问题的最佳方法,任何指导都会certificate是非常宝贵的。
好。 我相信我已经找到了很好的实现。
诀窍是创建一个封装按钮的表单,以便在单击按钮时点击正确的控制器。 在我的例子中,我使用rails form_tag
函数在我的Developer控制器的_list_item.html.erb
局部视图中生成我的按钮,如下所示:
> <%= form_tag "/Developer/toggle", :method => "get", :remote => true do %> <% if list_item.inactive? %> <%= submit_tag "Activate", :name => nil %> <% else %> <%= submit_tag "Deactivate", :name => nil %> <% end %>
/> <% end %>
在这部分内容中有两件事需要引起注意。
- 由于这是部分呈现为列表的一部分,因此您希望为每个列表项提供唯一的ID,以便您的javascript仅对该元素起作用。 这是在第一行>
-
:remote => true
是form_for
函数的必要参数,这是导致请求在后台进行而不是加载新页面的原因。
这个表单在提交时会触发我的Developer#toggle
操作,其中包含两个参数: act
,即activate
或deactivate
, id
是我们正在处理的Developer的id。 这两个参数都是表单中的隐藏字段。
在提交表单之后,在控制器内部,我只获取了正确开发人员的实例(在我的情况下,这样做相当复杂,但在大多数情况下,它可能类似于@dev = Developer.find(id)
),并执行激活/停用开发人员所需的步骤。
最后,我在我的Developer控制器的视图目录中创建了一个toggle.js.erb
文件,该文件在控制器完成其任务后呈现。 这个文件只是获取元素(通过我们在partial中给出的唯一id)并通过重新渲染部分来替换内部html,如下所示:
document.getElementById("<%=escape_javascript(@dev.id)%>").innerHTML="<%=escape_javascript(render :partial => 'developer/list_item', :object => @dev) %>";
结果是在开发人员活动状态更改后部分重新呈现,从而生成相应的“ Activate
或“ Deactivate
按钮。
我意识到这个答案高度集中在我的特定应用上,特别是需要处理活动与非活动的切换,但我相信它很容易简化并适应其他可能需要较少复杂性的情况。
您可以使用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教程。