Javascript 如何在Bootstrap 4模式中呈现show操作?
我正在用一个可点击图像链接的显示动作填充引导4模式。我目前正在使用Carrierwave上传图像。此时,当我单击图像时,仅显示模式覆盖。包含内容的模态容器根本不显示 User/Show.html.erbJavascript 如何在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="
<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">×</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