Question

我正在使用可点击图像链接的show动作填充bootstrap 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脚本的情况下使用Bootstrap Modal，解决此问题的方法是将_post部分代码带到_posts部分自身和<% end %>循环莫代尔之后。

<% @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 ajax方法动态监听此get事件（onClick）并加载模式。考虑以更好的性能原因考虑这种方法。

我正在讨论的第二个解决方案在这里得到了很好的解释：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

我通过简单地为模态显示视图渲染文件而不是正常的显示操作来解决这个问题。

  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

如何在Bootstrap 4 Modal中渲染show动作？

3 个答案: