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
Have you tried event setup ?
If it doesn’t work, show me your code, so i can test on my machine.
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
Have you tried event setup?
frappe.ui.form.on("Other Recommendation", {
setup: function(frm) {
console.log('setup');
}
})
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
any help ?
Can you post your entire js?
// 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();}
}); });
}
1 Like
Still seeking to find a solution
Can you try something like this