How to bind a Bootstrap modal to action buttons rendered with Bootstrap Table

Question

I'd like to use a Bootstrap modal triggered by the action buttons I have added to my Bootstrap Table, but I can't figure it out. Is there any way to bind the data attributes of these buttons to the modal? It's not working in this case. Or in case I can only do it from javascript, how could I do it, since it's not working either in my case. No error thrown either way.

This is a screen capture to make clear which buttons I'm talking about: the edit and remove buttons on each row.

And the code I'm using:

// Click handler for the edit button when I try the data attributes way
function operateFormatter(value, row, index) {
    return [
        '<a class="edit ml10" href="#dialogo-destinos" data-toggle="modal"  title="Edit">',
            '<i class="glyphicon glyphicon-edit"></i>',
        '</a>',
        '<a class="remove ml10" href="javascript:void(0)" title="Remove">',
            '<i class="glyphicon glyphicon-remove"></i>',
        '</a>'
    ].join('');
}
// Code for the javascript way:
window.operateEventsDestinos = {
    'click .edit': function (e, value, row, index) { 
        var $dialogo = $('.dialogo.destinos');
        ... // actions to populate the modal according to the row data
        $dialogo.modal('show');
        ...
    },
    'click .remove': function (e, value, row, index) {
        ...
    }
};

The table rendered by Bootstrap Table:

<div class="row">
    <div class="col-md-12">
        <table id="tabla-datos-destinos" class="bootstrap-table table table-striped table-hover"
                data-pagination="true" data-search="true" data-show-header="true"
                data-show-columns="true" data-show-refresh="true" data-toolbar="#custom-toolbar"
                data-show-toggle="true" data-show-export="true">
           <thead>
                <tr>
                    <th data-field="nombre" data-sortable="true">Nombre</th>
                    <th data-field="poblacion" data-sortable="true">Localidad</th>
                    <th data-field="provincia" data-sortable="true">Provincia</th>
                    <th data-field="operate" data-formatter="operateFormatter" data-events="operateEventsDestinos">Acciones</th>
                </tr>
           </thead>
        </table>
    </div>
</div>

And of course the HTML for the modal:

<div class="dialogo destinos modal fade" id="dialogo-destinos">
...
</div>

Any ideas why this isn't working or what should I do?

EDIT:

I've also tried using a button instead of an A tag, but I can't get it working either. It's instead running the default behavior: submitting the form. Is there any way to add the action buttons directly within the HTML of the table instead of having to add them through javascript, which I think is the reason why the binding is not done?

Answer 1

You can simply tie data-toggle and data-target to a button inside your acciones div.

For example:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#dialogo-destinos">
  Launch Modal
</button>