twitter引导模式与铁轨上的红宝石

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.

我遇到了一个问题和一个头疼的问题,因为我不确定我想要做什么甚至可以用RoR。

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.

一些背景信息:我有一个带有几个控制器的应用程序......并且想要使用其中两个用于此模态示例。第一个是users_controller,另一个是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.

我想这样,当用户点击用户索引页面上的推荐按钮时,会出现一个模式(访问推荐控制器的模式),用户可以搜索他/她想与之共享帖子的用户。基本上,我想知道是否可以通过用户控制器的索引视图页面访问Recommendation控制器。

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.

如果不是,是否有解决方法?我可以发布我有的代码,如果它有用,但我不确定在这种情况下会有所帮助 - 因为我正在试图看看是否有可能做我正在尝试做的事情。

Thank you!

More Details:

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 (located in the view/recommendations folder)

index.js.haml(位于view / recommendations文件夹中)

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

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

index.html.haml(位于view / recommendations文件夹中)

  = 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 (located in the view/posts folder)

index.html.haml(位于view / posts文件夹中)

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

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.

Matzi,此刻,用户点击他们想要推荐的帖子附近的链接。此链接在模式内部呈现部分(_recommendation.html.haml)。

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.

此部分(现在位于模态内)包含搜索form_tag和用于呈现与搜索结果匹配的所有用户的代码。不幸的是,当我尝试通过输入名称并单击搜索按钮(再次,现在位于模态内部)来运行搜索时,它会将我带到以下URL而不是在模态内呈现结果。

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

here is what my updated index.html.haml (located in the view/posts folder) looks like:

这是我更新的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*

updated 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"          

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.

问题:不幸的是,当我单击模态内的提交(搜索)按钮而不是在模态内呈现结果时,它会将浏览器重定向到post_recommendations_path(posts / post.id / recommendations)。我想在模态中显示搜索结果,而不将其重定向到帖子推荐路径。

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有了更好的把握。谢谢!

1 个解决方案

#1

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

当然你可以做到这一点,但它需要一些ajax魔法。

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:

首先,您需要在推荐控制器中创建响应.js请求的操作。到目前为止,您的更新已完成。但是,你的.js不太对劲。问题是你从后视图渲染模态窗体,但可能在post控制器中你没有正确的字段。我推荐以下.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"

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.

区别在于:remote => true标签,这会向您的控制器发送一个ajax请求,因此您必须准备.js和.html响应(如果客户端没有JS)。 .js应隐藏模态表单,并可刷新原始页面,html可能会将您重定向回帖子。

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.

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

I found this guide now, it seems quite good.

我现在找到了这个指南,看起来相当不错。

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

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