DataTable causes javascript to stop executing - no errors in console

Question

I'm having an issue with DataTable, it seems to get created successfully because the 'fnDrawCallback' occurs (and the table displays successfully), however an alert that directly follows the table creation does not execute. And then later onClick, when the datatable's variable is accessed, it is still "null" (as originally set). Because it is null, i can't access the checkbox values and the javascript errors out ("Cannot read property 'fnGetNodes' of null").

here's the datatable sources:

<script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.10.5/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.10.5/css/jquery.dataTables.css">

This button activates the click-function in the document-ready function:

<a href="javascript:void(0);" id="blast" class="btn btn-lg btn-success">Send selected cranes in an Email Blast</a>

... and this creates the header for the table with checkboxes ...

<table class="table" id="active_cranes_id" data-type="crane">
    <thead>
        <tr><th class="nosort actions">Select</th><th>Make</th><th>Model</th><th>Unit</th><th>Hits</th></tr>
    </thead>

... and then this javascript is inserted to display the table, and to handle the onclick ...

<script type="text/javascript">
    alert("script is executing");//this hits on page load
    active_cranes_table = null;
    $(document).ready(function(){
        alert('defining blast-onClick function');//this hits
        $("#blast").click(function() {
            $("#blast").attr("disabled", "disabled");
            var equipments_selected = new Array();
            alert("active_cranes_table: "+active_cranes_table);//active_cranes_table=null ... next line blows up...
            $(active_cranes_table.fnGetNodes()).find("input[type='checkbox']:checked").each( function(index) {
                alert('index: '+index);
                equipments_selected.push($(this).closest('tr').attr('id'));
            });
            $("#blast").removeAttr("disabled"); 
            //doesn't hit, error was thrown above because datatable was null
            alert('leaving blast-click function');
        });

        //this executes after the page has rendered and creates the table (unsuccessfully?)
        $.fn.dataTable.ext.errMode = 'alert';//i've tried using "none" as well
        active_cranes_table = $('#active_cranes_id')
            .on('error.dt', function (e, settings, techNote, message) {
                console.log('DataTable error: ', message);
            })
            .dataTable({
                "fnDrawCallback": function(){alert('table finished drawing');},//this gets hit
                "aaData": <?php echo $active_cranes_json;?>,
                "bStateSave": true,
                "sDom": '<"top"plf>rt<"bottom"p>',
                "bSortClasses":false,
                "asStripeClasses": [],
                "aoColumnDefs": [
                    //{ "sClass": "test", "aTargets": [ "actions" ] },
                    {"bSortable": false, "aTargets": [ "nosort" ] }
                ]
            });//THIS IS WHERE EVERYTHING STOPS, and the following alerts don't execute...
        alert("datatable created");//DOESNT GET HIT
        alert("datatable var: "+active_cranes_table);//DOESNT GET HIT
    });
    alert('outside document-ready-function');//this hits before anything in document-ready-function
</script>

and here is the input json:

[{"DT_RowId":"218686","DT_RowClass":"alert-success","0":"<input type=\"checkbox\" checked> Select","1":"Grove","2":"GMK6300L","3":null,"4":"101"}]

So the basic issue -- when creating the dataTable, something happens which causes javascript to stop executing any more code, the datatable has an "on-error-function" that should handle the error if there was one, I don't see any errors in the console, the table displays fine, the page source html looks fine with nothing in red, but the alerts that follow don't execute. I'm not sure what else to try? Thanks in advance.

Answer 1

I found the culprit, it was this block that was added to a javascript file elsewhere:

$(document).on("draw.dt", ".dataTable", function () {
    $('.selectpicker').selectpicker('render');
});

not exactly sure why it was added (i'm taking over an old codebase), but i was seeing a javascript alert that said 'selectpicker not a function' and decided to comment the block out, and VOILA i was able to create the datatable and act on it. Now i'm hoping it won't somehow effect something on another page...