9

私がやりたいことがRoRで可能かどうかわからないので、ちょっとした問題とヘッドスクラッチャーに遭遇しました。

少しの背景情報: 私はいくつかのコントローラーを備えたアプリを持っています...そして、このモーダルの例ではそのうちの 2 つを使用したいと考えています。1 つ目は users_controller で、もう 1 つが recommends_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 についてよりよく理解することができました。ありがとうございました！

4

1 に答える 1

9

もちろんこれを行うこともできますが、それには 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 => trueタグです。これは ajax リクエストをコントローラーに送信するため、.js および .html レスポンスを準備する必要があります (クライアントに JS がない場合)。.js はモーダル フォームを非表示にする必要があり、元のページが更新される可能性があり、html が投稿にリダイレクトされる可能性があります。

パート 2: 問題は :remote 部分です。送信ボタンではなく、フォームの定義の一部である必要があります。私の間違い。

私は今このガイドを見つけました、それはかなり良さそうです。

それが役立つことを願っています！不明な点がある場合は質問してください。

于 2012-04-24T14:47:00.993 に答える