Here is my kitchen script
frappe.provide('SmartPOS.POS');
var pos = undefined
frappe.pages['kitchen'].on_page_load = function(wrapper) {
frappe.ui.make_app_page({
parent: wrapper,
title: __('kitchen View'),
single_column: true
});
frappe.require('/assets/smartpos/js/pos_controller.js', function() {
//create global scope
this.pos = new SmartPOS.POS.Controller(wrapper);
this.pos.change_amount('first called method');//this calling works
});
//read global scope variable
this.pos.change_amount('second call method');// Raise an error in console
};
frappe.pages['kitchen'].refresh = function(wrapper) {
if (document.scannerDetectionData) {
onScan.detachFrom(document);
wrapper.pos.wrapper.html("<h1>Hello</h1>");
}
};
here is my controller class
SmartPOS.POS.Controller = class {
constructor(wrapper) {
this.wrapper = $(wrapper).find('.layout-main-section');
this.page = wrapper.page;
console.log(this.page);
}
change_amount(amount){
console.log(`${amount}`);
}
};
When I ran the page I got only one time called the first one and show me an error with the second called.
TypeError: Cannot read properties of undefined (reading ‘change_amount’)
at frappe.pages.kitchen.on_page_load (kitchen.js:14:11)
at Page2.trigger_page_event (pageview.js:101:15)
at new Page2 (pageview.js:88:8)
at pageview.js:50:6
at Object.callback (pageview.js:33:6)
at Object.callback [as success_callback] (request.js:83:16)
at 200 (request.js:127:34)
at Object. (request.js:279:6)
at fire (jquery.js:3500:31)
at Object.fireWith [as resolveWith] (jquery.js:3630:7)