Javascript 如何在Bootstrap 4模式中呈现show操作?

Javascript 如何在Bootstrap 4模式中呈现show操作?,javascript,jquery,ruby-on-rails,twitter-bootstrap,ruby-on-rails-4,Javascript,Jquery,Ruby On Rails,Twitter Bootstrap,Ruby On Rails 4,我正在用一个可点击图像链接的显示动作填充引导4模式。我目前正在使用Carrierwave上传图像。此时,当我单击图像时,仅显示模式覆盖。包含内容的模态容器根本不显示 User/Show.html.erb <div class= "container"> <div class="username">@user.username</div> <div class="posts_container_pos"> <hr style="

我正在用一个可点击图像链接的显示动作填充引导4模式。我目前正在使用Carrierwave上传图像。此时,当我单击图像时,仅显示模式覆盖。包含内容的模态容器根本不显示

User/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\u 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'

由于您没有在
\u posts
部分中定义任何实例变量
@post
,并且仍试图在
\u posts
中调用它,因此抛出错误

如果要在不使用额外的
js
脚本的情况下使用引导模式,解决此问题的方法是将
\u post
部分代码带到
\u posts
部分本身和
模式后的循环

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


也许是这样的

在你的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;
  }
});
在雇员再培训局

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

我解决了这个问题,只需为模式显示视图而不是正常显示操作呈现文件

  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

你的问题是什么?如何在引导模式中加载show action。当我点击link_to show按钮时,它是nilclass。当我不使用模式时,我会自动转到show.html.erb页面。所以,这肯定是模态体内部的链接问题。尝试将所有
show
代码添加到
modal body div
本身..查看是否有效..而不将其分离到似乎有效的
partial
。可能是一种混乱的方法,但如果我需要进行更改,至少我知道代码的所有逻辑位于何处。谢谢。这确实是“非Rails”方法,为了实现这一点,您可能必须将完整的
模式
块删除到
\u post
部分..请尝试一下,看看这种方法是否有效。您能写出完整的解决方案吗?我已经到处查看了一个明确的解决方案。我能找到的最多的是引导模式中的表单。@RailzWithLove2035刚刚添加了一个解决方案链接,请查看一下。这就是我所说的。找不到“modalmanager”-您使用的是什么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;
  }
});
<%= link_to 'Show', post_path(@post), class: 'modal-link', data: { modal_url: post_path(@post) } %>
  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