Rails с Bootstrap поповера для уничтожения действия (сделать меня DRY)

Question

У меня есть частичное _table_row это частичное держат мой HTML для вывода @admin_products.all

В этом парциальном у меня есть мягкое удаление кнопки, которая инициирует Twitter Bootstrap поповера , этот popover имеет кнопку жесткого удаления для записи из базы данных.

Чтобы получить кнопку в popover в настоящее время, я включил содержимое HTML в частичном _table_row, так как вы можете себе представить, повторяет HTML по количеству записей в моей базе данных.

То, что я пытаюсь достичь, - это сохранить HTML-код для popover в index.html.erb и динамически добавить кнопку уничтожения в popover с правильным ID. Здесь я испытываю трудности.

Я пытался использовать

$('.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

Вы можете передать идентификатор продукта как атрибут html. В вас _table_row.html.erb:

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

, а затем в вашем JavaScript, вы можете получить доступ к щелкнул кнопку с this ссылкой, если вы передаете функцию content(reference):

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

Answer 3

Вместо того, чтобы ломать лучшую практику и, разместив свой встроенный javascript, вы действительно можете иметь «мягкую» ссылку, на самом деле имеющую правильный URL.

Вы можете сделать это, указав свою «мягкую» ссылку на URL-адрес удаления и имеющий прослушиватель событий, который отменяет щелчок и открывает popover.

$(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 элемент ссылки и добавить поведение.