如何使用Javascript来操作模态内容?
How to use Javascript to manipulate modal content?
我在 bootstrap 上使用模态,在 Rails 上使用 Ruby。我能够很好地显示模态,但我无法使用 Javascript 来操作模态的内容。我不确定我做错了什么,但我根本无法使用 Javascript 来影响模态的内容,以至于我开始怀疑是否存在不同堆栈级别的东西DOM 元素或者模态内容是否是 DOM.
的一部分
这是我的 app/views/home/index.haml:
- url = @entry.class.to_s.downcase.singularize
= link_to(send("#{url}_path", @entry), remote: true) do
= yield
#modals
视图包含 link 以打开模式,在本例中 @entry 表示图像对象。在 images controller 中,我们有 show 动作,我用它来显示模态:
def show
authorize! :view, @image
@can_destroy = can?('delete_asset', @image)
@can_edit = can?('edit_metadata', @image)
respond_to do |format|
format.js
end
end
对于模态视图,我有 app/view/show.js.erb
$("#modals").html('<%= j render "images/modal", image: @image %>');
$('#modals .modal').modal();
$('#modals .modal').modal('.toggle');
最后,我在 app/views/images/_modal.haml
中有模态部分
.modal
.modal-dialog
.modal-content
.modal-header
= image_tag(@image.file_original.url(:modal))
.modal-body
#shortdesc.row
.col-md-6
short description: #{@image.description_short}
.col-md-6.rightButton
%a.detailers
%span#toggle-text SHOW
DETAILS
%ul.errors
#detail.details{:style => "display: none"}
%div.modal-details
%i media type:
= @image.media_type
%br/
%div.modal-details
%i subject:
= @image.subject
%br/
%div.modal-details
%i title:
= @image.title
%br/
%div.modal-details
%i full description:
= @image.description
%br/
%div.modal-details
%i location:
= @image.location
%br/
%div.modal-details
%i date:
%br/
%div.modal-details
%i author:
= @image.author
%br/
%div.modal-details
%i source:
= @image.source
%br/
%div.modal-details
%i tags:
= @image.tag_list.join(' - ')
%br/
%br/
%div.modal-detailsgreen This item is shared by
%span.sharedbyfirstname
= @image.user.name_first
%span.sharedbylastname
= @image.user.name_last
%br/
%br/
现在我想在 link 与 class= "detailers" 被点击。我曾尝试在 show.Javascript 中写入 js.erb 来操纵模态的内容,但没有成功。我应该把我的 JS 放在某个地方来操作 JS 的内容吗?
$('#modals .modal').on('shown.bs.modal', function () {
// do something…
});
我在 bootstrap 上使用模态,在 Rails 上使用 Ruby。我能够很好地显示模态,但我无法使用 Javascript 来操作模态的内容。我不确定我做错了什么,但我根本无法使用 Javascript 来影响模态的内容,以至于我开始怀疑是否存在不同堆栈级别的东西DOM 元素或者模态内容是否是 DOM.
的一部分这是我的 app/views/home/index.haml:
- url = @entry.class.to_s.downcase.singularize
= link_to(send("#{url}_path", @entry), remote: true) do
= yield
#modals
视图包含 link 以打开模式,在本例中 @entry 表示图像对象。在 images controller 中,我们有 show 动作,我用它来显示模态:
def show
authorize! :view, @image
@can_destroy = can?('delete_asset', @image)
@can_edit = can?('edit_metadata', @image)
respond_to do |format|
format.js
end
end
对于模态视图,我有 app/view/show.js.erb
$("#modals").html('<%= j render "images/modal", image: @image %>');
$('#modals .modal').modal();
$('#modals .modal').modal('.toggle');
最后,我在 app/views/images/_modal.haml
中有模态部分.modal
.modal-dialog
.modal-content
.modal-header
= image_tag(@image.file_original.url(:modal))
.modal-body
#shortdesc.row
.col-md-6
short description: #{@image.description_short}
.col-md-6.rightButton
%a.detailers
%span#toggle-text SHOW
DETAILS
%ul.errors
#detail.details{:style => "display: none"}
%div.modal-details
%i media type:
= @image.media_type
%br/
%div.modal-details
%i subject:
= @image.subject
%br/
%div.modal-details
%i title:
= @image.title
%br/
%div.modal-details
%i full description:
= @image.description
%br/
%div.modal-details
%i location:
= @image.location
%br/
%div.modal-details
%i date:
%br/
%div.modal-details
%i author:
= @image.author
%br/
%div.modal-details
%i source:
= @image.source
%br/
%div.modal-details
%i tags:
= @image.tag_list.join(' - ')
%br/
%br/
%div.modal-detailsgreen This item is shared by
%span.sharedbyfirstname
= @image.user.name_first
%span.sharedbylastname
= @image.user.name_last
%br/
%br/
现在我想在 link 与 class= "detailers" 被点击。我曾尝试在 show.Javascript 中写入 js.erb 来操纵模态的内容,但没有成功。我应该把我的 JS 放在某个地方来操作 JS 的内容吗?
$('#modals .modal').on('shown.bs.modal', function () {
// do something…
});