ERPNext Foundation ERPNext Cloud Chat Blog Discuss Frappé* Donate

Datatable sometimes not loading

custom_script

#1

I am using ajax datatable and using onload trigger but sometimes it doesn’t loads on opening.
Tried to put a frm.refresh() function on page load but that also makes it run on an ifinite loop(infinite refresh). Any solution for solving so ??

Thanks


Include Frappe Data Table
#2

Have you tried event setup ?

If it doesn’t work, show me your code, so i can test on my machine.


#3

i am using onload event. Sometimes it does and sometimes it don’t. In console i checked the xhr requests and came to know that sometimes it is sending request for fetching data and sometimes it dont. So any suggestions ??

Tried onload, refresh events


#4

Have you tried event setup?

frappe.ui.form.on("Other Recommendation", {
	setup: function(frm) {
		console.log('setup');    		
        }
})

#5

Naah, Didn’t worked.

No data is being loaded in datatable and here’s the output in console

I am using datatables in 3 doctypes. By default on opening 1st for the first time it opens perfectly and same for 2nd and 3rd doctype (on first time opening). Here’s the console

But after opening first u go back and again open second, it doesn’t load untill i refresh the page.
Here’s the console when data is not loaded

Any help will be deeply appreciated


#6

any help ?


#7

Can you post your entire js?


#8
// Loading Library
frappe.require([
"assets/js/jquery.dataTables.min.js",
"assets/css/jquery.dataTables.min.css"
])

//Disabling Save
cur_frm.disable_save();

//HTML
    var headhtml="<div class='portlet-body'><div class='row'><div class='col-md-8 input-daterange pull-right'><div class='col-md-3'><input type='text' name='start_date' id='start_date' placeholder='From' class='form-control' readonly='true' /></div><div class='col-md-3'><input type='text' placeholder='To' name='end_date' id='end_date' class='form-control' readonly='true' /></div><div class='col-md-2'><a><span class='glyphicon glyphicon-search' id='search' title='Search' style='font-size:20px;color:blue;'></a> <a><span class='glyphicon glyphicon-refresh' id='reset' title='Reset' style='font-size:20px;color:blue;'></a></span></div></div></div><div class='table-responsive'><table id='dell' class='table table-bordered table-striped'><thead><tr><th>Customer Name</th><th>Customer Id</th><th>Market</th><th>SO Type</th><th>Pack</th><th>Category</th><th>Service Name</th><th>Customer Type</th><th>RA Name</th><th>Mobile</th><th>Start Date</th><th>End Date</th></tr></thead><tfoot><th></th><th>Customer ID</th><th></th><th></th><th>Pack</th><th></th><th></th><th>Customer Type</th><th>RA Name</th><th>Mobile</th><th></th><th></th></tfoot></div></div>";



$("[data-fieldname='preview']").html(headhtml);
cur_frm.refresh_field('preview');

//Search Button Processing
 $('#search').click(function(){
  var start_date = $('#start_date').val();
  var end_date = $('#end_date').val();
  if(start_date != '' && end_date !='')
  {
   $('#dell').DataTable().destroy();  
   datatableload_fun(start_date,end_date); 
  }
  else
  {
   frappe.show_alert('Kindly Select dates!',3);
  }
 }); 
 //Reset filter
 $('#reset').click(function(){
      location.reload();
 });

//Datatable
 frappe.ui.form.on("Active Clients","refresh",function(frm){
$(document).ready(function() {
//Datatable functions
$('#dell').DataTable().destroy();  
var tab_data=$('#dell').DataTable({
    
    "processing": true,
    "serverSide": true,
        "ajax": {
          "url": 'my api url',
          "dataType": "json",
          "type": "POST", 
          "data": function (d){ 
          d.apiname='active_datatable';   
          return JSON.stringify(d)
           },           
        },
    "fnDrawCallback": function( oSettings ) {
    console.log( 'DataTables has redrawn the table' );
    },      
    columns:[{"data": "customer_name"},{"data": "customer_id"},{"data": "market"},{"data": "sotype"},{"data": "pack"},{"data": "category"},{"data": "service_name"},{"data": "customer_type"},{"data": "r_name"},{"data": "mobile"},{"data": "start_date"},{"data": "end_date"}],
      order:[[ 2, "desc" ]]
     }); 
    //Date Filtering    
     $('#start_date').datepicker({
  todayBtn:'linked',
  format: "yyyy/mm/dd",
  autoclose: true,
  autoOpen: false,
language: 'en-US'
 });  
 $('#end_date').datepicker({
  todayBtn:'linked',
  format: "yyyy/mm/dd",
  autoclose: true,
  autoOpen: false,
language: 'en-US'

 }); 
 $("#dell_filter").css("display","none");    
 $('#dell tfoot th').each(function (){ 
  var title = $(this).text(); if (title != ''){ 
    if(title=='Customer ID' || title=='Pack' || title=='Customer Type' || title=='Mobile' || title=='RA Name')
        $(this).html('<input type="text" class="dt_search" style="width:80px;" placeholder="' + title + '" />');
      else
        $(this).html('<input type="text" class="dt_search" style="width:180px;" placeholder="' + title + '" />');
  } 
  });
 tab_data.columns().every(function () { var that = this; $('.dt_search',  this.footer()).on('keyup change', function (e){
   if (that.search() !== this.value) { e.preventDefault(); that.search(this.value).draw();}
 }); });

  });
});
});

function datatableload_fun(sdate,edate){ 
 
  var tab_data=$('#dell').DataTable({ 
    
    "processing": true,
    "serverSide": true,
    //"scrollY": 200,
     // "scrollY": true,
    //"dataType": "json",
      "ajax": {
          "url": 'my api url',
          "dataType": "json",
          "type": "POST", 
          "data": function (d){ 
          d.apiname='active_datatable';         
          d.start_date=sdate;
          d.end_date=edate;     
          return JSON.stringify(d)
           },           
        },              
    columns:[{"data": "customer_name"},{"data": "customer_id"},{"data": "market"},{"data": "sotype"},{"data": "pack"},{"data": "category"},{"data": "service_name"},{"data": "customer_type"},{"data": "r_name"},{"data": "mobile"},{"data": "start_date"},{"data": "end_date"}],
    order:[[ 2, "desc" ]]
     }); 
$('#start_date').datepicker({
  todayBtn:'linked',
  format: "yyyy/mm/dd",
  autoclose: true,
language: 'en-US'
 });  
 $('#end_date').datepicker({
  todayBtn:'linked',
  format: "yyyy/mm/dd",
  autoclose: true,
language: 'en-US'
 });   
 $("#dell_filter").css("display","none");    
 $('#dell tfoot th').each(function (){ 
  var title = $(this).text(); if (title != ''){ 
    if(title=='Customer ID' || title=='Pack')
        $(this).html('<input type="text" class="dt_search" style="width:80px;" placeholder="' + title + '" />');
      else
        $(this).html('<input type="text" class="dt_search" style="width:180px;" placeholder="' + title + '" />');
  } 
  });
 tab_data.columns().every(function () { var that = this; $('.dt_search',  this.footer()).on('keyup change', function (e){
   if (that.search() !== this.value) { e.preventDefault(); that.search(this.value).draw();}
 }); });

 }

#9

Still seeking to find a solution


#10

Can you try something like this