How to perform some action on a node after it is loaded in JavaScript in Odoo?

I made a new widget for a Char field. I'm inheriting its template from the original one of Char:

Char

Char

<t t-name="FieldRed" t-extend="FieldChar">
<t t-jquery="input" t-operation="attributes">
<attribute name="id">barcode_input</attribute>
<attribute name="class">o_form_input bg-red</attribute>
</t>
</t>


Then, I'm only trying to fill in the field with some text when it is loaded (I know I can do that without using JavaScript but I need to manage this to start with my actual purpose). So, I did this:

var FieldRed = widget.FieldChar.extend(
template: 'FieldRed',
events: _.extend(, widget.FieldChar.prototype.events,
'load': 'on_load',
'ready': 'on_ready',
'keypress': 'on_keypress',
),

init: function (field_manager, node)
console.log('INIT');
this._super(field_manager, node);
this.$el.parent().find('input').val('INIT');
,

on_load: function (e)
console.log('LOAD');
this.$el.parent().find('input').val('LOAD');
,

on_ready: function (e)
console.log('READY');
this.$el.parent().find('input').val('READY');
,

on_keypress: function (e)
console.log('KEYPRESS');
this.$el.parent().find('input').val('KEYPRESS');
,
)


First of all, I expected to find the input element in this.$el, but it is in this.$el.parent(), is that because of the input element is declared in the original template?

input

this.$el

this.$el.parent()

input

And my main question: I can fill in the input node text automatically on keypress, but the same line of code does not work in init method, neither load nor ready events. How can I fill in the text of the input node each time the user opens the form which contains the field with my widget?

input

keypress

init

load

ready

input

1 Answer
1

I can use the start method, which is also automatically called. This happens after the call of init and willStart, then the view is rendered and afterwards start is called. This is well explained in the official documentation, in the Widget Lifecycle section:

start

init

willStart

start

https://www.odoo.com/documentation/11.0/reference/javascript_reference.html

When the rendering is complete, the framework will automatically call
the start method. This is useful to perform some specialized
post-rendering work. For example, setting up a library.

Must return a deferred to indicate when its work is done.

So I only had to inherit from the original start method and add my functionality:

start

start: function()
console.log('START');
this._super.apply(this, arguments);
this.$el.parent().find('input').val('START');
,


Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.