如何创建弹出窗口以在 Rails 3 中创建新记录 [英] How to create popup window to create new record in rails 3
问题描述
我们有一个要求，网页显示连接几个表的所有记录.我们有一个添加按钮"——单击按钮后，我必须显示一个弹出窗口，用户将在其中输入必要的详细信息.弹出窗口将有两个按钮保存和取消.
We have a requirement where the web page displays all the records from joining few tables. We have an "Add Button" - upon clicking the button, I have to display an popup window, where user will enter the necessary details. The popup will have two buttons Save and Cancel.
单击保存"按钮，应验证字段，如果所有验证均通过，则将记录保存到数据库，否则在警告框中显示错误消息.
Clicking Save button, should validate the fields and if all validations are passed, then save the record to database else display the error messages in alert boxes.
单击取消按钮将关闭弹出窗口.
Clicking Cancel button will close the popup window.
如何在点击添加按钮时创建弹出窗口?
How do I create popup upon clicking add button?
推荐答案
您需要将服务器端(Rails、控制器、操作)和客户端(弹出窗口、JavaScript、发送请求)分开.
You need to separate the things that are server-side (Rails, controllers, actions) and client-side (popups, JavaScript, sending requests).
p>
您的客户端操作(JavaScript 代码)应该将您的 Rails 应用程序视为关于 some 服务器，它为 some 返回 some 响应要求.从 JavaScript 的角度来看，服务器运行的是 Rails 还是 Smalltalk 并不重要.
Your client-side actions (JavaScript code) should think about your Rails application as about some server, which returns some responses for some requests. From JavaScript's point of view it is not important whether the server is running Rails or Smalltalk.
弹出窗口的基本工作流程可能是:
The basic workflow for your popup may be:
1) 打开一个新窗口 - 这需要 JavaScript 的 客户端 活动.使用 window.open 函数，或者(我谦虚地认为这种方法更好)创建一个新的 <div>并用CSS设置样式，这样它就会覆盖(一个很好的效果是半透明背景:background: #ddf; opacity: 0.5;，通过它你仍然可以看到页面的内容).
1) open a new window - This requires client-side activity of JavaScript. Use window.open function, or (I humbly consider this method a better one) create a new <div> and style it with CSS so it will cover (a nice effect is an half-opaque background: background: #ddf; opacity: 0.5;, through which you still see the content of the page).
2) 用编辑表单填充窗口 - 您的 客户端 脚本应该进行类似 AJAX 的调用 (不一定是真正的 AJAX，因为在这种情况下，同步请求可能是明智的) 从您的 Rails 应用程序中获取编辑表单.看这个简单的例子:
2) fill the window with an edit form - Here your client-side script should make an AJAX-like call (not necessarily real AJAX, since in this case a synchronic request may be sensible) to get the edit form from your Rails application. See this simplicated example:
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 操作给定的资源控制器，但没有布局渲染.
3) Prepare the form-returning action in your Rails application - (server-side) Usually this may be your new action of the given resource controller, but rendered without layout.
另一种方法是通过 JavaScript 构建表单(无需单独获取)，或者始终将其包含在页面中 - 默认情况下只是隐藏，因此 JavaScript 只需设置其 display 属性.
An alternative approach would be to build the form by the JavaScript (without fetching it separately), or to include it always in the page - just hidden by default, so the JavaScript needs only to set its display property.
4) 处理表单提交 - 您可能希望用户停留在同一页面上，因此您应该拦截表单提交.只需为创建的表单的提交"事件添加一个处理程序，构建一个请求，发布它，检查服务器响应.
4) Handle form submission - you probably want the user to stay on the same page, so you should intercept the form submission. Just add a handler to the "submit" event of the created form, build a request, post it, check the server response.
响应将由 Rails 通过您的 :create 操作返回.您可能已经准备好了，因为 ./script/rails generate scaffold 创建的代码通常是可以的.
The response will be returned by Rails, by your :create action. You may already have it ready, because the code created by ./script/rails generate scaffold is usually OK.
如果响应是 201(已创建)，您可以关闭弹出窗口(display: none)并更新页面以显示新对象 - 要么刷新整个页面，要么只获取更改的零件.
If the response is 201 (created), you may close the popup (display: none) and update the page to display the new object - either refresh the whole page, or fetch only the changed parts.
如果 create 操作无法创建对象，默认情况下响应代码为 422(无法处理的实体)，内容为模型错误对象，呈现为 JSON 或 XML.只需在表单中显示错误(让您的 JavaScript 设置某些预定义元素的 innerHTML).
If the create action cannot create the object, by default the response code is 422 (unprocessable entity) and the content is the model errors object, rendered as JSON or XML. Just display the errors in the form (let your JavaScript set the innerHTML of some predefined element).
这是完成任务的手动"方式.我对 JavaScript 库有一些反感(很难解释；-)，我更喜欢直接使用 DOM.你可能会发现很多 Rails 助手可以让你免于编写 JavaScript 代码.我想看看 :remote => 参数将是一个很好的起点.form_for 的 true
That was the 'manual' way of doing the task. I have some aversion (hardly explainable ;-) to JavaScript libraries, and I prefer to work directly with DOM. You may find a lot of Rails helpers which will save you from writing JavaScript code. I guess that looking at the :remote => true parameter of form_for will be a good starting point.
jQuery 文档 ( http://docs.jquery.com/Main_Page ) 也可能是一本好书.
Also the jQuery documentation ( http://docs.jquery.com/Main_Page ) may be a good thing to read.
结束这个漫长的故事，以下是评论中对您的问题的简短答案:
Ending this long story, here are the short answers to your questions from the comment:
如何从弹出窗口链接控制器操作?
How do i link controller actions from the popup?
:通过向正确的 URL 发送 HTTP 请求:GET/users/1/notes/new"、POST/user/1/notes"
: By sending a HTTP request to the proper URL: "GET /users/1/notes/new", "POST /user/1/notes"
如何关闭弹出窗口?
:如果弹出窗口是页面的一个元素，则设置 display: none，如果弹出窗口是单独的窗口，则调用 window.close().
: By setting display: none if the popup is an element of the page, or by calling window.close() if your popup is a separate window.
这篇关于如何创建弹出窗口以在 Rails 3 中创建新记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
