We Keep Coding

extend Widget's init method in odoo 13

I'm trying to extend the widget's init method to make a simple console.log when the page is loaded, but it doesn't work, what can be a correct way to do this?
odoo.define('lliege_pdt_main.pdt_maps', function (require) {
var Widget = require('web.Widget');
var pdt_maps = Widget.extend({
init: function (parent) {
console.log("test");
this._super(parent);
},
});
return pdt_maps;
});

In your case you do not want to inherit the widget in the classical sense. You want to modify the parent itself. This can be done with include instead of extend:
var pdt_maps = Widget.include({
init: function (parent) {
console.log("test");
this._super(parent);
},
});
Don't forget to debug in assets debug (gorilla) mode. Here is the official documentation on patching a JS class like this.

Call a function that is in another js file

I removed my JS code in separate file and now I want to call it and execute it in the one that it was before. My new file name is blockedComponents.js. I added it in BundleConfig and I am trying to call it methods like this:
function getBlockedComponentsMethods()
{
BlockedComponents.pageChangedHandler();
}
My function in the new file is called
function BlockedComponents();
Should I require it somehow , because now I have error that pageChangedHandler is not defined?

Sorry, I didn't get what are you trying to do here, but in general :
If you would like to call a static method like this :
BlockedComponents.pageChangedHandler();
You should do something like the following :
function BlockedComponents() {
//Code here ...
}
BlockedComponents.pageChangedHandler = function() {
//Code here ...
};

How do I use a function as a variable in JavaScript?

I want to be able to put the code in one place and call it from several different events.
Currently I have a selector and an event:
$("input[type='checkbox']").on('click', function () {
// code works here //
});
I use the same code elsewhere in the file, however using a different selector.
$(".product_table").on('change', '.edit_quantity', function () {
// code works here //
});
I have tried following the advice given elsewhere on StackOverflow, to simply give my function a name and then call the named function but that is not working for me. The code simply does not run.
$(".product_table").on('change', '.edit_quantity', function () {
calculateTotals() {
// code does not work //
}
});
So, I tried putting the code into it's own function separate from the event and call it inside the event, and that is not working for me as well.
calculateTotals() {
// code does not work //
}
So what am I doing wrong ?

You could pass your function as a variable.
You want to add listeners for events after the DOM has loaded, JQuery helps with $(document).ready(fn); (ref).
To fix your code:
$(document).ready(function() {
$("input[type='checkbox']").on('click', calculateTotalsEvent)
$(".product_table").on('change', '.edit_quantity', calculateTotalsEvent)
});
function calculateTotalsEvent(evt) {
//do something
alert('fired');
}
Update:
Vince asked:
This worked for me - thank you, however one question: you say, "pass your function as a variable" ... I don't see where you are doing this. Can you explain ? tks. – Vince
Response:
In JavaScript you can assign functions to variables.
You probably do this all the time when doing:
function hello() {
//
}
You define window.hello.
You are adding to Global Namespace.
JavaScript window object
This generally leads to ambiguous JavaScript architecture/spaghetti code.
I organise with a Namespace Structure.
A small example of this would be:
app.js
var app = {
controllers: {}
};
You are defining window.app (just a json object) with a key of controllers with a value of an object.
something-ctlr.js
app.controllers.somethingCtlr.eventName = function(evt) {
//evt.preventDefault?
//check origin of evt? switch? throw if no evt? test using instanceof?
alert('hi');
}
You are defining a new key on the previously defined app.controllers.somethingCtlrcalled eventName.
You can invoke the function with ();.
app.controllers.somethingCtlr.eventName();
This will go to the key in the object, and then invoke it.
You can pass the function as a variable like so.
anotherFunction(app.controllers.somethingCtlr.eventName);
You can then invoke it in the function like so
function anotherFunction(someFn) { someFn();}
The javascript files would be structured like so:
+-html
+-stylesheets
+-javascript-+
+-app-+
+-app.js
+-controllers-+
+-something-ctlr.js
Invoke via chrome developer tools with:
app.controllers.somethingCtlr.eventName();
You can pass it as a variable like so:
$(document).ready(function() {
$('button').click(app.controllers.somethingCtlr.eventName);
});
JQuery (ref).
I hope this helps,
Rhys

It looks like you were on the right track but had some incorrect syntax. No need for { } when calling a function. This code should behave properly once you add code inside of the calculateTotals function.
$(".product_table").on('change', '.edit_quantity', function () {
calculateTotals();
});
$("input[type='checkbox']").on('click',function() {
calculateTotals();
});
function calculateTotals() {
//your code...
}

You could just condense it all into a single function. The onchange event works for both the check box and the text input (no need for a click handler). And jQuery allows you to add multiple selectors.
$('input[type=checkbox], .product_table .edit_quantity').on('change', function() {
console.log('do some calculation...');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="product_table">
<input type="checkbox">
<input class="edit_quantity">
</div>

How to access a function which is not global and it exist in another js file?

I have the following js files and I want to access one function from another function but I call it in another js file. I receive this error when I call it Uncaught ReferenceError: vidPause is not defined.
(function($) {
$.fn.controlls = function(opt) {
......
function init() {
.....
}
function vidPause(e){
e.stopPropagation();
$.fn.controlls.toggleBarPlayingButtons('pause');
video.pause();
}
.....
From this js file I want to call vidPause in the following function in another js file
function myFunction(e) {
if (video) {
$('video').controlls(vidPause());

This issue is scope.
init() and vidPause() are private to the (function($) { call. They will not be directly accessible the way you are trying to access them.
Many jquery plugins use text (not my preference, but that's how they work), eg $.dialog("open"), so you could do something like that (not sure if opt is meant to mean action, so update accordingly) :
(function($) {
$.fn.controlls = function(action, opt) {
switch (action) {
case "pause":
vidPause(opt);
break;
...
usage
$('video').controlls("pause");
It might be possible to add the methods as if using namespaces, but I've not seen this in plugins so depends on what you are doing with your plugin (ie releasing it) whether you want to be consistent, eg:
(function($) {
$.fn.controlls = {};
$.fn.controlls.pause = function(opt) {
video.pause();
...
usage
$('video').controlls.pause()

Access parent property inside object literal

We have a JS framework that lets us set up "modules". Each module is added by calling the addModule method and passing a literal object that contains required properties about the module as well as optional methods. Example:
framework.addModule({
id: "test-module",
init: function () {
//stuff to do when initializing like set up jQuery bindings
$("div").click(function () {
// need access to literal object so I can call:
something.utility1();
});
},
utility1: function () {
something.utility2();
},
utility2: function () {
// need access to literal object so I can call:
}
});
I'm trying to figure out the easiest way to make the object itself available to any code, at any level, inside the object (in place of "something").
The best I've been able to do is to add a this: this property to the object and then inside of methods I can put var module = this, which works but requires that variable to be added to each module. I'd like to see if there's another way that wouldn't require adding a variable to each method. Thanks.
Thanks for the comments and, zzzzBov, thanks for your suggestions.
However, it looks like the below code will work best for my needs. The devs on my team are writing a lot of these modules and I need the solution to be clear to them. Having to call $.proxy could make it less clear. I was hoping to avoid having to put var module = this in each method, so it would be cleaner, but it seems that it's not possible without it.
framework.addModule({
id: "test-module",
init: function () {
var module = this;
$("div").click(function () {
module.utility1();
});
},
utility1: function () {
var module = this;
module.utility2();
},
utility2: function () {
}
});
If anyone has a cleaner solution, let me know.

jQuery has a proxy method which will bind the function to a specific context. This would turn your event binding into:
$('div').click($.proxy(this, 'utility1'));
Alternatively, instead of using an object literal to instantiate the module object, you could instantiate an anonymous function:
framework.addModule(new function () {
this.id = 'test-module';
this.init = function () {
$('div').click($.proxy(this, 'utility1'));
};
this.utility1 = function () {
...more code...
};
this.utility2 = this.utility1;
});