0

I apologize for the newbie question. I was trying to implement the Bootstrap Modal feature on my rails App. Specifically, when a user clicks on a specific image the modal is then activated showing that specific image. I looked at the following SO questions (Twitter Bootstrap Modal Form Submit) & (Twitter Bootstrap Modal Form Submit) but after following the instructions, I faced this issue > The specific item picture wasn't transferred over to the Modal which I used javascript. I have provided all the relevant code below and thank you guys so much.

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

        }
    });

});

enter image description here

Community
  • 1
  • 1
Omar
  • 383
  • 3
  • 17

1 Answers1

1

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.

<%= 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
Omar
  • 383
  • 3
  • 17