【问题标题】:twitter bootstrap modal with ruby on rails带有 ruby​​ on rails 的 twitter 引导模式
【发布时间】:2012-04-24 14:30:20
【问题描述】:

我遇到了一些问题和头疼的问题,因为我不确定我想要做的事情是否可以使用 RoR。

一些背景信息:我有一个带有多个控制器的应用程序......并且希望在这个模态示例中使用其中的 2 个。第一个是 users_controller,另一个是 Recommendation_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 部分:在 modal/partial 中显示搜索结果

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

【问题讨论】:

    标签: ruby-on-rails controller twitter-bootstrap modal-dialog


    【解决方案1】:

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

    首先,您需要在推荐控制器中创建一个响应 .js 请求的操作。到目前为止,它已在您的更新中完成。但是,您的 .js 不太正确。问题是您从帖子视图呈现模态表单,但可能在帖子控制器中您没有正确的字段。我推荐以下 .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 =&gt; true标签,这会向你的控制器发送一个ajax请求,所以你必须准备.js和.html响应(以防客户端没有JS)。 .js 应该隐藏模态表单,并且可能会刷新原始页面,html 可能会将您重定向回帖子。

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

    我现在找到了this guide,看起来还不错。

    希望对你有帮助!有什么不清楚的地方问一下。

    【讨论】:

    • 您好,感谢您的回复...不幸的是,我对您的解决方案有些困惑。我已经更新了我的问题,以帮助澄清我在问什么。据我所知,我已经尝试按照您的方法进行操作,但显然我搞砸了。感谢您的帮助。再次感谢您!
    • 好的,请参阅更新的解决方案。我希望这比第一个更好。 :)
    • 感谢 matzi,不幸的是 js 没有执行。它只是重定向到 ../recommendations/id/ url,而无需通过 js。 .js.erb 文件应该位于推荐文件夹还是帖子文件夹中?我认为它与推荐链接有关......我认为它只是将它发送到预定路径而不调用 js,即使它有一个 :remote => true 条件。非常感谢您的帮助,再次感谢您!
    • %a{:href =&gt; "#{post_recommendations_path(post)}", :remote =&gt; true} 不行,应该用link_to 'Recommend post', post_recommendations_path(post), :remote =&gt; true remote标签不是html标签的参数,是link_to的标签,用来创建ajax链接。
    • Matzi,非常感谢...link_to 确实启动了 ajax。但是,它不想显示模态。我将index.js.haml 限制为具有以下内容:$(#my-modal).show(); 并且模态未显示。当我用基本的`alert('ajax works!');` 替换代码时,警报工作了——所以 ajax 工作了,但由于某种原因,它不想加载我的模式。我的模态应该在 index.html.haml (located in the view/posts folder) 中吗? Matzi,再次感谢您的所有帮助……您是传奇!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-10-17
    • 1970-01-01
    相关资源
    最近更新 更多