如何创建弹出窗口以在Rails 3中创建新记录 [英] How to create popup window to create new record in rails 3

问题描述

我们有一个要求，即网页必须显示来自联接几个表的所有记录. 我们有一个添加按钮"-单击按钮后，我必须显示一个弹出窗口，用户将在其中输入必要的详细信息.弹出窗口将有两个按钮保存"和取消".

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

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

点击添加按钮后如何创建弹出窗口?

解决方案

您需要将服务器端(导轨，控制器，操作)和客户端(弹出窗口，JavaScript，发送请求)的内容分开.

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

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

1)打开一个新窗口-这需要JavaScript的客户端活动.使用 window.open 函数，或(我谦虚地认为此方法是一种更好的方法)

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

另一种方法是通过JavaScript构建表单(不单独获取表单)，或者始终将其包括在页面中-默认情况下只是隐藏的，因此JavaScript只需设置其display属性. /p>

4)处理表单提交-您可能希望用户停留在同一页面上，因此您应该拦截表单提交.只需在创建的表单的"submit"事件中添加一个处理程序，构建一个请求，将其发布，然后检查服务器响应即可.

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

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

如果create操作无法创建对象，则默认情况下，响应代码为422(不可处理实体)，内容为模型错误对象，呈现为JSON或XML.只需以表格形式显示错误(让您的JavaScript设置某些预定义元素的innerHTML)即可.

---

那是完成任务的手动"方式.我对JavaScript库有些厌恶(难以解释；-)，我更喜欢直接使用DOM.您可能会发现许多Rails助手，它们将使您免于编写JavaScript代码.我想看看form_for的:remote => true参数将是一个很好的起点.

此外，jQuery文档( http://docs.jquery.com/Main_Page )可能也是一本好书.

长话短说，以下是您评论中问题的 short 答案:

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

:通过向适当的URL发送HTTP请求:"GET/users/1/notes/new"，"POST/user/1/notes"

我如何关闭弹出窗口?

:如果弹出窗口是页面的元素，则设置display: none；如果弹出窗口是单独的窗口，则调用window.close().

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?

解决方案

You need to separate the things that are server-side (Rails, controllers, actions) and client-side (popups, JavaScript, sending requests).

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) 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) 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) 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.

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) 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.

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.

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.

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).

---

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.

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?

: By sending a HTTP request to the proper URL: "GET /users/1/notes/new", "POST /user/1/notes"

How do i close the popup?

: 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屋！