twitter引导模式与铁轨上的ruby
我遇到了一个问题和一个头疼的问题,因为我不确定我想要做什么甚至可以用RoR。
一些背景信息:我有一个带有几个控制器的应用程序……并且想要使用其中两个用于此模态示例。 第一个是users_controller,另一个是recommendations_controller。
这是我正在尝试做的事情:在用户索引视图中,我有一个post列表。 每个post都有一个推荐按钮。 如果用户点击它,他/她被发送到推荐索引页面,并且可以搜索并找到他/她想要与之共享post的用户。 我之所以设置这种方式的原因是因为推荐模型创建了推荐关系。
我想这样,当用户点击用户索引页面上的推荐按钮时,会出现一个模式(访问推荐控制器的模式),用户可以搜索他/她想与之共享post的用户。 基本上,我想知道是否可以通过用户控制器的索引视图页面访问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,此刻,用户点击他们想要推荐的post附近的链接。 此链接在模式内部呈现部分(_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)
到post_recommendations_path (posts/post.id/recommendations)
。 我想在模态中显示搜索结果,而不将其重定向到post推荐路径。
一如既往,非常感谢你! 我非常感谢你的帮助 – 感谢你,我对AJAX有了更好的把握。 谢谢!
当然你可以做到这一点,但它需要一些ajax魔法。
首先,您需要在推荐控制器中创建响应.js请求的操作。 到目前为止,您的更新已完成。 但是,你的.js不太对劲。 问题是你从后视图渲染模态窗体,但可能在post控制器中你没有正确的字段。 我推荐以下.js.erb:
$("#modal-body").html(<%= escape_javascript render(:partial => 'recommendations/index')%>); $("#my-modal").show();
这填补了模式的forms。 下一步是从此表单执行远程请求。 通过以下方式修改post/索引:
= 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可能会将您重定向回post。
第2部分:问题是:远程部分。 它需要是表单定义的一部分,而不是提交按钮的一部分。 我的错。
我现在找到了这个指南 ,看起来相当不错。
我希望它有所帮助! 询问是否有不清楚的事情。