Twitter引导模态与铁轨上的红宝石

Question

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

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

这是我正在尝试做的事情:在用户索引视图中,我有一个帖子列表.每个帖子都有一个推荐按钮.如果用户点击它,他/她被发送到推荐索引页面,并且可以搜索并找到他/她想要与之共享帖子的用户.我之所以设置这种方式的原因是因为推荐模型创建了推荐关系.

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

第2部分:在模态/部分内显示搜索结果

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

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

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

Answer 1

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

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

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

这填补了模式的形式.下一步是从此表单执行远程请求.通过以下方式修改帖子/索引:

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

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

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

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