Develop Reference

How can I check when certain form view is opened and field has changed in it on Odoo JavaScript?

What I Have so far is basic code:
odoo.define('partner_data.res_partner_widget', function(require) {
"use strict";
var core = require('web.core');
var Dialog = require('web.Dialog');
var form_common = require('web.form_common');
var Widget = require('web.Widget');
var Model = require('web.Model');
var _t = core._t;
var QWeb = core.qweb;
console.log('JS loaded');
$(document).on('ready', function() {
console.log('Doc is ready');
$('#FIELD').on('change', function() {
// Change value of other fields in this form
});
});
});
Problem is that document ready triggers in whole ODOO system. And trying to find the field by its name $(#fieldname) doesn't work at all.
Is there any solution SPECIFIC FOR ODOO for this problem? Or maybe you know really good documentation or example that explain on change method OF ODOO FIELD. P.S. I write ODOO in caps because everybody answers simple JQuery style, and this is not just simple JQuery, this must be something more specific related to ODOO.
Or maybe I can call Python function of specific form view after the field has been changed, something like that. All odoo documentation that I found gives very little or no information about that.
UPDATE:
Thanks to #Vishal Khichadiya I got a bit close. I edited his answer by creating a widget. Now when I set this widget to the random field, let's say to some invisible field, I can use class class_partner on any field I want and it will trigger onchange method.
odoo.define('partner_data.res_partner_widget', function(require) {
"use strict";
var base = require('web_editor.base');
var options = require('web_editor.snippets.options');
var core = require('web.core');
var Dialog = require('web.Dialog');
var session = require('web.session');
var form_common = require('web.form_common');
var Widget = require('web.Widget');
var Model = require('web.Model');
var _t = core._t;
var QWeb = core.qweb;
var onchange_js_method_test = form_common.AbstractField.extend({
start: function () {
this._super();
var self = this;
$('body').on('change', '.class_partner', function() {
console.log('start triggered');
console.log(self)
// Change value of other fields in this form
//you can call python function from here to set your value
});
}
});
core.form_widget_registry.add('onchange_js_method_test', onchange_js_method_test);
});
xml:
<field name="random_invisible" " widget="onchange_js_method_test"/>
<field name="on_this_field_onchange_triggers" class="class_partner"/>

first of all you need to set class attribute to python filed in xml code.
Ex:
<field name="partner_id" class="class_partner" />
then you need this in js and also add this js file to assets_backend.
odoo.define('partner_data.res_partner_widget', function(require) {
"use strict";
var core = require('web.core');
var Dialog = require('web.Dialog');
var form_common = require('web.form_common');
var Widget = require('web.Widget');
var Model = require('web.Model');
var _t = core._t;
var QWeb = core.qweb;
var my_widget = Widget.extend({
start: function () {
this._super();
var self = this;
$('body').on('change', '.class_partner',function() {
// Change value of other fields in this form
//you can call python function from here to set your value
});
},
});
core.action_registry.add('my_widget', my_widget);
return my_widget;
});

Recalculate field with JS

I am trying to recalculate one field in Odoo based on another field so for example my model is following:
class ProductTemplate(models.Model):
_inherit = 'product.template'
margin = fields.Float()
netto_price = fields.Float()
So based on netto_price i would like to calculate margin. Now i added js file to /static/src/js/products.js and in openerp.py i added 'js': ['static/src/js/products.js'],
Than i wrote following js just to try if its working or not
openerp.product_mycustom = function(instance) {
var QWeb = openerp.web.qweb;
_t = instance.web._t;
instance.web.FormView.include({
load_form: function(data) {
var self = this;
this.$el.find('#netto_price').on('change', function() {
alert( this.value );
});
},
});
};
And no success. Am i doing something wrong

0x8000ffff JavaScript runtime error Unexpected call to method or property access

Every time when I try to run this code in visual studio I get the above error. I am not sure what is going on. I know it's question like this, but I did not see this error in the answered in the solutions to this problem. Can anyone help me with this?
// display the lightbox
function lightbox() {
var insertContent = "<div id='chartCon'>Test</div>";
// jQuery wrapper (optional, for compatibility only)
(function ($) {
// add lightbox/shadow <div/>'s if not previously added
if ($('#lightbox').size() == 0) {
var theLightbox = $('<div id="lightbox" class="highcharts-container"/>');
var theShadow = $('<div id="lightbox-shadow"/>');
$(theShadow).click(function (e) {
closeLightbox();
});
$('body').append(theShadow);
$('body').append(theLightbox);
//$().keydown(function (e) {
// if (e.which == 27) {
// closeLightbox();
// }
//});
}
// remove any previously added content
$('#lightbox').empty();
// insert HTML content
if (insertContent != null) {
$('#lightbox').append(insertContent);
}
//create chart
var chart = $('#ChartContainer').highcharts('StockChart');
var annots = chart.exportData()
window.chartwidth = $('#ChartContainer').width();
//chart.destroy();
window.chartops.series = window.seriesOptions;
$('#lightbox').highcharts('StockChart', window.chartops);
$('#lightbox').highcharts('StockChart').importData(annots);
// move the lightbox to the current window top
$('#lightbox').css('top', $(window).scrollTop());
// display the lightbox
$('#lightbox').show();
$('#lightbox-shadow').show();
})(jQuery); // end jQuery wrapper
}
// close the lightbox
function closeLightbox() {
// jQuery wrapper (optional, for compatibility only)
(function ($) {
//export possibly changed annotations and reset chartwidth
var chart = $('#lightbox').highcharts('StockChart');
var annots = chart.exportData()
$('#ChartContainer').highcharts('StockChart').removeAllAnnotations();
$('#ChartContainer').highcharts('StockChart').importData(annots);
window.chartwidth = $('#ChartContainer').width();
// hide lightbox/shadow <div/>'s
$('#lightbox').hide();
$('#lightbox-shadow').hide();
// remove contents of lightbox in case a video or other content is actively playing
$('#lightbox').empty();
})(jQuery); // end jQuery wrapper
}

Sorry, this is the function giving me the error
init: function (chart) {
var rangeSelector = this,
options = chart.options.rangeSelector,
buttonOptions = options.buttons || [].concat(rangeSelector.defaultButtons),
selectedOption = options.selected,
blurInputs = rangeSelector.blurInputs = function () {
var minInput = rangeSelector.minInput,
maxInput = rangeSelector.maxInput;
if (minInput) {
minInput.blur();
}
if (maxInput) {
maxInput.blur();
}
};

Enyo JS : Set moon.DataGridList collection dynamically

Is there away to set a grid collection dynamically after an ajax call ?
.....
create: function () {
this.inherited(arguments);
this.onFetchItemList();
},
onFetchItemList: function(){
var prof = this.userProfile;
obj.getBrowse(prof,function onBrowseCallback(list){
this.set("collection", new enyo.Collection(list));
});
}
.....
I get this method is undefined when I try to use the set function
this.$.gridList.set("collection" ,new enyo.Collection(list));
same error here as well :
this.$.gridList.collection.set('collection',this.shows);

Fixed, simply mistake on my part , whoops :)
onFetchItemList: function(inSender, inEvent){
var prof = this.userProfile;
var _gridList = this.$.gridList;
var shows = new enyo.Collection();
obj.getBrowse(prof,function onBrowseCallback(list){
ameba_lastListViewed = [];
ameba_lastListViewed = list;
shows = new enyo.Collection(list);
_gridList.set('collection',shows);
}

Help converting JavaScript click function to onLoad

I'm trying to convert a JavaScript function that ran off a click event to launch on page load and window resize. As you can see below, I commented out the section governing the click event and added the last line "window.onload," and manually added the class="resizerd" to the element it was working with.
The function isn't running at all. Chrome's Dev tools are showing "Uncaught TypeError: Cannot set property 'prevWidth' of undefined" Did I mess up the syntax somewhere? Any advice for how to launch this on load?
Thank you!
//var clicked = document.getElementById("buttonImportant")
var resizeeContainer = document.getElementById('video_container');
var resizee = resizeeContainer.getElementsByTagName('video')[0];
/*clicked.addEventListener('click',function(){
if( resizeeContainer.className.lastIndexOf("resizerd")>=0 ){
}
else
{
resizeeContainer.className="resizerd";
}*/
myResizerObject.prevWidth = resizee.offsetWidth;
myResizerObject.prevHeight = resizee.offsetHeight;
myResizerObject.Init();
//},false);
myResizerObject.prevWidth = resizee.offsetWidth;
myResizerObject.prevHeight = resizee.offsetHeight;
myResizerObject.Init();
var RESIZER = function(){
this.prevWidth = resizee.offsetWidth;
this.prevHeight = resizee.offsetHeight;
this.resizee = resizeeContainer.getElementsByTagName('video')[0];
this.resizeeContainer = resizee.parentNode;
this.resizeeStyle = this.resizee.style;
var ratio = this.resizee.offsetHeight/this.resizee.offsetWidth;
var that = this;
this.Init = function(){
if( that.resizeeContainer.className.lastIndexOf("resizerd")>=0 )
{
var resizeeContOffsetWidth = that.resizeeContainer.offsetWidth;
var resizeeOffsetWidth = that.resizee.offsetWidth;
var resizeeContOffsetHeight = that.resizeeContainer.offsetHeight;
var resizeeOffsetHeight = that.resizee.offsetHeight;
if(that.prevWidth!= resizeeContOffsetWidth)
{
that.prevWidth = resizeeContOffsetWidth;
var desired = resizeeContainer.offsetHeight/resizeeContainer.offsetWidth;
if(desired>ratio){
that.resizeeStyle.width=resizeeContOffsetWidth*desired+resizeeContOffsetWidth*desired+"px";
that.resizeeStyle.left = -1*(resizeeOffsetWidth-resizeeContOffsetWidth)/2+'px';
}
else{
that.resizeeStyle.cssText="width:100%;height:auto;position:fixed;";
}
}
if(that.prevHeight!=resizeeContOffsetHeight)
{
that.prevHeight = resizeeContOffsetHeight;
var desired = resizeeContOffsetHeight/resizeeContOffsetWidth;
if(desired>ratio){ console.log(ratio);
//that.resizeeStyle.top = '0px';
that.resizeeStyle.left = -1*(resizeeOffsetWidth-resizeeContOffsetWidth)/2+'px';
that.resizeeStyle.width = resizeeContOffsetHeight*desired+resizeeContOffsetHeight/desired+'px';
}
else
{
that.resizeeStyle.top = -1*(resizeeOffsetHeight-resizeeContOffsetHeight)/2+'px';
}
}
}
};
};
var myResizerObject = new RESIZER();
window.onresize = myResizerObject.Init;
window.onload = myResizerObject.Init;

Did you try to execute the function through the <body> tag?
Like:
<body onload="myfunction();">

Try calling the entire resize javascript function in the OnLoad="myfunction();" event of the Body of the page. I have done this to resize the page everytime it loads and it works just fine.

You have this line:
myResizerObject.prevWidth = resizee.offsetWidth;
That is probably giving the error. You've done nothing to declare myResizerObject so it cannot have a property prevWidth.
Somewhere down there you do
var myResizerObject = new RESIZER();
I suspect you want those lines in a more reasonable order :)

Such code should work just fine:
var myResizerObject = new RESIZER();
function UpdateResizerObject() {
var resizeeContainer = document.getElementById('video_container');
var resizee = resizeeContainer.getElementsByTagName('video')[0];
myResizerObject.prevWidth = resizee.offsetWidth;
myResizerObject.prevHeight = resizee.offsetHeight;
myResizerObject.Init();
}
window.onload = function() {
UpdateResizerObject();
};
window.onresize = function() {
UpdateResizerObject();
};
Have it after you define the RESIZER class though.
Your mistake was calling the object instance variable before creating it.
Edit: some basic debug.. add alerts to the function like this:
this.Init = function(){
alert("Init called.. container: " + that.resizeeContainer);
if (that.resizeeContainer)
alert("class: " + hat.resizeeContainer.className);
if( that.resizeeContainer.className.lastIndexOf("resizerd")>=0 )
{
...
}
}
And see what you get.