如何在Rails 4中打开页面作为模态窗口?

时间:2015-02-18 16:51:42

标签: ruby-on-rails-4

我有一个编辑操作,我想在我的应用程序上放置一个模态窗口,当它关闭时,我需要刷新我的视图的一部分。

有人知道我怎么能用Rails 4做到这一点?

3 个答案:

答案 0 :(得分:0)

Twitter BootstrapZURB Foundation都有模态组件。您需要使用JavaScript来更新DOM。

Codecademy是一个免费的在线学习网站,有很好的教程可以学习JavaScript和jQuery。我还建议Code School因为他们有关于JavaScript,jQuery和Angular.js的免费课程。

答案 1 :(得分:0)

让我们假设你想在一个模态中打开用户编辑页面。这是我更喜欢的解决方案:

# Create a ajax link somewhere that opens the user modal:

<%= link_to user.name, edit_user_path(user), remote: true %>

# This link calls your controller action:

class UsersController < ApplicationController
  def edit
    @user = User.find(params[:id])
    render_js_modal(:any_id, 'edit')
  end
end

class ApplicationController
  def render_js_modal(id, partial, options)
    @id = id
    @partial = partial
    @options = options

    respond_to do |format|
      format.js { render 'application/render_modal' }
    end
  end
end

# The view depends on which CSS library you are using.  This
# example is if you use semantic ui.  If you use something like
# bootstrap you will probably need to create a bit more html in the JS.

# views/application/render_modal.js.erb:

$(body).append('<div id="<%= @id %>"></div>');
var element = $('#<%= @id %>');
element.html('<%= j(render partial: @partial, @options) %>');
element.modal('show');

希望这会有所帮助。如果您遇到任何错误,请记得查看rails服务器日志以获取详细信息。有关JS详细信息,请查看浏览器控制台。请注意,您可以将locals传递给options param中的partial。您可以创建许多其他有用的方法:

render_js_modal_hide :按ID隐藏屏幕上的模式。成功创建用户时很有用。考虑使用JS响应替换页面flash消息。

render_js_content_replace :使用提供的部分内容替换页面上的div。如果存在验证错误,这对于替换模态的内容很有用。

答案 2 :(得分:0)

我已经这样做了(使用Slim):

.text-center = link_to 'Visualizar Documentos', 'Visualizar Documentos', class: 'btn btn-default btn-primary btn-large', "data-toggle" => "modal",  "data-target" => "#meioambiente"

.modal.fade id="meioambiente" tabindex="-1" role="dialog" aria-labelledby="meioambiente-label" aria-hidden="true"

一切都很完美。谢谢!