Таким образом, у меня есть куча изображений из цикла Rails в div, каждая из которых имеет кнопку удаления под ним. Мне нужно передать идентификатор этого изображения в диалоговое окно JQuery Modal, но только для этого конкретного изображения, чтобы ссылка из диалогового окна отправила правильный идентификатор изображения на контроллер для его удаления.
Я читал, что могу преобразовать Ruby в переменные javascript, например:
:javascript
delete_image_path = "#{delete_image_path}"
image_name = "#{image.name}"
id = "#{image.id}"
Это здорово, но, конечно, последнее изображение в цикле всегда будет переписывать эти переменные, и я не получаю идентификатор для правильного изображения при попытке удалить его.
Дальнейшее исследование показывает, что я также могу использовать атрибут data, а затем читать его с помощью JQuery следующим образом:
id: 'delete-link', data: { image_name: image.name, delete_dvd_path: delete_image_path, id: image.id }
# jquery
$('#delete-link').data('image_name')
Моя большая проблема заключается в том, что все ссылки для изображений имеют один и тот же идентификатор, это внутри цикла Rails для всех изображений для определенной записи:
- @images.each do |image|
= link_to 'Delete', '#', id: 'delete-link', :title => 'Delete this image', \
data: { image_name: image.name, delete_dvd_path: delete_image_path, id: image.id }
Я, конечно же, понимаю, что проблема в том, что у моих кнопок все одинаковые идентификаторы, и невозможно отличить их от того, что я не делаю, - как сделать их уникальными, а затем захватить их ID в конец coffesscript/javascript вещей.
Я, неловко, не понимаю, как отправить или получить правильный идентификатор и имя изображения для каждого изображения в диалоговом окне JQuery, которое затем вызывает контроллер Rails для удаления соответствующего изображения с чем-то вроде:
:coffee
$(".delete-btn").click ->
$("#dialog-confirm").dialog
titleClass: 'alert alert-danger'
closeText: 'hide'
title: 'Delete Image ' + image_name + '?'
resizable: false
height: 240
width: 350
modal: true
buttons:
...
Я довольно плохо с javascript или JQuery, но решения очень ценятся.
благодаря
Все ссылки имеют одинаковый идентификатор, потому что в ваших параметрах link_to у вас есть id: 'delete-link'
который заставляет все ссылки иметь идентификатор 'delete-link'. Вы можете сделать это уникальным, добавив к нему image.id.
Если вы не говорите, что идентификатор данных всегда один и тот же?
Изменение: я не могу сказать из вашего кода, но я предполагаю, что .delete-btn
ссылается на ваши ссылки на удаление правильно? Если так:
$(".delete-btn").click ->
# this is in the scope of the .delete-btn event handler
image_id = $(this).data('id')
$("#dialog-confirm").dialog
titleClass: 'alert alert-danger'
closeText: 'hide'
title: 'Delete Image ' + image_name + image_id
resizable: false
height: 240
width: 350
modal: true
buttons:
...
$(this).data('id')
Элементthis
внутри обработчика событий является элементом DOM, к которому был прикреплен обработчик событий. Обертывание с помощью $ () превращает его в объект jquery, который позволяет вам вызывать.data()
для него.