Twitter Bootstrap模态框与Ruby on Rails的结合

Question

Twitter Bootstrap模态框与Ruby on Rails的结合

ruby-on-railscontrollertwitter-bootstrapmodal-dialog

9

我遇到了一个问题，让我有些困惑，因为我不确定我想做的事情在RoR中是否可行。一些背景信息：我有一个应用程序，有几个控制器... 我想在这个模态示例中使用其中的2个控制器。第一个是users_controller，另一个是recommendations_controller。

这是我想做的事情：在用户索引视图中，我有一个帖子列表。每篇文章都有一个推荐按钮。如果用户点击它，他/她将被发送到推荐索引页面，并可以搜索并找到他/她想要与之共享帖子的用户。我这样设置的原因是因为Recommendation模型创建了推荐关系。

我希望当用户在用户索引页面上单击推荐按钮时，会出现一个模态窗口（访问推荐控制器的窗口），用户可以在其中搜索他/她想要与之共享帖子的用户。基本上，我想知道是否可能通过用户控制器的索引视图页面访问Recommendation控制器。

如果不行，有没有解决方法？如果有必要，我可以发布我拥有的代码，但我不确定在这种情况下是否有帮助-因为我试图看看我想做的事情是否可行。

谢谢！

更多细节：

recommendations_controller：

  def index
    @user = Search.find_users(params[:name], current_profile)

    respond_to do |format|
      format.html
      format.js
    end   
  end

index.js.haml（位于view/recommendations文件夹中）

  :plain
    $(#my-modal).show();

index.html.haml （位于视图/推荐文件夹中）

  = form_tag post_recommendations_url, :method => "get" do
    = text_field_tag :name, '', :class => "span12", :placeholder => "Please enter the name of the users you would like to share this post with."
    %center
      = submit_tag "Search", :class => "btn btn-primary"

index.html.haml（位于视图/帖子文件夹中）

  %a{:href => "#{post_recommendations_path(post)}", :remote => true}
    %i.icon-share.icon-large
    Recommend Post

#my-modal.modal.hide.fade
  .modal-header
    %a.close{"data-dismiss" => "modal"} ×
    %h6 This is a header
  .modal-body
  %p This is where I would like the contents of the index.html.haml file, located in the view/recommendations folder to appear.

第二部分：在模态框/局部中显示搜索结果

Matzi，目前，用户点击帖子旁边的链接以推荐帖子。此链接呈现了包含局部文件（_recommendation.html.haml）的模态框。

这个局部文件（现在在模态框内）包含搜索form_tag和用于呈现所有匹配搜索结果的代码。不幸的是，当我尝试通过输入名称并单击搜索按钮（现在位于模态框内）进行搜索时，它会将我带到以下网址，而不是在模态框内呈现结果。

http://localhost:3000/posts/2/recommendations?utf8=%E2%9C%93&name=Test&commit=Search

下面是我更新后的index.html.haml（位于view / posts文件夹中）的样子：

= link_to 'Recommend Post', post_recommendations_path(post), :remote => true, "data-toggle" => "modal"

#my-modal.modal.hide
.modal-header
  %a.close{"data-dismiss" => "modal"} ×
  %h6 
    %i.icon-share.icon-large
    Recommend Post
.modal-body
  #modal-rec-body
    %p *this is where _recommendation.html.haml is rendered*

更新了 index.js.haml

:plain
  $("#modal-rec-body").html("#{escape_javascript(render('recommendations/recommendation'))}");

  $('#my-modal').modal({
    keyboard: true,
    show: true
  });

_recommendation.html.haml

.span12
  = form_tag post_recommendations_path, :method => "get" do
    = text_field_tag :name, '', :class => "span12", :placeholder => "Please enter the name of the user you would like to share this post with.", :style => "max-width:520px;"
    %center
      = submit_tag "Search", :class => "btn btn-primary", :remote => "true"

- @user.each do |i|
  - unless current_profile == i
    .row-fluid
      .span6
        .row-fluid
          .well{:style => "margin-left:0px;"}
            .row-fluid
              .span2
                =image_tag i.avatar(:bio), :class=> "sidebar_avatar"
              .span6
                %dl{:style => "margin:0px"}
                  %dt
                    %i.icon-user
                    Name
                  %dd= i.name
                  %dt
                    %i.icon-map-marker
                    Location
                  %dd= i.location
              .span4
                - form_for :recommendation do |r|
                  = r.hidden_field :friend_id, :value => i.account.id 
                  = r.submit "Send Recommendation", :class => "btn btn-primary"

问题：不幸的是，当我在模态框内点击提交（搜索）按钮时，它会将浏览器重定向到post_recommendations_path(posts/post.id/recommendations)，而不是在模态框内呈现结果。我希望在模态框内显示搜索结果，而不需要重定向到推荐路径。

一如既往，非常感谢您的帮助！由于您的帮助，我对AJAX有了更好的理解。谢谢！

- slovak_100

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matzi · Accepted Answer

当然你可以这样做，但需要一些ajax魔法。

首先，你需要在推荐控制器中创建一个响应.js请求的操作。到目前为止，在你的更新中已经完成了这个步骤。但是，你的.js不太正确。问题在于你从post视图中呈现模态表单，但在post控制器中可能没有正确的字段。我建议使用以下.js.erb：

$("#modal-body").html(<%= escape_javascript render(:partial => 'recommendations/index')%>);
$("#my-modal").show();

这将在模态框中填充表单。下一步是从该表单执行远程请求。按照以下方式修改您的posts/index：

  = form_tag post_recommendations_url, :remote => true, :method => "get" do
    = text_field_tag :name, '', :class => "span12", :placeholder => "Please enter the name of the users you would like to share this post with."
    %center
      = submit_tag "Search", :class => "btn btn-primary"

区别在于:remote => true标签，它会向您的控制器发送ajax请求，因此您必须准备好.js和.html响应（如果客户端没有JS）。.js应该隐藏模态表单，并可以刷新原始页面；html可能会将您重定向回帖子。 第二部分： 问题在于:remote部分。它需要成为表单定义的一部分，而不是提交按钮的一部分。这是我的错误。

我现在找到了this guide，它看起来相当不错。

希望它有所帮助！如果有不清楚的地方，请问我。