Jquery 模态窗口和编辑对象

Question

我正在尝试创建一些模式窗口，以便在用户想要编辑对象时出现。我以前没有这样做过，而且我一直在寻找教程，但是我没有得到一些直接的答案，而是更加困惑！似乎可以使用的库太多了。

所以我想这个问题分为两部分。如果我想这样做，是否有任何特殊原因让我想选择 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

谁能帮我解决这个问题？当然也非常欢迎建议和链接！

Answer 1

更新：这是使用 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 %>

---

对于你的模态，有很多关于如何做的意见。就我个人而言，我更喜欢根据应用程序的需要滚动我自己的模态窗口。只需要几行带有 jQ​​uery 的 JS 就可以构建与 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 样式）：

#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 中，有 2 个部分。首先，您需要让浏览器发送 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 将挂钩到来自 Rails.js 的 ajax:success 回调，并使用从我们的应用程序返回的模板 HTML 显示模态。

---

给猫剥皮的方法不止一种，构建这个功能的方法也有十几种。这绝对是 Rails 团队尚未制定更强有力的约定的领域。这只是我的处理方式，我觉得它相当干燥，需要最少的努力，并且相当灵活且面向未来。也许有人可以在此基础上构建的领域之一是使用覆盖更多基础且功能更丰富的模态/灯箱框架。如果有人这样做，我很乐意看到一篇文章！

Answer 2

关于为什么 jquery 超过原型的原因，这里有一些想法。

1. jquery 现在是 rails 3+ 的默认 Js 库，它取代了原型/脚本库
2. jquery 被设计为不显眼，这意味着它不会将您的 JS 代码内联；您在 HTML 文件中使用正确的标记，并为您的 HTML 代码提供正确的 ID、类和标签，以便您可以在单独的 JS 文件中使用您的 jquery 代码“挂钩”它（我不确定原型是否真的不显眼与否；我已经使用 jquery 几年了，从那以后就没有接触过原型）
3. jquery 学习和使用非常简单。这有点主观，但我发现 jquery 的语法非常简单。任何你想做的事情都可以在 jquery 中完成。
4. Jquery 也有一个非常广泛的插件库，有大量的贡献者。比自己编写所有问题更容易找到常见问题的解决方案。
5. Jquery 还具有 Jquery UI，它提供了一个图形元素工具箱，可用于您的界面和前端（顺便提一下，它们有一个模态小部件，您可以将其用于您的原始问题）。

关于 jquery 的一些想法。我强烈建议调查一下。 jquery 站点 (jquery.com) 有一些优秀的基础教程可以帮助您进入其中。科里沃德在解释解决方案方面做得非常出色。我做了类似的事情，但我自己收集了一些技巧。