How to use infinite scrolling in meteor - javascript

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!!!!!

Related

Tabulator not working with remote pagination and ajaxURLGenerator

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

Closure Function for every class instance (JavaScript)

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");
}
}

angular doesn't print data after scanning qr

I'm working with NativeStorage and barcodeScanner plugins for cordova.
The capture works well, and I receive the QRCode, but for any reason angular doesn't print it.
After working a lot on my code, I'm not able to do a valid callback, so angular can print it binding the data.
Here bellow I paste the code.
read.js
(function() {
'use strict';
var read = angular.module('app.read', ['monospaced.qrcode']);
read.controller('ReadController', [
function() {
var data = this;
var qr = function(string) {
data.code = string;
console.log(string);
};
cordova.plugins.barcodeScanner.scan(
function(result) {
if (!result.cancelled) {
if (result.format === "QR_CODE") {
(function(cb) {
cb(result.text);
})(qr);
NativeStorage.getItem("historic", function(d) {
var storage = JSON.parse(d);
storage.push(result.text);
NativeStorage.setItem("historic", JSON.stringify(storage), function(response) {}, function(e) {
console.log(e);
});
}, function(e) {
window.alert("Scanning failed: " + e);
});
}
}
},
function(e) {
window.alert("Scanning failed: " + e);
}, {
"preferFrontCamera": true, // iOS and Android
"showFlipCameraButton": true, // iOS and Android
"prompt": "Place a barcode inside the scan area", // supported on Android only
"formats": "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED
"orientation": "portrait" // Android only (portrait|landscape), default unset so it rotates with the device
}
);
}
]);
}());
read.html
<div ng-controller="ReadController as myRead">
<qrcode version="5" error-correction-level="H" size="200" data="{{myRead.code}}" href="{{myRead.code}}"></qrcode>
{{myRead.code}}
</div>
Just adding some extra tests I have done before, I just missed the barcodeScanner.scan process and I did just the storage as I show bellow:
NativeStorage.getItem("historic", function (d) {
var storage = JSON.parse(d);
storage.push('https://google.es');
data.code = 'https://google.es';
NativeStorage.setItem("historic", JSON.stringify(storage), function (response) {}, function (e) {
console.log(e);
});
}, function (e) {
window.alert("Scanning failed: " + e);
});
Could you show me where am I wrong?
Thanks in advice.
A qualified guess is that the callbacks from cordova.plugins.barcodeScanner.scan doesn't trigger AngularJS' digest cycle, which means no dirty checking will be performed, no changes will be detected and the UI won't be updated.
Try wrapping the code in the success callback in $apply:
function(result) {
$scope.$apply(function() {
if (!result.cancelled) {
if (result.format === "QR_CODE") {
(function(cb) {
cb(result.text);
})(qr);
NativeStorage.getItem("historic", function(d) {
var storage = JSON.parse(d);
storage.push(result.text);
NativeStorage.setItem("historic", JSON.stringify(storage), function(response) {}, function(e) {
console.log(e);
});
}, function(e) {
window.alert("Scanning failed: " + e);
});
}
}
});
}

How can an Ember-data PromiseArray be rejected?

I have a list of a couple thousand people that has a search and filter functionality. The search box is doing a google like search as you type and there is a drop down to filter by the person's status. If you select the drop down and start typing quickly sometimes the results do not come back in the same order and the last one to return is rendered without the status filter, or without the search.
I would like to reject the previous promise if it is still pending any time a new search is fired. The problem is, the last search is being stored as a PromiseArray, which I can call reject on, but it does not seem to actually reject the promise.
I am using ember 1.5.1 and ember-data 1.0.0.beta.7 on ember-cli 0.0.28
Here is the generated person search controller:
Controller = Em.ArrayController.extend({
lastFetchedPage: 1,
searchTerms: "",
isFreshSearch: false,
statusToFilterBy: null,
statuses: (Em.computed(function() {
return this.get("store").find("status");
})).property(),
statusToFilterByDidChange: (function() {
return this.conductSearch();
}).observes("statusToFilterBy"),
searchTermsDidChange: (function() {
this.haltCurrentSearch();
this.set("searchTermsDirty", true);
return Em.run.debounce(this, this.conductSearch, 750);
}).observes("searchTerms"),
conductSearch: function() {
this.set("lastFetchedPage", 1);
this.set("isFreshSearch", true);
return this.fetchPeople();
},
haltCurrentSearch: function() {
if (this.get("currentSearch.isPending")) {
this.get("currentSearch").reject(new Error("Terms outdated"));
}
},
fetchPeople: function() {
var search;
search = this.get("store").find("person-summary", {
page: this.get("lastFetchedPage"),
terms: this.get("searchTerms"),
status_id: this.get("statusToFilterBy.id")
});
search.then((function(_this) {
return function(personSummaries) {
return _this.displayResults(personSummaries);
};
})(this));
this.set("currentSearch", search);
return this.set("searchTermsDirty", false);
},
displayResults: function(personSummaries) {
if (this.get("isFreshSearch")) {
this.set("isFreshSearch", false);
return this.set("model", personSummaries);
} else {
return personSummaries.forEach((function(_this) {
return function(personSummary) {
return _this.get("model").addRecord(personSummary);
};
})(this));
}
}
bottomVisibleChanged: function(person) {
if (person === this.get("lastPerson")) {
this.incrementProperty("lastFetchedPage");
return this.fetchPeople();
}
},
lastPerson: (Em.computed(function() {
var people;
people = this.get("model.content");
return people[people.length - 1];
})).property("model.#each")
});

EmberJS: Refreshing a model?

Hello again everyone.
EDIT: I want to emphasize that I can find no docs on the solution for this.
I am using a route to perform a search query to my server. The server does all the data logic and such and returns a list of objects that match the keywords given. I am taking those results and feeding them to the model so that I can use the {{#each}} helper to iterate over each result.
The problem I am having is that the model does not want to refresh when the searchText (search input) changes. I've tried several things. I'm not worried about creating too many ajax requests as my server performs the search query in 2ms. Here's what I have now.
App.SearchView = Ember.View.extend({...
EDIT:
Thank you for the answer.
App.SearchView = Ember.View.extend({
didInsertElement: function () {
this._super();
Ember.run.scheduleOnce('afterRender', this, this.focusSearch);
},
focusSearch: function () {
$(".searchInput").focus().val(this.get("controller").get('searchTextI'));
}
});
App.SearchRoute = Ember.Route.extend({
model: function () {
return this.controllerFor('search').processSearch();
}
});
App.SearchController = Ember.ArrayController.extend({
searchTextI: null,
timeoutid: null,
processid: null,
updateSearch: function () {
if(this.get('timeoutid')) {clearTimeout(this.get('timeoutid')); }
var i = this.get('searchTextI');
var sc = this;
clearTimeout(this.get('processid'));
this.controllerFor('index').set('searchText', i); //set the search text on transition
if(i.length < 3) {
this.set('timeoutid', setTimeout(function () {
sc.controllerFor('index').set("transitioningFromSearch", true);
sc.transitionToRoute('index');
}, 1500));
} else {
var self = this;
this.set('processid', setTimeout(function() {
self.processSearch().then(function(result) {
self.set('content', result);
});
}, 1000));
}
}.observes('searchTextI'),
processSearch: function () {
return $.getJSON('http://api.*********/search', { 'token': guestToken, 'search_query': this.get('searchTextI') }).then(function(data) { if(data == "No Results Found.") { return []; } else { return data; } }).fail(function() { return ["ERROR."]; });
}
});
Don't observe anything within a route and don't define any computed properties. Routes are not the place for these. Apart from that, the model doesn't fire because controller is undefined.
One way to achieve what you want:
App.SearchRoute = Ember.Route.extend({
model: function () {
this.controllerFor('search').searchQuery();
}.observes('controller.searchText') //not triggering an ajax request...
});
App.SearchController = Ember.ArrayController.extend({
searchQuery: function() {
return $.getJSON('http://api.**************/search', { 'token': guestToken, 'search_query': t }).fail(function() {
return null; //prevent error substate.
});
}
onSearchTextChange: function() {
var controller = this;
this.searchQuery().then(function(result) {
controller.set('content', result);
});
}.observes('searchText')
});
Putting an observes on the model hook is not going to do anything. You should simply do what you were thinking of doing and say
processSearch: function () {
this.set('content', $.getJSON....);
}

Categories

Resources