将功能附加到 Rails 3 中的按钮

2024-02-09

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

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

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

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


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

诀窍是创建一个封装按钮的表单,以便在单击按钮时点击正确的控制器。就我而言,我使用了 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 %>>,我知道它是唯一的,因为列表中的每个开发人员都必须有一个唯一的 id。
  2. :remote => true是一个必要的论证form_for这就是导致在后台发出请求而不是加载新页面的原因。

此表格提交后会点击我的Developer#toggle有两个参数的动作:act,这是activate or deactivate and id这是我们正在操作的开发者的 ID。这两个参数都是表单中的隐藏字段。

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

最后,我创建了一个toggle.js.erb我的开发人员控制器的视图目录中的文件,一旦控制器完成其任务,该文件就会被渲染。该文件只是获取元素(通过我们在部分中提供的唯一 id)并通过重新渲染部分来替换内部 html,如下所示:

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

结果是在开发人员活动状态更改后重新渲染部分,从而产生适当的结果Activate or Deactivate button.

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将功能附加到 Rails 3 中的按钮 的相关文章

随机推荐

  • Firebase Cloud Functions 模拟器抛出“退出代码:1”错误

    我正在尝试设置本地环境来测试 firebase 云功能 我跟着一起他们的文档 https firebase google com docs functions local emulator但现在遇到以下错误 错误 firestore 模拟器
  • 代码::Blocks/ Dev-c++: 错误: iostream: 没有这样的文件或目录

    我从这里下载了 Code Blocks http www codeblocks org downloads 26 http www codeblocks org downloads 26 我正在学习c编程 当我运行以下程序时 出现错误 io
  • C 中的短整型文字

    为什么 C 中没有短整型文字 在 C 中使用短 int 文字是没有意义的 因为所有整数表达式都会被计算 就好像子表达式的大小至少为 int 一样
  • 输入元素上的 Autocapitalize 属性(用于 iOS)会破坏验证

    可以看出here http www evotech net blog category html Safari 和 iPhone 版 Safari 支持所有 HTML 元素 包括已弃用的元素 甚至一些从未属于任何 W3C 规范的专有元素 它
  • 南非身份证号码验证并获取年龄和性别

    我对此进行了研究 但我使用的代码似乎都不起作用 南非身份证号码包含出生日期和性别 我想要的只是在输入字段中输入他们的 ID 号时提取该信息并验证它 最好是使用 jQuery 或 javascript 任何帮助表示赞赏 Dawid 您可以使用
  • 如何使用geom_vline和geom_histogram r ggplot2从填充比例图例中删除线条

    基本 使用R统计软件ggplot2 geom vline和geom histogram可视化一些数据 问题出在图例键上 我试图从一些随机模拟中绘制一对直方图 并在其之上绘制几条代表确定性模拟结果的线 我已经绘制了数据 但直方图的图例键中间有
  • 具有 AJAX 功能的 jQuery 循环插件

    我有一个页面 其中有多个图片滑块 例如 50 个滑块 每个滑块有 5 10 张图片 不幸的是 由于滑块数量巨大 页面加载速度非常慢 到目前为止 我一直在使用 Malsup 著名的 jQuery Cycle 插件 然而 这缺乏 AJAX 功能
  • 如何在 Visual Studio 2019 中将当前分支与另一个分支进行比较?

    在 Visual Studio 中 假设以下场景 从 master 创建一个分支 做一些改变 Commit 再次进行一些更改 Commit 当我们进行提交时 下面没有显示任何更改团队资源管理器 gt 更改 如果我们不执行第 5 步Chang
  • 为什么 AWS Lambda 无法到达 FunctionHandler?

    I am 首次将 C 应用程序部署到 Lambda 使用 Mac 因此无法使用 Visual StudioAWS 工具包扩展 https marketplace visualstudio com items itemName AmazonW
  • AngularJS 在表单输入上输入指令时不保存模型值

    我在页面上有以下内容 完整代码在此Plunker http plnkr co edit NZMC0Km3pFUBGXgcVopx p preview 有一个习俗onEnter当在聊天表单输入上按 Enter 键时调用函数的指令 下面的代码片
  • 使用 Websockets 代替 RESTful HTTP 有哪些陷阱?

    我目前正在开发一个项目 需要客户端请求一个大作业并将其发送到服务器 然后 服务器划分作业并以一组 url 进行响应 以便客户端进行 GET 调用并流回数据 我是该项目的新手 目前正在使用 Spring websockets 来提高效率 We
  • 如何让两个div并排对齐? [复制]

    这个问题在这里已经有答案了 我一直试图让两个 div 并排浮动 或者基本上是购物车和物品 即 jcart 和 cartbox 但似乎无法得到它 这是演示 link http asiraj com 我尝试改变float right 在购物车
  • C - 确定使用哪个分隔符 - strtok()

    假设我正在使用strtok 像这样 char token strtok input 有没有办法确定实际使用了哪个令牌 例如 如果输入类似于 Hello there How are you I m good End 我可以找出每个标记使用了哪
  • Angular 2 Setter 和 Getter

    我正在尝试创建一个服务来将数据解析到不同路线上的不同组件 如果我在同一组件上调用后续服务 我会得到所需的结果 但如果我尝试从另一个组件获取设置的结果 该服务将返回未定义的结果 这是我的服务 import Injectable from an
  • 位移位的目的是什么? [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我在代码中遇到了以下几行 unsig
  • 如何在 Phonegap 3 上使用 plugin.xml 复制自定义 ios 框架

    我目前正在为phonegap 3 制作一个插件 我有一个自定义框架可以使用源文件指令进行复制 在plugin xml中我尝试过
  • 绑定与 SO_BINDTODEVICE 套接字

    我正在 linux ubuntu 13 10 上运行一个项目 它使用原始套接字连接到设备 这是我的代码 builed socket if sockfd socket PF PACKET SOCK RAW htons ETH P ALL 1
  • .Net框架4.0 SDK

    有谁知道是否有 Net 4 0 框架的 SDK 如果有 安装程序将其放在硬盘驱动器的哪个位置 我已经安装了 Visual Studio 2010 旗舰版 但在任何地方都找不到 SDK NET SDK 的最后一个独立版本是 2 0 之后它与W
  • 在线程中“浪费时间”最高效的 CPU 方式是什么?

    我有许多线程 100 个 每个线程一次执行几秒钟 当它们执行时 它们花费大量时间等待另一个系统 串行设备 的响应 我注意到 同时执行 100 个线程可能会占用大量资源 因此我实际上限制了可以同时启动的线程数量 但我想到 在线程内等待外部事件
  • 将功能附加到 Rails 3 中的按钮

    我的网页上显示一组按钮 单击其中一个按钮的效果需要是调用外部 API 可能会收到响应 并更新页面上的某些内容 一些附加信息 这些按钮部分地放置在页面上 并构成用户列表的一部分 这些按钮用于激活和停用列出的用户 我不确定这个设置是否会影响做我