Можно ли передать аргументы в модальное окно?Нужен модальный для ссылки на объект - PullRequest
Новая
       8

Можно ли передать аргументы в модальное окно?Нужен модальный для ссылки на объект

0 голосов
/ 01 октября 2018

Я пытаюсь добавить пользовательское подтверждение удаления с помощью модального режима, но мне трудно понять, как передать объект в модальный режим, чтобы на него можно было ссылаться в действии удаления.

view.html.erb 

<% current_user_highlights.each do |image| %>
  <%= image_tag image.file_url(:small_thumb) } %>
  <span class="overlay btn btn-sm btn-danger" data-toggle="modal" data-target"#delete-highlight-confirmation-modal">DELETE</span>
<% end %>

modal.html.erb 

<div class="modal fade" id="delete-highlight-confirmation-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content" align="center">
      <div class="modal-header">
        <h2>Are you sure you want to delete this highlight?</h2>
      </div>
      <div class="modal-body">
        <div id="delete-highlight-parent-image"> </div>
        <div id="delete-highlight-crop-image"></div>
        <br>

Вот где я застрял... Есть ли способ "использовать" переменную изображения, на которую ссылаются в блоке представления, чтобы она знала, какое изображение должно быть удалено? 

        <%= link_to "Yes, delete it", image_path(image), method: :delete, data: { remote: true }, class: "overlay btn btn-sm btn-danger, id: "yes-delete-button"  %>

        <%= button_tag "No, keep it", class: "btn btn-lg btn-default", id: "no-keep-button", data: { dismiss: "modal" }%>
      </div>
    </div>
  </div>
</div>

Заранее спасибо за любую помощьи понимание, которое вы можете предложить!

ОБНОВЛЕНИЕ:

Вот кое-что, что я пробовал с этого поста.Кажется, я все ближе, но еще не совсем ...

Сначала я установил атрибут data-image в кнопке вида 

<span class="overlay btn btn-sm btn-danger" data-toggle="modal" data-target="#delete-highlight-confirmation-modal" data-image=<%= image_path(image) %>>DELETE</span>

Затем я применил этот атрибутатрибуту 'href' через javascript / jquery 

let $deleteImageButton = $('#yes-delete-button');
$deleteImageButton.attr('href', $(this).data('image'));

Это возвращает ошибку: 

DELETE http://localhost:3000/images/97 500 (Internal Server Error)

Хорошая новость заключается в том, что Image Id # 97 действительно соответствуетизображение в модале.

Есть идеи, куда я могу пойти отсюда?Опять же, то, что мне нужно, это уничтожить действие в images_controller и передать правильный идентификатор изображения.

ОБНОВЛЕНИЕ 2:

Когда дело дошло до внутренней ошибки сервера, которую я получал, это было связано с каким-то старым кодом ajax, зависшим от предыдущих попыток.Как только я очистил это, это проходит как ожидалось.

$yesDeleteButton.off().on('click', function(event) {
  // event.preventDefault();
  $(this)
    .off('ajax:beforeSend')
    .on('ajax:beforeSend', function() {
      $body.addClass('loading');
    });
  $(this)
    .off('ajax:success')
    .on('ajax:success', function() {
      $body.removeClass('loading');
  });

Я все еще не уверен на 100%, как заставить исходный объект ссылки удаления "перейти" к модальному, но я все еще пробую кое-что тут и там.

1 Ответ

0 голосов
/ 01 октября 2018

Понял!

Возможно, это не самый чистый способ, но одним из решений было сначала интегрировать атрибут данных в исходную ссылку в представлении, которое ссылается на изображение, а затем использовать это значение данных для установкиАтрибут href с помощью jQuery.Основной сдвиг в моем мышлении состоял в том, чтобы полностью отделить необходимое значение от модального и увидеть его как не что иное, как значение Javascript / jQuery, которое нужно было сохранить и затем извлечь.

представление.html.erb 

<span class="overlay btn btn-sm btn-danger" data-toggle="modal" data-target="#delete-highlight-confirmation-modal" data-image=<%= image_path(image) %>>DELETE</span>

.js 

let selectedImagePath;
$highlightDeleteButtons.off().on('click', function(event) {
  // ...
  if ($(this).attr('data-imagepath') !== undefined) {
    $selectedImagePath = $(this).attr('data-imagepath');
  } else if ($(this).siblings('img')[0].dataset.imagepath !== undefined)  {
    $selectedImagePath = $(this).siblings('img')[0].dataset.imagepath;
  }
  // ...
});

let $deleteImageButton = $('#yes-delete-button');
$deleteImageButton.attr('href', $selectedImagePath);

Когда дело дошло до внутренней ошибки сервера, которую я получал, это было связано с некоторымистарый Ajax-код, торчащий из более ранних попыток.Как только я очистил это и использовал что-то по принципу ниже, это прошло как очарование! 

$yesDeleteButton.off().on('click', function(event) {
  // event.preventDefault();
  $(this)
    .off('ajax:beforeSend')
    .on('ajax:beforeSend', function() {
      $body.addClass('loading');
    });
  $(this)
    .off('ajax:success')
    .on('ajax:success', function() {
      $body.removeClass('loading');
  });
...