Frappe-Datatable working in Firefox but not in Chrome

Frappe Framework Custom Script
1

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

2

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
3

Check out jhk’s frappe.run_serially How to import DataTable in ERPNext form - #7 by tmatteson

4

Thanks