1

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); 
gene b.
  • 10,512
  • 21
  • 115
  • 227

0 Answers0