如何创建弹出窗口以在rails 3中创建新记录

2024-03-06

我们有一个要求,网页显示连接几个表的所有记录。 我们有一个“添加按钮” - 单击该按钮后,我必须显示一个弹出窗口,用户将在其中输入必要的详细信息。弹出窗口将有两个按钮“保存”和“取消”。

单击“保存”按钮,应验证字段,如果所有验证均通过,则将记录保存到数据库,否则在警报框中显示错误消息。

单击取消按钮将关闭弹出窗口。

如何在单击添加按钮时创建弹出窗口?


您需要将服务器端(Rails、控制器、操作)和客户端(弹出窗口、JavaScript、发送请求)分开。

您的客户端操作(JavaScript 代码)应该将您的 Rails 应用程序视为some服务器,返回some的回应some要求。从 JavaScript 的角度来看,服务器运行的是 Rails 还是 Smalltalk 并不重要。

弹出窗口的基本工作流程可能是:

1)打开一个新窗口- 这需要客户端JavaScript 的活动。使用窗口.打开 https://developer.mozilla.org/en/DOM/window.open函数,或者(我谦虚地认为这种方法更好)创建一个新的 https://developer.mozilla.org/en/DOM/document.createElement <div>并使用 CSS 对其进行样式设置,使其覆盖(半透明背景是一个很好的效果:background: #ddf; opacity: 0.5;,通过它您仍然可以看到页面的内容)。

2)用编辑表单填充窗口- 这是你的客户端脚本应该进行类似 AJAX 的调用(不一定是真正的 AJAX,因为在这种情况下同步请求可能是明智的)从 Rails 应用程序获取编辑表单。请参阅这个简单的示例:

function fillPopupBody(popup) {
  var req = new XMLHttpRequest();
  req.open("GET","/something/partial_new_form.html",false); // Synchronic request!
  req.send(null);
  if( req.status == 200 ) {
    popup.innerHTML = req.responseText;
    return true;
  } else {
    popup.innerHTML = "<p class='error'>"+req.status+" ("+req.statusText+")</p>";
    return false;
  }
}

3) 在 Rails 应用程序中准备表单返回操作 - (服务器端)通常这可能是你的new给定资源控制器的操作,但在没有布局的情况下呈现。

另一种方法是通过 JavaScript 构建表单(无需单独获取),或者始终将其包含在页面中 - 默认情况下隐藏,因此 JavaScript 只需要设置其display财产。

4)处理表单提交- 您可能希望用户留在同一页面上,因此您应该拦截表单提交。只需将处理程序添加到创建的表单的“提交”事件中,构建请求,发布请求,检查服务器响应。

The Rails 将通过您的 :create 操作返回响应。您可能已经准备好了,因为创建的代码./script/rails generate scaffold通常是可以的。

如果响应是 201(已创建),您可以关闭弹出窗口(display: none)并更新页面以显示新对象 - 刷新整个页面,或仅获取更改的部分。

If the create操作无法创建对象,默认情况下响应代码为 422(无法处理的实体),内容是模型错误对象,呈现为 JSON 或 XML。只需在表单中显示错误(让您的 JavaScript 设置innerHTML一些预定义元素)。


这是执行任务的“手动”方式。我对 JavaScript 库有一些厌恶(很难解释;-),而且我更喜欢直接使用 DOM。您可能会发现很多 Rails 助手,它们可以帮助您免去编写 JavaScript 代码的麻烦。我想看着:remote => true的参数form_for将是一个很好的起点。

还有 jQuery 文档 (http://docs.jquery.com/Main_Page http://docs.jquery.com/Main_Page)可能是一件值得阅读的好东西。

结束这个漫长的故事,以下是short从评论中回答你的问题:

如何从弹出窗口链接控制器操作?

:通过向正确的 URL 发送 HTTP 请求:“GET /users/1/notes/new”、“POST /user/1/notes”

我如何关闭弹出窗口?

: 通过设置display: none如果弹出窗口是页面的一个元素,或者通过调用window.close()如果您的弹出窗口是一个单独的窗口。

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

如何创建弹出窗口以在rails 3中创建新记录 的相关文章

随机推荐

  • 有效检查两个浮点值是否具有不同的符号

    我需要查找是否有两个有限浮点值A and B有不同的符号或其中之一为零 在许多代码示例中 我看到测试如下 if A lt 0 B gt 0 A gt 0 B lt 0 它工作正常 但对我来说看起来效率低下 因为这里验证了许多条件 并且每个条
  • SQL 查询返回几十年来的最大值

    这是使用 MYSQL我的问题如下 我有一个棒球数据库 在该棒球数据库中有一个主表 其中列出了曾经参加过比赛的每个球员 还有一个击球表 跟踪每个球员的击球统计数据 我创建了一个将这两者结合在一起的视图 因此masterplusbatting桌
  • 如何在 Django 模型中存储任意名称/值键对?

    我有一个包含很多数据字段的固定数据模型 class Widget Models model widget owner models ForeignKey auth User val1 models CharField val2 models
  • Python 中的硒

    我一直在使用 urllib2 访问网页 但它不支持 javascript 所以我看了一下 Selenium 但即使读了它的文档我也很困惑 我下载了适用于 Firefox 的 Selenium IDE 插件 并尝试了一些简单的操作 from
  • 如何将 C# 方法作为回调传递给 CLI/C++ 函数?

    我在 C CLI 中有这样的方法 void Foo OnEngineCloseCallback callback 具有这样的回调定义 typedef void OnEngineCloseCallback int String errorMe
  • SQL Server - 过去 12 个月的累计总和,但从上个月开始 (SQL Server 18)

    我需要计算过去 12 个月内某个值的累计总和 到目前为止 我的累积计算正在运行 但从当月开始 我需要过去 12 个月的总计 从从上个月开始 目前 我正在使用OVERSQL 子句 从当前行 月开始运行累积总计 请参考下面我的代码示例 SELE
  • 如何将外部资源(属性文件)添加到类路径中以便 war 可以读取?

    我们在将外部目录 具有 config properties 添加到类路径时遇到了小问题 如果我们将其添加到类路径中 我们应该能够在 Web 应用程序中读取它 Web 应用程序中有一些 Spring 应用程序会读取外部属性文件 我在任何地方都
  • CSS @font-face 不适用于 Firefox,但适用于 Chrome 和 IE

    以下代码适用于 Google Chrome beta 以及 IE 7 但是 Firefox 似乎存在问题 我怀疑这是我的 CSS 文件包含方式的问题 因为我知道 Firefox 对于跨域导入不太友好 但这只是静态HTML 不存在跨域问题 在
  • unpack_from 需要至少 1164 字节的缓冲区 [关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 我正在使用 struct 来解析固定宽度字符串 但是 我在处理大于 1000 字节的固定宽度字符串时遇到了一些麻烦 例如
  • 交互设计、视觉设计、网页设计、UX设计、UI设计、UI开发之间有什么区别? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 交互设计 视觉设计 网页设计 UX设计 UI设计 UI开发之间有什么区别 BTB 下面找到的链接回答了 UI 与 UX 的问题 htt
  • Apache Flink AWS S3 Sink 是否需要 Hadoop 进行本地测试?

    我对 Apache Flink 比较陌生 我正在尝试创建一个简单的项目 将文件生成到 AWS S3 存储桶 根据文档 我似乎需要安装 Hadoop 才能执行此操作 如何设置本地环境来测试此功能 我在本地安装了 Apache Flink 和
  • Next.js:嵌套动态路由的 getStaticPaths

    想象一下你有这样的数据结构 const data posts id 1 title Post 1 slug post 1 id 2 title Post 2 slug post 2 comments id 1 postId post 1 t
  • KDB:字符串与表的比较

    我有一张表 bb bb key1 0 1 2 1 7 col1 1 2 3 4 5 col2 5 4 3 2 1 col3 11 22 33 44 55 如何进行字符串的关系比较 假设我想获取 col3 小于或等于 33 的记录 selec
  • ssl 证书代码异常

    我与 sslStream 建立了客户端服务器套接字连接 但当代码到达行时 服务器上出现异常作为服务器进行身份验证我在互联网上搜索 但找不到为什么会发生这种情况的好答案 我在项目中创建了 pfx 测试文件 并为其设置了一个简单的密码 我不知道
  • codeigniter 中漂亮的 url 设置

    我有控制器 package 函数 tour package 和参数 1 的网址 http www mysite in package tour packages 1 http www mysite in package tour packa
  • SQL数值数据类型截断值?

    我真的希望那里的一些 SQL 专家可以帮助解决这个问题 如果之前已经回答过这个问题 我深表歉意 我确实尝试找到一篇类似的帖子 但无济于事 declare theanswer numeric 38 16 select theanswer 0
  • Facebook FQL 查询使所有用户在线

    我在本地 MySQL 数据库中保存了我的应用程序的所有用户的记录 我拥有获取用户在线状态所需的所有相关信息 UID access token并授予extended permission 如何获取所有用户的在线状态 我目前使用的方法是分别查询
  • 无法在 iOS 4 中播放视频

    我已经编写了在 iPhone OS 3 1 3 中播放视频的代码 并且视频播放正常 但是当我尝试使用相同的代码播放视频时 视频在 iOS 4 中无法播放 我知道 iOS 4 的媒体播放器框架已更改 有什么方法可以在不同的操作系统上播放视频而
  • 您是否发现本机 JSON 实现中存在任何错误? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 如何创建弹出窗口以在rails 3中创建新记录

    我们有一个要求 网页显示连接几个表的所有记录 我们有一个 添加按钮 单击该按钮后 我必须显示一个弹出窗口 用户将在其中输入必要的详细信息 弹出窗口将有两个按钮 保存 和 取消 单击 保存 按钮 应验证字段 如果所有验证均通过 则将记录保存到