Global.Js file
function operativeEvents() {
$('.tableButton').off().click(function (e) {
var $this = $(this),
tableId = $this.parents('table').attr('id'),
$table = $('#' + tableId),
index = $this.closest('tr').index(),
data = $table.bootstrapTable('getData');
//global variable to retrieve the data of the current row
window.currentRow = data[index];
buttonActions($this.attr('id'), $this.data('myid'));
});
The operativeEvents function binds when the bootstrap table body is rendered. This is done with the onPostBody event. https://bootstrap-table.com/docs/api/events/
Local.cshtml This contains a switch case to handle the button clicks
function buttonActions(id) {
switch (id) {
case 'bookButton':
bookMatch(currentRow.id);
break;
}
}
function bookMatch(currentRow) {
bootbox.dialog({
message: '<h4 class="text-center">Are you sure?</h4>',
buttons: {
cancel: {
label: 'Cancel',
className: "btn btn-danger"
},
confirm: {
label: 'Ok',
className: 'btn btn-success',
callback: function () {
alert('testing ' + currentRow);
return;
updateCall({
url: "/api/MatchesApi/BookMatch/" + currentRow.id,
tableRefresh: true,
serverSideMessaging: true,
});
}
}
},
});
}
For some reason when I click the button it opens the Bootbox.dialog multiple times. I have tried using the off() method and also played around with event bubbling. Can someone please give me some advice? Thanks :)