jQuery dataTable error on initialize when inside bootstrap 3 modal

551
December 21, 2016, at 08:02 AM

A dataTable is being loaded inside the main PHP web page and a column renders a[data-toggle="modal"] a href that also has a unique class custs which is needed because there are two columns that load modals.

The one modal is a simple ajax call which works fine, but the second modal which is supposed to load a nested dataTable has trouble capturing the parameters when the dataTable is initialized. I know the AJAX call works because I hardcoded the values inside the JSON provider program which renders the table as expected.

I have read several SO questions on the subject like this and have tried the following delegation methods in the callback in the dataTable loaded on the main PHP web page:

"fnDrawCallback": function( oSettings ) {
$('#table_001').on('click','.custs', function(e){
$($(this).data("target")+' .modal-body').load($(this).data("remote"));
$("#customers").modal('show');
}); 

AND

  $('#table_001 .custs').each(function(k,v) {
      $(this).on('click', function(e){
      $($(this).data("target")+' .modal-body').load($(this).data("remote"));
      $("#customers").modal('show');
      });   
  });
}

I even tried making the modal remote so I can initialize the nested dataTable on the remote web page's document.ready and pass the paramters via $_GET among many other things (including wrapping the initialize function in a setTimeout) and no matter what I do I can't prevent the dataTable from initializing before the modal has finished loading and the event listener gains control in order to capture the parameters needed to load the nested dataTable via its "ajax" : option.

ERROR

I know for certain the parameters are there because I can view them in the console.log:

//initialize customer table
var InitCustTable = function(aid){
   var oTable2 = $('#table_002').dataTable( {
    "processing": true,
    "serverSide": true,
    "deferRender": true,
    "bFilter": false,
    "bLengthChange": false,
    "ajax": {
        "url": "http://portal.hthackney.com/rest/WEB055L3",
        "data": function (d) { // pass additional pameters                   
                    d.user = user;  
                    d.instance = "HTHACKNEY"; 
                    d.fscode = fscode;
                    d.atnid = aid;
                    d.cols = "7"; // TOTAL <td> tags per <tr> tag
                    console.log(d);  
        },

I currently invoke the modal like this:

To me it seems like the Event Handlers are properly bound to the anchors so there must have to be some sort of workaround?

I use the TableAdvanced.init('Y'); method to intiialize the nested dataTable and inside the draw event handler I use TableAdvanced.init('N');. I have tried destroying the dataTables, usingbs.modal.hidden and/or destroying/initializing it on bs.modal.shown etc and nothing.

I have created a Singleton js app so I call this app inside the document.ready of the remote modal (modal_attendee_custs.php):

Events.customerModal('<? echo $_GET["atnid"]?>', '<? echo $_GET["whsno"] ?>');

I am almost to the point where I am going to just convert the dataTable into a boostrap grid table and hide the columns based on width. The only reason I really need the dataTable is to use the row-details drop-down column placeholder. I don't need any sort or filters outside of my parameters it just would be nice to solve the problem without a workaround. Any help would be greatly appreciated!

Rent Charter Buses Company
READ ALSO
how to add validation for Jstree Nodes to be checked?

how to add validation for Jstree Nodes to be checked?

I have a list of hierarchical jstree nodesthis tree is inside a form

468
jQuery plugin that filters elements. Need to have only one filter at a time

jQuery plugin that filters elements. Need to have only one filter at a time

So we have a very basic jQuery filter pluginIt shows/hides elements based on selected tags

247
Displaying Bootbox modal scrolled down hiding scrollbar

Displaying Bootbox modal scrolled down hiding scrollbar

Using "bootboxdialog" I present a long modal containing DataTable loading from external ajax

557
Highcharts drill down - x-Axis labels loss on drillup

Highcharts drill down - x-Axis labels loss on drillup

I am using highcharts for creating a drilldownchartWhen using a large dataset (~100), the labels on x-Axis of primary chart get lost when you drill up

476