Bootstrap 4 Modal'ın içindeki gösteri eylemini nasıl oluşturabilirim?

Question

Tıklanabilir bir görüntü bağlantısı için bir önyükleme eylemi ile önyükleme 4 modalının doldurulması ile yaşıyorum. Şu anda görüntüleri yüklemek için Carrierwave kullanıyorum. Bu noktada, görüntüyü tıklattığımda, yalnızca model kaplaması görüntülenir. İçindeki içeriğe sahip olan kalıcı kapsayıcı, hiç gösterilmez.

Kullanıcı/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> 

Mesajlar/_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> 

Mesajlar/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 

.210

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 

Sunucu Günlüğü değişken herhangi bir örneğini yok yana

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 üzerinde tanımlı _posts kısmi ve hala ulaşmaya çalışıyorum _posts içinde, onun kusur hatası. Eğer fazladan js senaryo olmadan Bootstrap Modal kullanmak istiyorsanız

yaklaşım

bu sorunu çözmek için _posts kısmi kendisi ve modal sonra <% end %> döngü _post kısmi kod getirmektir. bunun için gerek kalmadan her şeyi verecek Açıkçası yaklaşımı yukarıda

<% @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 %> 

---

performans için iyi değil.

Ajax'u jQuery (tercihim) kullanarak kullanmak daha iyi bir yaklaşımdır. Bu button olayını (onClick) dinleyin ve ajaxget yöntemini kullanarak modal yükleyin. Daha iyi performans nedenleriyle bu yaklaşıma bakmayı düşünün.

---

i bahsediyorum ikinci çözüm de burada açıklanmıştır: Bunun gibi https://stackoverflow.com/a/22144587/2545197

Answer 2

Belki bir şey?

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; 
    } 
}); 

ve ERB

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

Answer 3

daki JS

Ben sadece normal yerine gösteri eylem modal gösterisi görünümü için dosyayı görüntüleme yaparak bu sorunu çözdü.

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