Railsで<％= image_tag>を持つブートストラップモーダル

Question

初心者の質問にはお詫び申し上げます。私は自分のレールアプリにBootstrap Modal機能を実装しようとしていました。具体的には、<%=image_tag>に適用すると、ユーザが特定の画像をクリックするとモーダルがアクティブになる。私は以下のSOの質問（Twitter Bootstrap Modal Form Submit）&（Bootstrap open image in modal）を見ましたが、指示に従った後、私はまだそれを行うことができませんでした。私は以下の関連するすべてのコードを提供してくれてありがとう。

最初（モーダルの画像が同じである - 最初のもの）それぞれの両端の各項目

index.html.erb

<%= image_tag item.avatar.url(:medium), class: "block", id:"open-AddImgDialog", data: { target: "#myModal", toggle: "modal"} %> 
<div class="modal fade" tabindex="-1" id="imagemodal" role="dialog"> 
    <div class="modal-dialog" role="document" > 
    <!-- Modal content--> 
<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> 
    <%= item.product %> 
    </div> 
    <br/> 
    <h4 class="modal-title"> 
    <%= item.product %> 
    </h4> 
    <div class="modal-body"> 
    <div class="picture"> 
     <%= image_tag item.avatar.url(:medium) %> 
    </div>   
    <br/> 
    <br/> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    <button type="button" class="btn btn-primary">Save changes</button> 
    </div>     
    </div> 
</div> 

application.js

$(document).on('click',"#open-AddImgDialog", function() { 
    $('#imagemodal').modal('show'); 
}); 

試み3（ない画像が現れていない>正しいアイテムの現在の画像を撮像する画像を変更するためにJavascriptを追加）

index.html.erb

<%= image_tag item.avatar.url(:medium), class: "open-AddImgDialog", id:"test", data: { target: "#myModal", toggle: "modal"} %> 
<div class="modal fade" tabindex="-1" id="imagemodal" role="dialog"> 
    <div class="modal-dialog" role="document" > 
    <!-- Modal content--> 
<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> 
    <%= item.product %> 
    </div> 
    <br/> 
    <h4 class="modal-title"> 
    <%= item.product %> 
    </h4> 
    <div class="modal-body"> 
    <div id="picture" style="border: 1px solid black; width: 200px; height: 200px;"> 

     <canvas id="myCanvas" width="200" height="200"></canvas> 

    </div>   
    <br/> 
    <br/> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    <button type="button" class="btn btn-primary">Save changes</button> 
    </div>     
    </div> 
</div> 

アプリケーション。 js

$(document).on('click',".open-AddImgDialog", function() {    
    html2canvas($("#picture"), { 
     onrendered: function (canvas) { 

      //theCanvas = canvas; 
      //document.body.appendChild(canvas); 
      //Canvas2Image.saveAsPNG(canvas); 

      var c = document.getElementById("myCanvas"); 
      var ctx = c.getContext("2d"); 
      var img = document.getElementById("test"); 

      var x = 0; 
      var y = 0; 
      var width = 200; 
      var height = 200; 

      ctx.drawImage(img, x, y, width, height); 

     } 
    }); 

}); 

Answer 1

何が起こっているかを正確に把握するために専門の開発者を雇う必要がありました。ここで正しい答えと理由についての説明があります。うまくいけば、誰かが似たような縛りを抱いているのに役立ちます。

これが詰まっているのは、私たちが<％@ items.each do | item | ％>に続けて<%= image_tag item.avatar.url(:medium), class: "open-AddImgDialog", id:"test", data: { target: "#myModal", toggle: "modal"} %>を入力し、上記のモーダルコードを入力します。これにより、モーダルがアクティブになったときに同じイメージ（最初のアイテムのイメージポスト）が繰り返し表示されます。この問題の解決策は、フレキシブルIDを動的にに変更することです。から1つのアイテムの投稿を別のものに移動すると（つまり、同じ第1の画像では、すべてに表示されません）。

<%= image_tag item.avatar.url(:medium), class: "block", id: "image-#{dom_id(item)}", data: { target: "#myModal-#{dom_id(item)}", toggle: "modal"} %> 


<div class="modal fade" tabindex="-1" id="myModal-<%= dom_id(item) %>" aria-labelledby="myModalLabel" role="dialog"> 
..... 
#Everything else follows normal bootstrap conventions 

Answer 2

これを使用してください。

<%= image_tag item.avatar.url(:medium), class:"pop", :data => { :target => "#imagemodal } %>