Bootstrap Modal with <%= image_tag> in Rails

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

        }
    });

});

score 0 · Answer 1 · answered Dec 17 '16 at 06:44

0

Use this.

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

answered Dec 17 '16 at 06:44

Neeraj Rana

454
4
12

Thank you so much for your response. So I updated my code and it now activates a Modal when I click on an image. However, its only showing my first image and I can't exit out of my Modal - its like its frozen – Omar Dec 17 '16 at 17:47
Tried your response and then tried to add javascript to change the pictures but got no luck on it. Is there anything else you'd recommend? Thank you so much – Omar Dec 18 '16 at 14:32

score 0 · Accepted Answer · answered Dec 22 '16 at 15:25

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

Bootstrap Modal with <%= image_tag> in Rails

2 Answers2