Twitter Bootstrap Question posted in

Twitter bootstrap – Rails with Bootstrap Popover for a destroy action (make me DRY)

I have a partial _table_row this partial holds my html for the output of @admin_products.all

In this partial I have a soft delete button which initiates a twitter bootstrap popover, this popover has the hard delete button for the record from the database.

To get the button into the popover currently I’ve included the HTML content in the partial _table_row this as you can imagine repeats the HTML by the number of records in my database.

What I’m trying to achieve is to keep the HTML for the popover in index.html.erb and to dynamically add the destroy button into the popover with the correct ID. This is where I’m having difficulty.

I’ve tried to use

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

But as you can understand it will fail as it doesn’t know what admin_product is, how would you associate it correctly?

Tags:

3

Answers


  1. 0

    Add the HTML that you want as a data attribute on the soft delete button, then pull it out again in javascript:

    In the partial:

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

    Then in JavaScript:

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

    You can pass the product id as an html attribute. In you _table_row.html.erb:

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

    And then in your javascript, you can access the clicked button with the this reference if you pass a function to 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'
        });
    Login or Signup to reply.
  3. 0

    Instead of breaking best practice and placing your javascript inline you could actually have the “soft” link actually have the correct URL.

    You could do this by having your “soft” link actually point to the delete url and having an event listener which cancels out the click and opens the 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;
});

    This is more inline with the idea of progressive enhancement since you take a normal HTML link element and add behavior.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search