Develop Reference

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

Can't finish transaction in ionic-native/in-app-purchase-2

I'm developing app with Ionic 4 / Angular 8 / Cordova
I have installed In App Purchase 2 and setup it. Apple Developer and Sandbox accounts are ok.
Product registration is ok:
registerProduct() {
this.iap.verbosity = this.iap.DEBUG;
this.iap.register({
id: MONEYCOMBO_KEY,
type: this.iap.CONSUMABLE
})
this.registerHandlersForPurchase(MONEYCOMBO_KEY)
this.product = this.iap.get(MONEYCOMBO_KEY)
this.iap.refresh()
this.iap.when(MONEYCOMBO_KEY).updated((p) => {
this.product = p
this.title = p.title
this.price = p.price
})
}
Event handlers:
registerHandlersForPurchase(productId) {
let self = this.iap;
this.iap.when(productId).updated(function (product) {
if (product.loaded && product.valid && product.state === self.APPROVED && product.transaction != null) {
product.finish();
}
});
this.iap.when(productId).registered((product: IAPProduct) => {
// alert(` owned ${product.owned}`);
});
this.iap.when(productId).owned((product: IAPProduct) => {
console.error('finished')
product.finish();
});
this.iap.when(productId).approved((product: IAPProduct) => {
// alert('approved');
product.finish();
});
this.iap.when(productId).refunded((product: IAPProduct) => {
// alert('refunded');
});
this.iap.when(productId).expired((product: IAPProduct) => {
// alert('expired');
});
}
Purchase method:
buyMoneyCombo(form: NgForm) {
this.registerHandlersForPurchase(MONEYCOMBO_KEY)
this.date = form.value.date
this.iap.order(MONEYCOMBO_KEY)
this.iap.refresh()
}
The problem:
Console says:
"InAppPurchase[js]: product test has a transaction in progress: 1000000628239595"
Transaction cannot be finished. Why?

So, after a weeks researching, I found the solution.
And there is no problem:
Message from Apple is displaying after transaction is finished:
"InAppPurchase[js]: product test has a transaction in progress: 1000000628239595"
And all purchase logic must be declared inside:
this.iap.when(MONEYCOMBO_KEY).approved((product: IAPProduct) => {
product.finish()
this.getMoney()
})

Ionic 3 : Close modal with phone's back button

I try to override the phone's back button in my Ionic App.
This code permit me to open a modal to close the App if I'm not in a page, else close the page.
But this doesn't allow me to close an opened modal. How can I detect if I'm in a modal to close it ?
platform.registerBackButtonAction(() => {
let nav = app.getActiveNav();
let activeView: ViewController = nav.getActive();
console.log(activeView);
if(activeView != null){
if(nav.canGoBack()) {
activeView.dismiss();
} else{
let alert = this.alertCtrl.create({
title: this.pdataManager.translate.get("close-app"),
message: this.pdataManager.translate.get("sure-want-leave"),
buttons: [
{
text: this.pdataManager.translate.get("no"),
handler: () => {
this.presentedAlert = false;
},
role: 'cancel',
},
{
text: this.pdataManager.translate.get("yes"),
handler: () => {
this.presentedAlert = false;
this.platform.exitApp();
}
}
]
});
if(!this.presentedAlert) {
alert.present();
this.presentedAlert = true;
}
}
}
});
}

1.Import IonicApp:
import {IonicApp } from 'ionic-angular';
2.Add to your constructor:
private ionicApp: IonicApp
3.Inside your platform.registerBackButtonAction add:
let activeModal=this.ionicApp._modalPortal.getActive();
if(activeModal){
activePortal.dismiss();
return;
}
I found the answer here :
https://github.com/ionic-team/ionic/issues/6982

You can give page name to your modal and you can access it from anywhere in app. Try this..
import { App } from 'ionic-angular';
constructor(public app: App){
}
platform.registerBackButtonAction(() => {
let nav = this.app.getActiveNav();
let view = nav.getActive().instance.pageName;
if (view == YOU_PAGE_NAME) {
//You are in modal
} else {
//You are not in modal
}
});
Inside your modal
pageName = 'YOU_PAGE_NAME';

In the end I have this for my back button:
constructor(private platform: Platform, private config: ConfigService, private nfc: NfcService, private alertCtrl: AlertController,
public events: Events, private translate: TranslateService, private fetch: ConfigFetchService, private menuList: MenuList, private ionicApp: IonicApp,
private menuCtrl: MenuController
) {
platform.ready().then(() => {
this.config.pullVersion();
let ready = true;
platform.registerBackButtonAction(() => {
Logger.log("Back button action called");
let activePortal = ionicApp._loadingPortal.getActive() ||
ionicApp._modalPortal.getActive() ||
ionicApp._toastPortal.getActive() ||
ionicApp._overlayPortal.getActive();
if (activePortal) {
ready = false;
activePortal.dismiss();
activePortal.onDidDismiss(() => { ready = true; });
Logger.log("handled with portal");
return;
}
if (menuCtrl.isOpen()) {
menuCtrl.close();
Logger.log("closing menu");
return;
}
let view = this.nav.getActive();
let page = view ? this.nav.getActive().instance : null;
if (page && page.isRootPage) {
Logger.log("Handling back button on a home page");
this.alertCtrl.create({
title: translate.instant('Confirmation'),
message: translate.instant('Do you want to exit?'),
buttons: [
{
text: translate.instant('Cancel'),
handler: () => {
}
},
{
text: translate.instant('OK'),
handler: () => {
platform.exitApp();
}
}
]
}).present();
}
else if (this.nav.canGoBack() || view && view.isOverlay
) {
Logger.log("popping back");
this.nav.pop();
}
else if (localStorage.getItem('is_logged_in')
) {
Logger.log("Returning to home page");
this.nav.setRoot(HomePage);
}
else if (!localStorage.getItem('is_logged_in')) {
Logger.log("Not yet logged in... exiting");
platform.exitApp();
}
else {
Logger.log("ERROR with back button handling");
}
}, 1);
....

Vue cannot submit the form and return the error RangeError: Maximum call stack size exceeded

I intend to submit the form and validate the content of the form.
but it always return
RangeError: Maximum call stack size exceeded
here is the code:
<template>
<div class="content">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="用户名" prop="user">
<el-input type="text" v-model="ruleForm.user" auto-complete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" #click="submitForm('ruleForm')">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
var validateUser = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入用户名'));
}
else {
if (this.ruleForm.user !== '') {
this.$refs.ruleForm.validateField('user');
}
callback();
}
};
return {
ruleForm: {
user: '',
},
rules: {
user: [{validator: validateUser, trigger: 'blur'}],
}
};
},
methods: {
submitForm(formName) {
var vm = this
this.$refs[formName].validate((valid) => {
if (valid) {
submit()
}
else {
return false
}
})
},
submit:function() {
if (vm.ruleForm.user == 'admin' ) {
console.log('succeed')
}
return true
}
}
}
</script>
the process of the code is very easy but it doesn't work and I have google that error may come from the recursive call of the function
methods: {
submitForm(formName) {
var vm = this
this.$refs[formName].validate((valid) => {
if (valid) {
submit()
}
else {
return false
}
})
},
however, I just don't know how to fix it

I have found my mistakes - this.$refs.ruleForm.validateField('user'); it shouldn't be validateField('user') , that's why this part will be call infinitely and I replace this code with callback() so that it will return directly

Vue JS unable to display data

I'm trying to display data in my vue component and I have an array that has object on it. If I try to use
<div class="bar">
{{playersStats[0]}}
</div>
it displays
{ "GP": 13, "GS": 6, "MPG": 20.74, "PPG": 12.85, "FGM": 4.46, "FGA": 9.77, "FGP": 0.46 }
but if I try using
<div class="bar">
<span v-if="playersStats[0]">{{playersStats[0].GS}}</span>
</div>
EDITED Javascript:
export default {
data: function(){
return {
showPlayersSelection: true,
selectedPlayers: [],
playersStats: []
}
},
methods: {
selectPlayers(player) {
if(this.selectedPlayers.length < 2){
this.selectedPlayers.push(player);
if(this.selectedPlayers.length == 2){
this.getPlayerStats(this.selectedPlayers[0][0], this.selectedPlayers[1][0]);
this.showPlayersSelection = false;
}
}
return false;
},
getPlayerStats(player1, player2) {
let self = this;
axios.get(config.API.URL + config.API.STATS, {
params: {
'player1Id': player1,
'player2Id': player2
}
})
.then( (response) => {
if(response.status == 200 && typeof(response.data) == 'object'){
self.playersStats = [];
self.playersStats.push(response.data[0][0]);
self.playersStats.push(response.data[1][0]);
}
});
},
}
}
It displays nothing even in DOM. How can I be able to display the data?

<span v-if="playersStats[0]">{{playersStats[0]["GS"]}}</span>
maybe u need this?