QUESTION ANSWERED HERE -- Needed to check for load-success.bs.table to wait for the table to fully load wait till bootstrapTable is fully loaded before doing something
I have a weird problem with Bootstrap-Table. I'm rendering it as follows, and then I need to attach some jQuery handlers to the generated fields.
function createTable(){
$('#myTable').bootstrapTable('refresh', {
url: 'loadRequests'
});
// After the construction of the Bootstrap-Table, the dynamically-rendered fields (e.g. checkboxes) are now available
// Attach a handler to de-select the 'All' checkbox at the top if an individual checkbox is unchecked
$('.requestor_checkbox').on('click', function(e) {
if (!$(this).is(':checked')) {
//de-select the All checkbox at the top
$('#ckbCheckAll').prop('checked', false);
}
});
}
One of the fields generated by the Bootstrap-Table (via Data-Formatter) is checkboxes with the CSS style 'requestor_checkbox
'. It happens here, note the data-formatter that will output individual checkboxes; and the header will have the 'All' checkbox:
<th class="numeric" data-formatter="checkboxFormatter">
<input type="checkbox" name="ckbCheckAll" id="ckbCheckAll" class="btn btn-primary" value="Select all">
</th>
JS handler for Data-Formatter
function checkboxFormatter(id, row, index) {
return '<input type="checkbox" class="requestor_checkbox checkBoxClass" value="' + row.id + '">';
}
As you can see in the top section of the code, I need to attach a jQuery event handler to the just-generated checkboxes. The weird thing is, there is a delay, and the checkboxes aren't found.
But if I set my event binder to execute 1 seconds later after a timeout, then it does work. The following works:
// 1. Render Bootstrap-Table
$('#myTable').bootstrapTable('refresh', {
url: 'loaRequests?requestId=' + requestId
});
// 2. 1-SEC DELAY: After the construction of the Bootstrap-Table, the dynamically-rendered fields (e.g. checkboxes) are now available
// Attach a handler to de-select the 'All' checkbox at the top if an individual checkbox is unchecked
setTimeout(function (){
$('.requestor_checkbox').on('click', function(e) {
if (!$(this).is(':checked')) {
//de-select the All checkbox at the top
$('#ckbCheckAll').prop('checked', false);
}
});
}, 1000);