I want to update 1 column periodically after loading datatable

arsalansiddiqui

i have update my theme to bootstrap 5 and want to reuse this module.

so far i have fetched the data but i'm unable to assign data to cell.

my selected datatable modules:

<link href="https://cdn.datatables.net/v/bs5/dt-1.13.4/b-2.3.6/b-colvis-2.3.6/r-2.4.1/rg-1.3.1/sc-2.1.1/sl-1.6.2/sr-1.2.2/datatables.min.css" rel="stylesheet" />

<script defer src="https://cdn.datatables.net/v/bs5/dt-1.13.4/b-2.3.6/b-colvis-2.3.6/r-2.4.1/rg-1.3.1/sc-2.1.1/sl-1.6.2/sr-1.2.2/datatables.min.js"></script>

error i'm getting:

Uncaught TypeError: dt_tbl_managers_1.cell is not a function
    at Object.success (?p=managers/list/v1:914:34)
    at c (vendor.min.js:6:41168)
    at Object.fireWith [as resolveWith] (vendor.min.js:6:41916)
    at T (vendor.min.js:6:92788)
    at XMLHttpRequest.<anonymous> (vendor.min.js:6:95256)

this is what my table looks like:
https://live.datatables.net/mocujaxo/2/edit

the data is coming from ajax not in the example

when the table is loaded, i added row id with id of manager then store all manager id in array, then when sub child button is clicked i pass that to ajax then it return the data

{"key":["1327","1192","938","337","335"],"value":["181","0","0","483","0"]}

the data is returning like this

function crawlData( midArray, ctype ){

console.log("crawlData "+midArray);

//
$.ajax({
  url: thisDomainProtocol+'//'+thisDomain+'/api/webapp/v3/managers/tbl-mlist-ccounts.php',
  type: "POST",
  data: { 
    midArray: JSON.stringify(midArray),
    ctype: ctype,
  },
  success: function (data, status, xhr) {

    if(data){
      console.log("320: Data Available");
      var data_array = JSON.parse(data);
      console.log("322: "+data_array);
      for (var i = 0; i < data_array.key.length; i++) {
      var key = data_array.key[i];
      var value = data_array.value[i];

      var sc = dt_tbl_managers_1.cell( '#row-' + key, 8 );
      //sc.data( value ).invalidate();
      }

    }

  },// SUCCESS:END

  error: function(xhr, status, error) {
  // Handle errors
  console.error(error);
  },

  cache: false,
  timeout: 10000
  });

//

}

var sc = dt_tbl_managers_1.cell( '#row-' + key, 8 ); this line produce error, when i'm working with bootstrap 3 it is working but now it is not, i try to change datatable version but no gain

arsalansiddiqui

arsalansiddiqui

arsalansiddiqui

arsalansiddiqui

i added a complete block in datatable ajax which execute this function after datatable load

"complete": function(xhr, textStatus) {
    if(xhr.status == 200 && textStatus == "success") {

    crawlData(mid_array,2);//FETCH CC

kthorngren

dt_tbl_managers_1.cell is not a function

Guessing the error is explained in this FAQ.

Kevin

arsalansiddiqui

I'm using $().DataTable()

var dt_tbl_managers_1 = $('#dt_tbl_managers_1').DataTable({

as i'm always using this way

kthorngren

var dt_tbl_managers_1 = $('#dt_tbl_managers_1').DataTable({

That should work. However you are getting:

dt_tbl_managers_1.cell is not a function

Which suggests the dt_tbl_managers_1 variable is something else within the scope of the ajax request. Maybe try this in the success function:

var dt_tbl_managers_1 = $('#dt_tbl_managers_1').DataTable();
var sc = dt_tbl_managers_1.cell( '#row-' + key, 8 );

For us to help troubleshoot well will need to see the problem. If you still need help then please post a link to your page or a test case replicating the issue.

Kevin

arsalansiddiqui

$.ajax({
  url: thisDomainProtocol+'//'+thisDomain+'/api/webapp/v3/managers/tbl-mlist-ccounts.php',
  type: "POST",
  data: { 
    midArray: JSON.stringify(midArray),
    ctype: ctype,
  },
  success: function (data, status, xhr) {

    var dt_tbl_managers_1 = $('#dt_tbl_managers_1').DataTable();

    if(data){
      console.log("320: Data Available");
      var data_array = JSON.parse(data);
      console.log("322: "+data_array);
      for (var i = 0; i < data_array.key.length; i++) {
      var key = data_array.key[i];
      var value = data_array.value[i];

      var sc = dt_tbl_managers_1.cell( '#row-' + key, 9 );
      sc.data( value ).invalidate();
      }

    }

  },// SUCCESS:END

this way it is working

** var dt_tbl_managers_1 = $('#dt_tbl_managers_1').DataTable();
**

but i dont understand why is it happening ? because

i use it to number index and it is workign by dt_tbl_managers_1 directly

kthorngren

but i dont understand why is it happening ? because

As I said within the scope of the ajax success function the variable is something different. To understand you will need to trace through and debug the code.

Kevin

arsalansiddiqui

this same thing i've done previously and that works, any way i've created the varable before document.ready now it is working