Как использовать переменную javascript для получения URL рельса

Question

Как использовать переменную javascript для получения URL рельса

0

У меня есть ссылка на изображение, которая выглядит так:

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

и модальный, который выглядит так:

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

Когда щелкнули ссылку на изображение, я хочу открыть большую версию изображения. URL-адрес изображения получается из вспомогательного UserImage.find(id).picture.large.url носителя UserImage.find(id).picture.large.url.

Мой файл js.erb:

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

    // What comes next?
  })

Мне нужно установить атрибут src в теге img модала с помощью UserImage.find(photo).picture.large.url. Переменная фото соответствует идентификатору записи UserImage. Как использовать переменную фотографии для получения правильного URL-адреса. Я не думаю, что могу использовать переменную фотографии внутри тегов erb.

user4584963 22 март 2017, в 19:10

Источник

Теги:

javascript

jquery

ajax

ruby-on-rails

1 ответ

Ещё вопросы

chumakoff · Accepted Answer · 2017-03-22T21-00-00.000Z

Добавьте URL-адрес большой картинки в ссылку как атрибут данных, как это делается с атрибутом id. Затем (по щелчку) получите URL-адрес и сделайте все, что хотите.

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

Другой способ - отправить запрос AJAX с данным id чтобы получить изображение.