Jquery模态窗口和编辑对象
我试图创建一些模态窗口，以便在用户想要编辑对象时显示。 我之前没有这样做过，而且我已经找过教程了，但是我得到的内容却更加困惑，而不是得到一些直接的答案！ 似乎有太多可以使用的库。
所以我想这个问题分为两部分。 如果我想这样做，有什么特别的理由可以让我选择Jquery而不是原型吗？ 还有更多选择吗？
第二部分实际上是这样做的，此时我并不在乎使用哪个库。
我有以下标准crud，编辑和更新操作。 现在，我想要的是当用户点击编辑而不是转到页面时，弹出一个窗口，他可以在其中编辑故障单的名称（这是目前唯一的属性）。
在控制器中我有这个：
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 有人可以帮我这个吗？ 当然，建议和链接也非常受欢迎！
更新：这是使用CoffeeScript的这个答案的Rails 5改编： https ： //gist.github.com/1456815
jQuery更受欢迎，原因很多，我不会介绍。 在其他地方充足。
假设您想使用jQuery，设置非常简单：
# 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扩展默认值：
# JavaScript files you want as :defaults (application.js is always included). config.action_view.javascript_expansions[:defaults] = %w( jquery rails )
并确保您的布局文件（例如application.html.erb）包含这些文件：
<%= javascript_include_tag :defaults %>
对于你的模态，有很多关于如何做的意见。 我个人更喜欢根据应用程序的需要推出自己的模态窗口。 只有几行jQuery-laced JS来构建与Rails.js一起工作的模态：
# in a view, perhaps a _modal.html.erb partial that is included into # your layout (probably at the bottom).
以下是我使用的模态的一些样式（scss样式）：
#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; } } }
这样可以避免使用样式/视图。 您可能希望自定义这些样式以更好地适应您的应用程序，但它们非常通用，因此它们应该起作用。
要将它集成到Rails中，有两个部分。 首先，您需要让浏览器发送内容的AJAX请求并在返回时显示模式。 其次，您需要Rails以适当的响应进行响应。
发送AJAX并处理响应需要在您希望远程发送的链接/表单上使用:remote => true 。
<%= link_to 'New Post', new_post_path, :remote => true %>
这将在Rails.js将获取的链接上创建一个数据属性，允许它自动远程提交。 它期望javascript返回，它会在获得它时执行该响应。 您可以向每个动作的respond_to块添加一个快速的format.js ，并创建一个附带的new.js.erb文件，其中包含实际填写并显示模态所需的JS。 这没关系，但是我们可以通过返回没有布局的模板并将模式显示/隐藏职责移动到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：
# 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从浏览器的当前滚动位置。
有了所有这些部分，当您点击具有远程属性集的链接/表单时，Rails.js将处理提交请求，您的应用程序将知道只返回没有布局的操作模板，非常适合显示它在一个模态窗口中，然后我们的javascript将挂钩到ajax：来自Rails.js的成功回调，并使用从我们的应用程序返回的模板HTML显示模态。
皮肤猫的方法不止一种，还有十几种方法可以构建这种function。 这绝对是Rails团队尚未确定更强大的约定的领域。 这仅仅是我处理这个问题的方式，我觉得它很干，需要很少的努力，并且相当灵活且面向未来。 也许有人可能在此基础上建立的领域之一是使用模式/灯箱框架，其涵盖更多基础并且function更丰富。 如果有人这样做，我很乐意看到写作！
由于为什么jquery超过原型，这里有一些想法。
- jquery现在是rails 3+的默认Js库，它取代了原型/ scriptaculous库
- jquery被设计成不引人注目的，这意味着它不会使你的JS代码内联; 您在HTML文件中使用正确的标记，并为HTML代码提供正确的ID，类和标记，以便您可以使用单独的JS文件中的jquery代码“挂钩”它（我不确定原型是否真的不引人注目是不是;我已经使用jquery几年了，因为没有触及原型）
- jquery非常易于学习和使用。 这有点主观，但我发现jquery的语法非常简单。 你想做的任何事你都可以在jquery中。
- Jquery还有一个非常广泛的插件库，有大量的贡献者。 找到解决常见问题的方法比单独编写解决方案要容易得多。
- Jquery还有Jquery UI，它提供了一个用于界面和前端的图形元素工具箱（它们偶然有一个模态小部件，可以用于原始问题）。
关于jquery的一些想法。 我强烈建议调查一下。 jquery站点（jquery.com）有一些很好的基础教程可以帮助您进入它。 coreyward在解释解决方案方面表现出色。 我做了类似的事情，但自己拿了一些提示。