[英]Why does modal not works when calling a remote partial in rails?
基本设置工作:
翻译/_edit_single_translation.html.erb
<div id="modalContent" class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
layouts/application.html.erb 包含:
<%= render 'translations/edit_single_translation' %>
<div id="modal-window" class="modal hide fade modal-backdrop" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div id="modalDialog" class="modal-dialog" role="document">
Content comes here
</div>
</div>
关联:
link_to "Translate Link", translations_edit_path(:locale => locale,: key => key), local: true)
所以这行得通
从 applications.html.erb 我删除:
<%= render 'translations/edit_single_translation' %>
并将链接更改为:
link_to "Translate Link", translations_edit_path(:locale => locale,: key => key), remote: true)
在 javascript/packs/modal-action.js 我放:
$("#modal-window").find(".modal-content").html("<%= j (render partial: 'translations/edit_single_translation') %>");
$("#modal-window").modal('show');
现在它不起作用。
添加时:
alert(\'<%= j (render partial: "translations/edit_single_translation") %>')
到模态动作。 我收到<%= j (render partial: "translations/edit_single_translation") %>
的警报
我错过了什么?
[编辑]
我发现调用了“显示”方法。 谷歌搜索一两天我发现不是:
respond_to do |format|
format.js
format.html
end
我不得不说:
respond_to do |format|
format.js { render :layout => false }
format.html
end
在翻译的“显示”方法中。
然后我不得不搬家
$("#modalDialog").html('<%= j (render partial: 'edit', locals: { items: @translation } ) %>');
$('#modal-window').modal();
从javascript/packs/modal-action.js
到translations\show.js.erb
为了进行添加和更新工作,我将所有翻译放在一个跨度中,键为 id。 添加或编辑后更新相应的翻译并关闭我放置的模式:
$('#<%= params[:key].gsub(".","_") %>').html('<%= params[:value] %>');
$('#modal-window').modal('hide');
在translations\create.js.erb
和
$('#<%= params[:i18n_backend_active_record_translation][:key].gsub(".","_") %>').html('<%= params[:i18n_backend_active_record_translation][:value] %>');
$('#modal-window').modal('hide');
在translations\update.js.erb
我的添加表单是 form_with 和编辑是 form_for
我的translations_controler.erb
包含:
class TranslationsController < ApplicationController
def index
end
def show
@translation = Translation.find_by(:locale => find_locale,
:key => params[:key])
@key = params[:key]
if @translation.nil?
@Translation = Translation.new
end
respond_to do |format|
format.js { render :layout => false }
format.html
end
end
def new
end
def create
@translation = Translation.create(translation_create_params)
respond_to do |format|
if @translation.save
I18n.backend.reload!
format.json { head :no_content }
format.js
else
format.json { render json: @customer.errors.full_messages,
status: :unprocessable_entity }
end
end
end
def edit
end
def update
respond_to do |format|
@translation = Translation.find(t_id)
if @translation.update(translation_update_params)
I18n.backend.reload!
format.json { head :no_content }
format.js { }
else
format.json { render json: @translation.errors.full_messages,
status: :unprocessable_entity }
end
end
end
private
def t_id
params[:i18n_backend_active_record_translation][:id]
end
def find_locale
params[:locale].nil? ? I18n.default_locale : params[:locale]
end
def translation_update_params
params.require(:i18n_backend_active_record_translation).permit(:locale,
:key, :value)
end
def translation_create_params
params.permit(:locale, :key, :value)
end
end
现在模态正在工作:):)。
这里有很多混乱。
放置在资产管道 (Webpacker) 中的 Javascript 在生产部署时编译。 在 Rails 6 中,你把你的“包”——它们是资产清单放在app/javascripts/packs
中。 这意味着您从布局链接到的主文件,它需要您正在使用的库以及您的代码。 我们鼓励您将自己的应用程序代码放在app/javascripts
中。
Webpacker 不会通过 ERB 解释器传递.js
文件,因此期望$("#modal-window").find(".modal-content").html("<%= j (render partial: 'translations/edit_single_translation') %>")
将 output 除了字符串"<%= j (render partial: 'translations/edit_single_translation') %>"
之外的任何内容。
与带有 webpacker 的 sprocket 不同,您实际上必须手动安装.js.erb
集成。 但请记住,该文件仍然在部署时编译,而不是在运行时编译,因此上下文将完全错误,您将无法访问帮助程序和查看允许您渲染部分的上下文。
js.erb
当您在链接和 forms 上使用data-remote
时,Rails UJS 将发送一个 ajax 请求,用于application/javascript
内容类型。 您 controller 然后应该响应js
并呈现一个 js.erb 视图,然后通过在包含响应的页面上创建一个脚本元素来评估该视图,以便该视图更改现有页面。
class ThingsController < ApplicationController
def show
@thing = Thing.find(params[:id])
respond_to do |f|
format.js
format.html
end
end
end
// app/views/things/show.js.erb
el = document.getElementById("#thing");
el.innerHTML = "<%= j @thing.name %>";
如果您只想在模态中呈现部分内容,则首先不需要将模板 output 转换为 JS。 您可以使用content_for
在您的布局中创建一个占位符,您的视图可以填充:
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenter" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
<%= content_for :modal_title %>Modal Title<% end %>
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<%= content_for :modal %><% end %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
稍后在视图中您可以填写内容:
<% content_for :modal_title, "Edit translation", flush: true %>
<% content_for :modal do %>
<%= render partial: 'translations/edit_single_translation' %>
<% end %>
现在您的 JavaScript 所要做的就是显示模态。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.