twitter bootstrap modal with ruby​​ on rails [英] twitter bootstrap modal with ruby on rails

问题描述

我遇到了一个问题和一个头部刮板，因为我不知道我想做的是否是可能的RoR。

I have run into a bit of a problem and a head scratcher, as I'm not sure whether what I want to do is even possible with RoR.

有点背景信息：我有一个应用程序与几个控制器...，并想要使用其中2个为这个模态的例子。第一个是users_controller，另一个是recommendations_controller。

A bit of background info: I have an app with several controllers... and would like to work with 2 of them for this modal example. The first is a users_controller and the other is a recommendations_controller.

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

Here is what I'm trying to do: In the user index view I have a lists of posts. Each post has a recommend button. If a user clicks it he/she is sent to the recommendation index page, and can search and find a user he/she would like to share the post with. The reason I have it set up this way is because the Recommendation model creates the recommend relationship.

我想这样，当用户点击用户索引页上的推荐按钮时，会出现一个模态（访问推荐控制器的模式），用户可以搜索对于他/她想要与其分享帖子的用户。基本上，我想知道是否可以通过用户控制器的索引视图页面访问推荐控制器。

I would like like it so when the user clicks the recommend button on the User index page, a modal appears (one that accesses the recommendation controller) and the user can search for the user he/she would like to share the post with. Basically, I want to know whether it's possible to access the Recommendation controller via the User controller's index view page.

如果不是，是否有工作？我可以发布我有的代码，如果它的有用的，但我不知道这将有助于在这种情况下 - 因为我试图看看是否甚至可能做我想做的。

If it's not, is there a work around? I can post the code I have if it's helpful, but I'm not sure that would help in this case--as I'm trying to see whether it's even possible to do what I'm trying to do.

谢谢！

详情：

recommendations_controller：

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文件夹中）

index.js.haml (located in the view/recommendations folder)

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

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

index.html.haml (located in the view/recommendations folder)

  = 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（位于视图/ posts文件夹中）

index.html.haml (located in the view/posts folder)

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

第2部分：在模态/部分内显示搜索结果 h2>

Matzi，目前，用户点击他们要推荐的帖子附近的链接。此链接会在其中显示一个部分（_recommendation.html.haml）。

Part 2: Displaying the search results inside the modal/partial

Matzi, at the moment, a user clicks a link near the post they want to recommend. This link renders the modal with a partial (_recommendation.html.haml) inside of it.

此部分（现在在模态中）包含搜索 form_tag 以及用于呈现与搜索结果匹配的所有用户的代码。不幸的是，当我尝试通过输入一个名称并点击搜索按钮（再次，现在位于模态），它需要我到以下网址，而不是在模态中呈现结果。

This partial (now inside the modal) contains the search form_tag and the code to render all the users that match the search results. Unfortunately, when I try to run a search by entering a name and clicking the search button (again, now located inside of the modal) it takes me to the following url instead of rendering the results inside the modal.

http：// localhost：3000 / posts / 2 / recommendations？utf8 =％E2％9C％93& name = Test& commit = Search

这里是我更新的 index.html.haml（位于视图/ 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）。我想在模态中显示搜索结果，而无需重定向到帖子推荐路径。

Problem: Unfortunately it seems that when I click the submit (search) button inside the modal instead of rendering the results inside the modal it re-directs the browser to the post_recommendations_path (posts/post.id/recommendations). I would like to display the search results inside the modal without having it redirect to the post recommendations path.

一如既往，非常感谢你！我非常感谢你的帮助 - 我已经得到了更好的掌握AJAX感谢你。谢谢！

As always, thank you so much! I'm extremely grateful for your help--and I've gotten a much better grasp for AJAX thanks to you. Thank you!

推荐答案

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

Of course you can do this, but it needs some ajax magic.

首先，您需要在推荐控制器中创建一个响应.js请求的操作。它在你的更新到目前为止。但是，你的.js不是很对。问题是，你从post视图渲染模态形式，但可行的是在post controller你没有正确的字段。我推荐以下.js.erb：

First of all, you need to create an action, responding to .js requests, in the recommendation controller. It is done so far in your update. But, your .js is not quite right. The problem is that you render the modal form from the post view, but propably in post controller you dont have the right fields. I recommend the following .js.erb:

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

这将用表单填充模态。下一步是从此表单执行远程请求。按以下方式修改您的帖子/索引：

This fills the modal with the form. The next step is to do a remote request from this form. Modify your posts/index the following way:

  = 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可能会将您重定向回帖子。

The difference is the :remote => true tag, this sends an ajax request to your controller, so you must prepare for .js and .html response (in case of no JS on client). The .js should hide the modal form, and may refresh the original page, the html may redirect you back to the post.

第2部分：
问题是：远程部分。它需要是表单定义的一部分，而不是提交按钮的一部分。我的错误。

Part 2: The problem is the :remote part. It needs to be part of the form's definition, not the submit button's. My mistake.

我发现本指南现在，看起来不错。

I found this guide now, it seems quite good.

我希望它有所帮助！询问是否有不清楚的情况。

I hope it helps! Ask if something is not clear.

这篇关于twitter bootstrap modal with ruby​​ on rails的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！