Question

我有一个部分_table_row这个部分保存我的html输出@admin_products.all

在这个部分我有一个软删除按钮，它启动了一个twitter引导弹出窗口，这个popover有来自数据库的记录的硬删除按钮。

要将按钮放入popover，我已将HTML内容包含在部分_table_row中，因为您可以想象按照我的数据库中的记录数重复HTML。

我想要实现的目的是在index.html.erb中保留popover的HTML，并使用正确的ID动态地将destroy按钮添加到popover中。这是我遇到困难的地方。

我试图使用

$('.deleteButton').popover({
    html: true,
    content: $('#popoverDestroy').html() + <%= link_to 'Delete', admin_product, method: :delete, class: 'btn btn-danger destroyButton', remote: true %>,
    placement: 'left'
});

但是你可以理解它会失败，因为它不知道admin_product是什么，你会如何正确地关联它？

Answer 1

在软删除按钮上添加您想要的HTML作为数据属性，然后在javascript中再次将其拉出来：

在部分：

<button class='deleteButton' data-delete-button='<%= link_to 'Delete', admin_product, method: :delete, class: 'btn btn-danger destroyButton', remote: true %>'></button>

然后在JavaScript中：

$('.deleteButton').each(function() {
  var softButton = $(this);
  softButton.popover({
    html: true,
    content: $('#popoverDestroy').html() + softButton.data('delete-button'),
    placement: 'left'
  });
});

Answer 2

而不是打破最佳做法并将您的javascript内联放置，您实际上可以让“软”链接实际拥有正确的网址。

你可以通过让你的“软”链接实际指向删除网址并拥有一个取消点击并打开弹出窗口的事件监听器来完成此操作。

$(document).on('click', '.deleteButton', function(){
  var link = $(this);
  var content = $('#popoverDestroy').clone()
    .append(link.clone().removeClass('.deleteButton'))

  link.popover({
    html: true,
    content: content.html()
  });

  return false;
});

这更符合渐进增强的想法，因为您采用普通的HTML链接元素并添加行为。

Answer 3

您可以将产品ID作为html属性传递。在你_table_row.html.erb：

<a class='deleteButton' data-productId='<%= admin_product.id %>'>Soft Delete</a>

然后在您的javascript中，如果您将功能传递给this (reference)，则可以使用content引用访问点击的按钮：

    $('.deleteButton').popover({
        html: true,
        content: function(){
          return $('#popoverDestroy').html() + "<a href='/your-url/'" + this.data('productId') + "data-remote='true' data-method='delete'>Destroy</a>"
        },
            placement: 'left'
        });

带有Bootstrap Popover的Rails用于销毁动作（让我干）

3 个答案: