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 %>

对于你的模态,有很多关于如何做的意见.我个人更喜欢根据应用程序的需要推出自己的模态窗口.只有几行jQuery-laced 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中,有两个部分.首先,您需要让浏览器发送内容的AJAX请求并在返回时显示模式.其次,您需要Rails以适当的响应进行响应.

发送AJAX并处理响应需要使用:remote => true您希望远程发送的链接/表单.

<%= link_to 'New Post', new_post_path, :remote => true %>

这将在Rails.js将获取的链接上创建一个数据属性,允许它自动远程提交.它期望javascript返回,它会在获得它时执行该响应.您可以format.js为每个操作respond_to块添加一个快速,并创建一个附带的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的模态.

皮肤猫的方法不止一种,还有十多种方法可以构建这种功能.这绝对是Rails团队尚未确定更强大的约定的领域.这仅仅是我处理这个问题的方式,我觉得它很干,需要很少的努力,并且相当灵活且面向未来.也许有人可能在此基础上构建的领域之一是使用模式/灯箱框架,其涵盖更多基础并且功能更丰富.如果有人这样做,我很乐意看到写作!