I have an issue with tabulator (4.9.1) and the pagination, when I try to configure it with remote pagination and ajaxUrlGenerator function, it never pass into the generator function, after investigating the code I've noticed that the code of tabulator do the following :
Tabulator.prototype._loadInitialData = function () {
var self = this;
if (self.options.pagination && self.modExists("page")) {
self.modules.page.reset(true, true);
if (self.options.pagination == "local") {
if (self.options.data.length) {
self.rowManager.setData(self.options.data, false, true);
} else {
if ((self.options.ajaxURL || self.options.ajaxURLGenerator) && self.modExists("ajax")) {
self.modules.ajax.loadData(false, true).then(function () {}).catch(function () {
if (self.options.paginationInitialPage) {
self.modules.page.setPage(self.options.paginationInitialPage);
}
});
return;
} else {
self.rowManager.setData(self.options.data, false, true);
}
}
if (self.options.paginationInitialPage) {
self.modules.page.setPage(self.options.paginationInitialPage);
}
} else {
if (self.options.ajaxURL) {
self.modules.page.setPage(self.options.paginationInitialPage).then(function () {}).catch(function () {});
} else {
self.rowManager.setData([], false, true);
}
}
} else {
if (self.options.data.length) {
self.rowManager.setData(self.options.data);
} else {
if ((self.options.ajaxURL || self.options.ajaxURLGenerator) && self.modExists("ajax")) {
self.modules.ajax.loadData(false, true).then(function () {}).catch(function () {});
} else {
self.rowManager.setData(self.options.data, false, true);
}
}
}
};
using the ajaxURLGenerator with the 'local' configuration makes it work correctly in remote.
But then it doesn't do the progressive pagination and doesn't pass the parameters correctly in the ajaxURLGenerator function, probably due to the parsing mecanism that is not called in 'local' mode for the data :
Page.prototype.trigger = function () {
var _this81 = this;
var left;
return new Promise(function (resolve, reject) {
switch (_this81.mode) {
case "local":
left = _this81.table.rowManager.scrollLeft;
_this81.table.rowManager.refreshActiveData("page");
_this81.table.rowManager.scrollHorizontal(left);
_this81.table.options.pageLoaded.call(_this81.table, _this81.getPage());
resolve();
break;
case "remote":
case "progressive_load":
case "progressive_scroll":
_this81.table.modules.ajax.blockActiveRequest();
_this81._getRemotePage().then(function () {
resolve();
}).catch(function () {
reject();
});
break;
default:
console.warn("Pagination Error - no such pagination mode:", _this81.mode);
reject();
}
});
};
At the end it is loading, but all the data when the server return just a json list, but it fail when receiving the object expected for the remote pagination.
Does anyone had the same issue with remote pagination and ajaxURLGenerator? Anyone has an idea how to solve it, without modifying the library?
Thanks in advance
Related
I have to JavaScript class called GKChart :-
class GKChart {
constructor(data) {
try {
console.info("Enter: Chart Designing initialize function");
this.chartID = data.id;
this.chartData = data.data;
this.chartCall = new chartCalling();
this.load = this.initialize(this.chartData.config.chartType, this.chartData, this.chartID, this.chartCall);
this.load();
this.resize(this.load);
console.info("Exit: Chart Designing initialize function");
} catch (err) {
console.log("Error Found in GKChart Constructoru", err);
}
}
initialize(chartTypeLoad, chartDataLoad, chartIDLoad, chartCallLoad) {
try {
console.log("Start : initialize");
let chartType = chartTypeLoad;
let chartData = chartDataLoad;
let chartID = chartIDLoad;
var chartCall = chartCallLoad;
/*Define chart css properties*/
var loadIt = function() {
console.warn("Resize Load : "+chartID);
css(document.querySelector("#" + chartID), {
'display': 'block'
});
switch (chartType) {
case "line":
{
chartCall.lineChart(chartData, chartID);
break;
}
case 'bar':
{
chartCall.barChart(chartData, chartID);
break;
}
default:
{
console.log("Invalid choice of chart");
break;
}
}
}
return loadIt;
console.log("End : initialize");
} catch (err) {
console.error("Exception occurred in Home module: " + err.message);
}
}
resize(loadFun) {
try {
window.addEventListener("resize", function (e) {
window.resizeEvt;
window.addEventListener("resize", function () {
clearTimeout(window.resizeEvt);
window.resizeEvt = setTimeout(function () {
loadFun();
console.warn("ResizeCalled");
}, 250);
});
});
} catch (err) {
console.log("error occured while resizing the chart");
}
}
}
And i want to call this class for more then 20 instances with some dome data
new GKChart({id: "stepChartComparision", data: stepChartComparision});
new GKChart({id: "stepChartFill", data: stepChartFill});
new GKChart({id: "stepChartComparisionFill", data: stepChartComparisionFill});
...
...
...
So for these all calls i am drawing some canvas charts.
To make these canvas charts responsive i have to draw every chart for resize. So i have tried to create a closure function to keep a copy of "this.load" function, but as i can see its only calling once for the last instance.
Please help me to get it for every instance of call, or in other words i want to resize every singe canvas chart.
Thank you.
My Closure is working properly but due to ASYNC call of setTimeout function, only last call is running, but when i have removed this and tried to run it, its working properly.
Ans Code is :-
resize(loadFun) {
try {
window.addEventListener("resize", function (e) {
window.resizeEvt;
window.addEventListener("resize", function () {
loadFun();
});
});
} catch (err) {
console.log("error occured while resizing the chart");
}
}
I am working on meteor. I need to implement infinite scrolling on my data inside data list. I don't know how to implement it. I have seen some infinite scrolling packages at atmosphere but i didn't get. As I am new to this technology I didn't understand how to use it.
Template.medicine.events({
'change #Search_Criteria':function (e) {
event.preventDefault();
myvalue=$(e.target).val();
console.log(myvalue);
Meteor.call('searched_medicines',myvalue,function(err,res)
{
if(res)
{
console.log(res);
SessionStore.set("Medicinevalue",res);
}
else {
console.log(err);
}
});
},
'input #search':function (event, template) {
d = $(event.currentTarget).val();
console.log(d);
Meteor.call('fetchValues',myvalue,d,function(error,response)
{
if(response)
{
SessionStore.set("Medi_values",response);
}
else {
console.log(err);
}
});
}
});
Template.medicine.helpers({
// Here will be helper for displaying data in client side//
searched_val:function(){
var a= SessionStore.get("Medicinevalue");
// console.log(a);
return a;
},
myfunction:function(){
var mydata=SessionStore.get("Medi_values");
return mydata;
}
});
Thanks in Advance!!!!!
I am trying to pass an argument down the tree to the successResponse errorResponse functions and display the value in the console before I do any work with it.
Currently I am getting an empty value in the console so there must be something missing in my code. I am thinking its a return statement but when I attempt this I get no result.
Any help would be greatly appreciated.
The console.log is below.
successResponse: function (getSel) {
requestResponses.errorCode = false;
requestResponses.redLight.removeClass(requestResponses.redBright);
requestResponses.greenLight.addClass(requestResponses.greenBright);
console.log(getSel);
},
Here is the full version of my code
var requestResponses = {
greenLight: $('.cp_trafficLight_Light--greenDimmed'),
redLight: $('.cp_trafficLight_Light--redDimmed'),
greenBright: 'cp_trafficLight_Light--greenBright',
redBright: 'cp_trafficLight_Light--redBright',
settings: {
flashError: 400,
requestTime: 10000
},
init: function (url, getSel) {
requestResponses.url = url;
requestResponses.getResponse(requestResponses.url, getSel);
setInterval(function () {
if (requestResponses.errorCode === true) {
requestResponses.redLight.toggleClass(requestResponses.redBright);
}
}, requestResponses.settings.flashError);
},
successResponse: function (getSel) {
requestResponses.errorCode = false;
requestResponses.redLight.removeClass(requestResponses.redBright);
requestResponses.greenLight.addClass(requestResponses.greenBright);
console.log(getSel);
},
errorResponse: function () {
requestResponses.greenLight.removeClass(requestResponses.greenBright);
},
getResponse: function (serverURL, getSel) {
$.ajax(serverURL, {
success: function (getSel) {
requestResponses.errorCode = false;
requestResponses.successResponse(getSel);
},
error: function () {
requestResponses.errorCode = true;
requestResponses.errorResponse();
},
complete: function () {
setTimeout(function () {
requestResponses.getResponse(requestResponses.url);
}, requestResponses.settings.requestTime);
}
});
},
errorCode: false
}
requestResponses.init('/status');
Appreciate any help.
Your code looks fine. Make sure that the server actually responds with data. The problem is most likely on back-end.
I am using Graphicsmagick and also installed the required plugins cfs:gm and libjpeg-dev, and I use FILE SYSTEM adapter here is my code
Avatar = new FS.Collection("avatars", {
stores: [
new FS.Store.FileSystem("avatars",
{
path: '~/uploads',
beforeWrite: function(fileObj) {
return {
extension: 'jpg',
type: 'image/jpg'
};
},
transformWrite:function(fileObj, readStream, writeStream) {
gm(readStream, fileObj.name()).resize('200', '200').stream('JPG').pipe(writeStream);
}
})
],
filter: {
maxSize:1000000,
allow: {
contentTypes: ['image/*']
}
}
});
Avatar.allow({
insert: function (userId, doc) {
if(doc.owner != userId)
return false;
else
return true;
},
remove: function (userId,doc) {
if(doc.owner != userId)
return false;
else
return true;
},
download: function () {
return true;
},
update: function (userId,doc) {
if(doc.owner != userId)
return false;
else
return true;
}
});
But it doesn't seem to convert at all instead I get some empty file, when I try to access it from file url here is what I get
Error in method "/cfs/files/:value/:value/", Error: Error: start must be <= end
at new ReadStream (fs.js:1489:13)
at Object.fs.createReadStream (fs.js:1450:10)
at Object.FS.StorageAdapter.createReadStream (packages/cfs_filesystem/packages/cfs_filesystem.js:67:1)
at Object.self.adapter.createReadStreamForFileKey (packages/cfs_storage-adapter/packages/cfs_storage-adapter.js:83:1)
at [object Object].FS.Transform.createReadStream (packages/cfs_storage-adapter/packages/cfs_storage-adapter.js:392:1)
at Object.self.adapter.createReadStream (packages/cfs_storage-adapter/packages/cfs_storage-adapter.js:93:1)
at Object.httpGetHandler (packages/cfs_access-point/packages/cfs_access-point.js:408:1)
at Object.accessPoint.get (packages/cfs_access-point/packages/cfs_access-point.js:675:1)
at packages/cfs_http-methods/packages/cfs_http-methods.js:582:1
The code is good as long as I don't convert images,am I missing something here?
Same problem, I have similar code :-(
edit:
I had an error in
{path: '~/uploads'}, (with } incorrect)
connectLoadRenderStoreAndGetCheckBox: function () {
this.someStore = new Ext.data.Store({
proxy:
reader:
]),
sortInfo: { field: , direction: }
});
this.someStore.load(
{
params:
{
}
});
//I left out parameters; lets assume they are valid and work.
this.someStore.on("load", this._renderColumns, this);
return ([this._getCheckBox()]);
}
On 'load' I want to both execute the function this._renderColumns (which uses the data from the server) and also return a checkbox (which also uses data from the server).
What is a quick & easy way to only return the checkbox after the data is loaded?
_getCheckBox: function () {
if (UseDefault == "y") {
return new Ext.form.Checkbox(
{
fieldLabel:,
itemCls:,
checked: true,
labelStyle:
});
}
else {
return new Ext.form.Checkbox(
{
fieldLabel:,
itemCls:,
checked: false,
labelStyle:
});
}
},
_renderColumns: function () {
var record2 = this.something.something2(2);
UseDefault = record2.get("UseDefault");
}