Bootstrap 4 Modalの中でshowアクションをどのようにレンダリングできますか？

Question

私はブートストラップ4モーダルにクリック可能な画像リンクの表示アクションを設定しています。私は現在画像をアップロードするためにCarrierwaveを使用しています。この時点で、画像をクリックすると、モーダルオーバーレイだけが表示されます。内部に内容を持つモーダルコンテナはまったく表示されません。

ユーザー/ Show.html.erb

<div class= "container"> 
<div class="username">@user.username</div> 
<div class="posts_container_pos"> 
     <hr style="border: 2px solid #515558;"> 
      <%= render 'posts/posts', post_items: @user.posts %> 
     </div> 
</div> 

投稿/ _Posts.html.erb

<div class"container-fluid"> 
    <%= @post_items.each do |post| %> 
    <%= link_to image_tag(post.photo.url(:medium), style: 'height: 300px; width: 500px;'), modal_post_path(post), data: {:toggle => 'modal', :target => '#reusable_modal'}, lazy: true %> 

    <div id="post-modal" class="modal fade"></div> 

     <!-- Modal --> 
     <div class="modal fade" id="reusable_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 

      </div> 
     </div> 
     </div> 
<% end %> 

<script type= "text/javascript"> 
    $(document).on('page:change', function() { 
     $(document).on('click', '#reusable_modal [data-dismiss="modal"]', 
      function (e) { 
      $(e.target).removeData('bs.modal'); 
      $('#reusable_modal').find('.modal-content').empty(); 
      }); 
     $(document).on('click', '[data-target="#reusable_modal"]', function (e) { 
     $("#reusable_modal").find(".modal-content").load($(this).attr("href")); 
     }); 
    }); 
</script> 
</div> 

投稿/ Modal.html.erb

<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
    <span aria-hidden="true">&times;</span> 
    </button> 
    <i><%= image_tag(@post.user.avatar_url(:thumb), class: 'round-image-50') %></i> 
    <h4 class="modal-title" id="myModalLabel" style="margin-left: 60px; margin-top: -42px;"><%= post.user.username %></h4> 
</div> 
<div class="modal-body"> 
    <% if @post.photo.present? %> 
    <%= image_tag(@post.photo.url(:large), style: 'max-width: 570px;') %> 
    <% end %> 
    <div class="modal_post_pos"> 
    <%= sanitize content_with_emoji(@post.body) %> 
    </div> 
</div> 
<div class="modal-footer"> 
    <%= render partial: 'comments/template', locals: {commentable: @post, new_comment: @comment} %> 
</div> 

Users_Controller.rb

def show 
     if params[:id].to_s.match(/^[0..9]+$/) && !User.friendly.exists?(params[:id]) 
      render 'public/404.html', status: 404 
     else 
      @user = User.friendly.find(params[:id]) 
      @post_items = @user.posts.paginate(page: params[:page]) 
     end 
    end 

Posts_Controller.rb

def modal 
    render layout: false 
end 

def show 
    @post = Post.find(params[:id]) 
    @new_comment = Comment.build_from(@post, current_user.id, "") 
    respond_to do |format| 
     format.html 
     format.js 
     format.json {render json: @post } 
    end 
    end 

routes.rbを

resources :posts, except: [:edit, :update] do 
    member do 
     get 'like', to: 'posts#like' 
     get 'dislike', to: 'posts#unlike' 
     get :modal 
    end 
    end 

サーバーログは、変数インスタンスを持っていけないので

Started GET "/posts/13/modal" for 127.0.0.1 at 2016-04-11 11:41:00 -0400 
    ActiveRecord::SchemaMigration Load (0.5ms) SELECT "schema_migrations".* FROM "schema_migrations" 
Processing by PostsController#modal as HTML 
    Parameters: {"id"=>"13"} 
    User Load (0.5ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."id" ASC LIMIT 1 [["id", 5]] 
    Rendered posts/modal.html.erb (47.5ms) 
Completed 500 Internal Server Error in 240ms (ActiveRecord: 1.5ms) 

NoMethodError - undefined method `user' for nil:NilClass: 
    app/views/posts/modal.html.erb:5:in `_app_views_posts_modal_html_erb__227267806_63456696' 

Answer 1

@postに定義された_posts部分とまだそれを呼び出すようにしよう_posts以内に、そのエラーをスローします。あなたは余分なjsスクリプトなしでブートストラップモーダルを使用する場合は、この問題を解決するために

アプローチはモーダル後_posts部分自体と<% end %>にループを_post部分コードをもたらすことです。それはそれを必要とせずにすべてをレンダリングするよう明らかにアプローチ上記

<% @post_items.each do |post| %> 

<%= link_to image_tag........................ 

<!-- Modal --> 
     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
      <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
        <span aria-hidden="true">&times;</span> 
       </button> 
       <h4 class="modal-title" id="myModalLabel">Post Show</h4> 
       </div> 
       <div class="modal-body"> 
      # complete partial code goes here 
       </div> 
      </div> 
      </div> 
     </div> 
<% end %> 

---

は、パフォーマンスのために良いではありません。

Ajaxを使用すると便利です（私の好み）jQueryを使用してください。このbuttonイベント（onClick）をリッスンし、ajaxgetメソッドを使用してオンザフライでモーダルをロードします。より良いパフォーマンスの理由からこのアプローチを検討することを検討してください。

---

私が話しています第二の溶液はよくここで説明されています。https://stackoverflow.com/a/22144587/2545197

Answer 2

たぶん、このようなものを？

あなたのJSで

var $modal = $('#ajax-modal'); 

$.fn.modalmanager.defaults.backdropLimit = 1; 

$('.modal-link').on('click', function(){ 
    var modal_url = $(this).data("modal-url"); 

    if(modal_url != null){ 
    // create the backdrop and wait for next modal to be triggered 
    $('body').modalmanager('loading'); 

    $modal.empty().load(modal_url, '', function(){ 
     $modal.modal(); 
     // Any callback functions such as let's say selectpicker 
     // $('#ajax-modal .selectpicker').selectpicker('refresh'); 
    }); 
    return false; 
    } 
}); 

とERB

で

<%= link_to 'Show', post_path(@post), class: 'modal-link', data: { modal_url: post_path(@post) } %> 

Answer 3

私は単に代わりに、通常のshowアクションのモーダルビューの表示用のファイルをレンダリングすることにより、この問題を解決しました。

def show 
    @post = Post.find(params[:id]) 
    @new_comment = Comment.build_from(@post, current_user.id, "") 
    respond_to do |format| 
     format.html {render :file => "posts/modal", layout: false} 
     format.js {render :file => "posts/modal", layout: false} 
     format.json {render json: @post } 
    end 
    end