Question

我正在尝试使用模式添加自定义删除确认，但是我很难理解如何将对象传递到模式中，以便可以在delete操作中对其进行引用。

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>

然后，我通过javascript / jquery将该属性应用于'href'属性

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

这将返回错误：

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

好消息是，图像ID＃97确实与模态中的图像相对应。

有什么想法我可以从这里去吗？同样，我要执行的操作是在images_controller中执行销毁操作并传递正确的图像ID。

更新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％如何获得初始删除链接对象以“传递”到模态，但是我仍然在这里和那里尝试。

Answer 1

知道了！

可能不是最干净的方法，但是一种解决方案是首先在引用该图像的视图的初始链接内集成一个数据属性，然后使用该数据值通过jQuery设置href属性。我的主要思想是将所需的值与模式完全分开，并认为它只是需要存储并稍后检索的Javascript / jQuery值。

view.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');
  });

是否可以将参数传递给模式窗口？需要模态来引用对象

更新：

更新2：

1 个答案: