Frappe-Datatable working in Firefox but not in Chrome

I am using frappe-datatable. On firefox its working but on chrome its giving error.
this is my code

var fired_button=10;
frappe.require([
"/assets/frappe/css/frappe-datatable.css",
"/assets/frappe/js/lib/clusterize.min.js",
"/assets/frappe/js/lib/Sortable.min.js",
"/assets/frappe/js/lib/frappe-datatable.js",
])

var headhtml='<script src="frappe-datatable.js"></script><div id="datatab"></div><div class="list-paging-area"><div class="row"><div class="col-xs-6"><div class="btn-group btn-group-paging"><button type="button" class="btn btn-default btn-sm btn-info" value="10">10</button><button type="button" class="btn btn-default btn-sm" value="20">20</button><button type="button" class="btn btn-default btn-sm" value="50">50</button><button type="button" class="btn btn-default btn-sm" value="100">100</button><button type="button" class="btn btn-default btn-sm" value="*">All</button></div></div>	</div></div>';
$("[data-fieldname='tab']").html(headhtml);

$("button").click(function() {
    fired_button = $(this).val();
	data_val()
});

var datatable = new DataTable('#datatab', {
  columns: ['Name', 'Position', 'Department'],
  data: data_val(),
});

function data_val(res){
var z=[]
frappe.call({
      method:"frappe.client.get_list",
        args: {
          doctype:"Raw Data",
            fields: ["name1","position","department"],
	limit_start:0,
  	limit_page_length: fired_button 
                    },
        async: false,
        callback: function(r) { 
	for(var i=0;i<(r.message).length;i++)
		{
		z.push(r.message[i]['name1']);
		z.push(r.message[i]['position']);
		z.push(r.message[i]['department']);
		}	
	}
   });  
var res = z.reduce((a, c, i) => {
  return i % 3 === 0 ? a.concat([z.slice(i, i + 3)]) : a;
}, []);
console.log(res)
var datatable = new DataTable('#datatab', {
  columns: ['Name', 'Position', 'Department'],
  data: res,
});
return res;
}

In chrome its giving error DataTable is not defined. Please replicate and give me issue whats wrong

frappe.require is an asynchronous action. You have to wait for it to load the DataTable library. Use it like this:

const assets = [
"/assets/frappe/css/frappe-datatable.css",
"/assets/frappe/js/lib/clusterize.min.js",
"/assets/frappe/js/lib/Sortable.min.js",
"/assets/frappe/js/lib/frappe-datatable.js",
]
frappe.require(assets, () => {
    // your DataTable code here
})
2 Likes

Check out jhk’s frappe.run_serially How to import DataTable in ERPNext form

Thanks