在Rails中使用<％= image_tag>的Bootstrap Modal

Question

I apologize for the newbie question. I was trying to implement the Bootstrap Modal feature on my rails App. Specifically, looking at applying to a <%=image_tag> so that when a user clicks on a specific image the modal is then activated. I looked at the following SO questions ( Twitter Bootstrap Modal Form Submit ) & ( Bootstrap open image in modal ) but after following the instructions, I still was not able to do it. I have provided all the relevant code below and thank you guys so much.

Initially (Image in the modal is the same - the first one) across each each item

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');   
});

Attempt 3 (Add Javascript to change image to pick up current image for correct item > no image is appearing)

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>

application.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

用这个。

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

Answer 2

Had to hire a professional developer to figure out exactly what was going on. Here's the correct answer that worked and the explanation as to why - hopefully it helps someone along stuck in a similar bind.

The thing that is getting this stuck is that we have <% @items.each do |item| %> followed then by <%= image_tag item.avatar.url(:medium), class: "open-AddImgDialog", id:"test", data: { target: "#myModal", toggle: "modal"} %> and then the modal code listed above. This results in the same image (the first item image post) appearing over and over again when the modal is activated. When dealing with @items.each a solution to this problem would be to utilize a more flexible id that can dynamically change as we move from one item post to another(so that in the modal the same first image doesn't appear on all of them) .

<%= 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