Wie benutzt man Javascript, um modalen Inhalt zu manipulieren?

Question

Ich verwende Bootstrap-Modale und Ruby on Rails. Ich konnte die modale Geldstrafe anzeigen, aber ich habe Probleme mit Javascript, um den Inhalt des Modals zu manipulieren. Ich bin nicht sicher, was ich falsch mache, aber ich war nicht in der Lage, Javascript zu benutzen, um den Inhalt des Modales überhaupt zu beeinflussen, bis ich mich fragte, ob es so etwas wie verschiedene Stacklevel auf den DOM-Elementen gibt sogar die modalen Inhalte sind Teil des DOM.

Hier ist mein app/views/home/index.haml:

- url = @entry.class.to_s.downcase.singularize 
= link_to(send("#{url}_path", @entry), remote: true) do 
    = yield 
#modals 

Die Ansicht enthält den Link, um die modalen zu öffnen, und in diesem Fall @entry stellt ein Bildobjekt. Und in dem Bilder Controller wir haben die Show Aktion, die ich die modal anzuzeigen bin mit:

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 

Und für die modalen Ansichten, ich habe die app/view/show.js.erb

$("#modals").html('<%= j render "images/modal", image: @image %>'); 
$('#modals .modal').modal(); 
$('#modals .modal').modal('.toggle'); 

und schließlich, ich habe die modalen Teil in 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/ 

Jetzt will ich verstecken und s wie (toggle) der Inhalt des div mit id = "detail" und class = "details" wenn auf den Link mit class = "detailers" geklickt wird. Ich habe versucht, Javascript in der show.js.erb zu schreiben, um den Inhalt des Modals ohne Erfolg zu manipulieren. Gibt es einen bestimmten Ort, an den ich meinen JS stellen sollte, um den Inhalt des JS zu manipulieren?

Answer 1

$('#modals .modal').on('shown.bs.modal', function() { 
    // do something… 
});