How to use javascript variable to get a rails url

Question

I have an image link that looks like this:

<a href="#user-image-modal" data-toggle="modal" data-id="<%= image.id %>"><img class="user-photo" src="<%= image.picture.medium.url %>" alt="" /></a>

and a modal that looks like this:

  <div id="user-image-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="user-image" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        </div>
        <div class="modal-body">
          <img src="" alt="">
        </div>
        <div class="modal-footer">
        </div>
      </div>
    </div>
  </div>

When the image link is clicked I want to open a larger version of the image. The url of the image is obtained from a carrierwave helper UserImage.find(id).picture.large.url.

My js.erb file:

  $('#user-image-modal').on('show.bs.modal', function (event) {
    var link = $(event.relatedTarget)
    var photo = link.data('id')
    var modal = $(this)

    // What comes next?
  })

I need to set the src attribute in the img tag of the modal with UserImage.find(photo).picture.large.url. The photo variable corresponds to the id of the UserImage record. How can I use the photo variable to get the correct url. I don't think I can use the photo variable inside erb tags.

chumakoff · Accepted Answer · 2017-03-22 23:09:26Z

1

Add the large picture url to the link as a data attribute, like it is done with the id attribute. Then (on click) get the url and do whatever you want.

<a href="#user-image-modal" data-toggle="modal" data-url="<%= image.picture.large.url %>">
  <img class="user-photo" src="<%= image.picture.medium.url %>" alt="" />
</a>

$('#user-image-modal').on('show.bs.modal', function (event) {
  var link = $(event.relatedTarget);
  var imgSrc = link.data('url');
  var modal = $(this);

  modal.find(".modal-body img").attr('src', imgSrc);
})

Another way is to send an AJAX query with the given id to get the picture.

answered Mar 22, 2017 at 23:09

chumakoff

7,0942 gold badges26 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use javascript variable to get a rails url

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related