jQuery模态窗口和编辑对象 [英] Jquery modal windows and edit object
问题描述
我正在尝试创建一些模态窗口，以在用户想要编辑对象时显示.我以前没有做过此事，我一直在寻找教程，但是除了得到一些直接的答案外，我得到的只是更多的困惑！人们似乎可以使用许多库.
I am trying to create some modal windows to appear whenever the user wants to edit the object. I haven't done this before, and I've looked for tutorials, but instead of getting some straight forward answers, all I got is more confused! There seem to be sooo many libraries one can use.
所以我想这个问题分为两个部分.如果我想这样做，为什么我会选择Jquery而不是原型，是否有任何特定的原因?还有更多选择吗?
So I guess this question is in two parts. If I wanted to do this, are there any particular reasons why I would want to choose Jquery over prototype? Are there more options?
第二部分实际上正在执行此操作，这时我真的不在乎使用哪个库.
Second part is actually doing it, at this point i don't really care using which library.
我有以下标准操作，编辑和更新操作.现在，我想要的是用户单击编辑，而不是转到页面，而是弹出一个窗口，他可以在其中编辑票证的名称(这是目前唯一的属性).
I have the following, standard crud, edit and update actions. Now, what I would like is when the user clicks edit, instead of going to the page, pop up a window where he can edit the name of the ticket (this is the only attribute for now).
在控制器中，我有这个:
in the controller I have this:
def edit
@ticket = Ticket.find(params[:id])
end
def update
@ticket = Ticket.find(params[:id])
if @ticket.update_attributes(params[:ticket])
redirect_to tickets_url, :notice => "Successfully updated ticket."
else
render :action => 'edit'
end
end
有人可以帮我吗?当然，我们也非常欢迎您提供建议和链接！
Can anyone please help me with this? Also of course advice and links are more than welcome!
推荐答案
更新:这是使用CoffeeScript对该答案的Rails 5改编: https://gist.github.com/1456815
jQuery之所以受欢迎，是出于我不愿讨论的充分理由.在其他地方有很多.
UPDATE: Here is a Rails 5 Adaptation of this answer using CoffeeScript: https://gist.github.com/1456815
jQuery is more popular for good reasons that I won't go into. Plenty on that elsewhere.
假设您要使用jQuery，设置非常简单:
Assuming you want to use jQuery, the setup is pretty straightforward:
# add the following to your Gemfile under `group :development`
gem 'jquery-rails'
# run the following
$ bundle
# then let the generator install
$ rails g jquery:install
然后更新您的Application.rb javascript扩展默认值:
And then update your Application.rb javascript expansion defaults:
# JavaScript files you want as :defaults (application.js is always included).
config.action_view.javascript_expansions[:defaults] = %w( jquery rails )
并确保您的布局文件(例如application.html.erb)包括这些文件:
And make sure your layout file (e.g. application.html.erb) is including those files:
<%= javascript_include_tag :defaults %>
对于您的模态，关于如何执行它有很多意见.我个人更喜欢根据应用程序的需求滚动自己的模态窗口.只需几行jQuery约束的JS即可构建可与Rails.js完美配合的模式:
For your modal, there are a lot of opinions on how to do it. Personally I prefer to roll my own modal windows based on the needs of the application. It's only a few lines of jQuery-laced JS to build modals that work really well with Rails.js:
# in a view, perhaps a _modal.html.erb partial that is included into
# your layout (probably at the bottom).
<div id="modal-container"></div>
<div id="modal">
<a href="#" class="close">close</a>
</div>
以下是我使用的模态的一些样式(scss样式):
Here are some styles (scss style) for the modal that I use:
#modal-container {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.4);
}
#modal {
display: none;
position: absolute;
width: 600px;
left: 50%;
margin-left: (-600px - 40px) / 2;
padding: 20px;
background: #fff;
border: 5px solid #eee;
& > .close {
position: absolute;
right: 5px;
top: 5px;
color: #666;
&:hover, &:active {
color: #000;
}
}
}
这将使样式/视图不受影响.您可能想要自定义这些样式以更好地适合您的应用程序，但是它们非常通用，因此应该可以开始使用.
That gets the styles/views out of the way. You might want to customize those styles to fit your application better, but they're pretty generic so they should work to start.
要使其集成到Rails中，有2个部分.首先，您需要使浏览器发送AJAX内容请求并在返回时显示模式.其次，您需要Rails做出适当的响应.
To get it integrated into Rails, there are 2 parts. First, you need to get the browser to send AJAX requests for content and show the modal on return. Second, you need Rails to respond with an appropriate response.
要发送AJAX并处理响应，需要在要远程发送的链接/表单上使用:remote => true.
Sending AJAX and handling the responses entails using :remote => true on the links/forms you want to be sent remotely.
<%= link_to 'New Post', new_post_path, :remote => true %>
这将在Rails.js将选择的链接上创建一个data属性，从而允许它自动进行远程提交.它需要一个javascript返回，并在得到响应时执行该响应.您可以向每个动作respond_to块添加快速format.js，并创建一个随附的new.js.erb文件，其中包含实际填写和显示模式所需的JS.没关系，但是我们可以通过返回不带布局的模板并将模式显示/隐藏职责移至application.js中来将其干燥得多:
That'll create a data attribute on the link that Rails.js will pickup, allowing it to be submitted remotely automatically. It expects a javascript return, and it'll execute that response when it gets it. You can add a quick format.js to each actions respond_to block, and create an accompanying new.js.erb file that contains the JS needed to actually fill in and show the modal. That's okay, but we can DRY it up a bit more than that by returning the template without a layout and moving the modal showing/hiding responsibilities into application.js:
# in your app controller, you'll want to set the layout to nil for XHR (ajax) requests
class ApplicationController < ActionController::Base
layout Proc.new { |controller| controller.request.xhr? ? nil : 'application' }
end
使整个事情正常运行的javascript:
The javascript to make the whole thing work:
# in application.js
$(function(){
var $modal = $('#modal'),
$modal_close = $modal.find('.close'),
$modal_container = $('#modal-container');
# This bit can be confusing. Since Rails.js sends an accept header asking for
# javascript, but we want it to return HTML, we need to override this instead.
$('a[data-remote]').live('ajax:beforeSend', function(e, xhr, settings){
xhr.setRequestHeader('accept', '*/*;q=0.5, text/html, ' + settings.accepts.html);
});
# Handle modal links with the data-remote attribute
$('a[data-remote]').live('ajax:success', function(xhr, data, status){
$modal
.html(data)
.prepend($modal_close)
.css('top', $(window).scrollTop() + 40)
.show();
$modal_container.show();
});
# Hide close button click
$('.close', '#modal').live('click', function(){
$modal_container.hide();
$modal.hide();
return false;
});
});
我有一些逻辑可以将模式窗口定位到浏览器当前滚动位置40px处.
I've got some logic in there to position the modal window 40px from the current scroll position of the browser.
所有这些部分都准备就绪，当您单击设置了远程属性的链接/表单时，Rails.js将处理提交请求，您的应用程序将知道只返回动作模板，而无需布局，完美地在模态窗口中显示它，然后我们上面的javascript将钩入Rails.js的ajax:success回调，并显示模态以及从我们的应用程序返回的模板HTML.
With all of these pieces in place, when you click on a link/form with a remote attribute set, Rails.js will handle submitting the request, your application will know to return just the template for the action without the layout, perfect for displaying it in a modal window, and then our javascript above will hook into the ajax:success callback from Rails.js and display the modal with the template HTML returned from our application.
有多种方法可以为猫皮化，并且有十多种方法可以构建此功能.这绝对是Rails团队尚未设定的更强约定的领域.我觉得这只是我的处理方式，相当干燥，需要最少的精力，并且相当灵活且可以面向未来.某人可能会以此为基础的领域之一是使用涵盖更多基础且功能更丰富的模式/灯箱框架.如果有人这样做，我很乐意看到一篇文章！
There's more than one way to skin a cat, and more than a dozen ways of building this functionality. This is definitely an area that stronger conventions have yet to be set by the Rails team. This is merely my way of handling this that I feel is fairly DRY, requires minimal effort, and is fairly flexible and future-proof. Perhaps one of the areas that someone could probably build on this is to use a modal/lightbox framework that covers more bases and is more feature-rich. And if someone does that, I'd love to see a write up!
这篇关于jQuery模态窗口和编辑对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
