Передача переменных из Rails в диалоговое окно coffeescript (javascript) для кнопки удаления нескольких изображений

0

Таким образом, у меня есть куча изображений из цикла 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, но решения очень ценятся.

благодаря

Теги:
coffeescript

1 ответ

1
Лучший ответ

Все ссылки имеют одинаковый идентификатор, потому что в ваших параметрах 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:
      ...
  • 0
    да, конечно, я перезаписываю это, но как я могу обратиться к правильному идентификатору в jquery, чтобы получить это конкретное изображение? Это проблема. Как я могу ссылаться на этот идентификатор после имени изображения?
  • 0
    Я вижу, вы должны быть в состоянии сделать: $(this).data('id') Элемент this внутри обработчика событий является элементом DOM, к которому был прикреплен обработчик событий. Обертывание с помощью $ () превращает его в объект jquery, который позволяет вам вызывать .data() для него.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню