我们有一个要求,即网页显示连接几个表的所有记录.
我们有一个“添加按钮” – 单击按钮后,我必须显示一个弹出窗口,用户将在其中输入必要的详细信息.弹出窗口将有两个按钮保存和取消. @H_502_3@单击“保存”按钮,应验证字段,如果所有验证都已通过,则将记录保存到数据库,否则在警告框中显示错误消息. @H_502_3@单击“取消”按钮将关闭弹出窗口. @H_502_3@如何在单击“添加”按钮时创建弹出窗口?
我们有一个“添加按钮” – 单击按钮后,我必须显示一个弹出窗口,用户将在其中输入必要的详细信息.弹出窗口将有两个按钮保存和取消. @H_502_3@单击“保存”按钮,应验证字段,如果所有验证都已通过,则将记录保存到数据库,否则在警告框中显示错误消息. @H_502_3@单击“取消”按钮将关闭弹出窗口. @H_502_3@如何在单击“添加”按钮时创建弹出窗口?
解决方法
您需要将服务器端(Rails,控制器,操作)和客户端(弹出窗口,JavaScript,发送请求)分开.
@H_502_3@您的客户端操作(JavaScript代码)应该将您的Rails应用程序视为某个服务器,它会为某些请求返回一些响应.从JavaScript的角度来看,服务器是运行Rails还是Smalltalk并不重要.
@H_502_3@弹出窗口的基本工作流程可能是:
@H_502_3@1)打开一个新窗口 – 这需要JavaScript的客户端活动.使用window.open功能,或者(我谦卑地认为这种方法更好)create a new< div>并使用CSS对其进行样式设置,因此它将覆盖(一个很好的效果是半透明的背景:背景:#ddf;不透明度:0.5;通过它仍然可以看到页面的内容).
@H_502_3@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; } }@H_502_3@3)在Rails应用程序中准备表单返回操作 – (服务器端)通常这可能是给定资源控制器的新操作,但是在没有布局的情况下呈现. @H_502_3@另一种方法是通过JavaScript构建表单(不单独获取),或者将其始终包含在页面中 – 默认情况下只是隐藏,因此JavaScript只需要设置其显示属性. @H_502_3@4)处理表单提交 – 您可能希望用户保持在同一页面上,因此您应该拦截表单提交.只需在创建的表单的“submit”事件中添加一个处理程序,构建一个请求,发布它,检查服务器响应. @H_502_3@Rails将通过您的:create action返回响应.你可能已经准备好了,因为./script/rails生成脚手架创建的代码通常都可以. @H_502_3@如果响应为201(已创建),则可以关闭弹出窗口(显示:无)并更新页面以显示新对象 – 刷新整个页面,或仅获取更改的部分. @H_502_3@如果create操作无法创建对象,则默认情况下响应代码为422(不可处理的实体),内容为模型错误对象,呈现为JSON或XML.只需在表单中显示错误(让您的JavaScript设置某些预定义元素的innerHTML). @H_502_3@这是完成任务的“手动”方式.我对JavaScript库有一些厌恶(难以解释;-),我更喜欢直接使用DOM.您可能会发现许多Rails助手可以帮助您避免编写JavaScript代码.我想看看:remote => form_for的true参数将是一个很好的起点. @H_502_3@此外,jQuery文档(http://docs.jquery.com/Main_Page)可能是一件好事. @H_502_3@结束这个长篇故事,以下是评论中您的问题的简短答案:
@H_502_3@How do i link controller actions from the popup?@H_502_3@:通过向正确的URL发送HTTP请求:“GET / users / 1 / notes / new”,“POST / user / 1 / notes”
@H_502_3@How do i close the popup?@H_502_3@:如果弹出窗口是页面的元素,则设置display:none;如果弹出窗口是单独的窗口,则调用window.close().