Search code examples
javascriptodoo-11

Javascript code doesn't work in odoo.define but works in developer console

As the pic down below,
I want make background-color change when a radio value is changed.

as pic

this is for ODOO11. I've set js file for template to inherit. but it doesn't work.

<template id="assets_backend_weight" name="static_resources_demo assets" inherit_id="web.assets_backend">
    <xpath expr="." position="inside">
        <script type="text/javascript" src="/yc_root/static/src/js/my_js.js"></script>
    </xpath>
</template>

my_js.js

odoo.define('yc_root.my_JS', function (require) {"use strict";
    var Class = require('web.Class');
    var hpw = Class.extend({
    init: function(){
        var v = $("div[name='in_out'] div input:checked").attr('data-value');
        if (v =='O') {
            $('.o_form_sheet').css("background-color","blue");
            }
        else {
            $('.o_form_sheet').css("background-color","yellow");
            }
        }
    })
    return hpw;
});

I put the code from variable v to end of if-else condition into the developer console. It can change the color but doesn't work in the way via customized JS file. How can I modify it?

And I'm sure my customized JS file is taken by odoo. While I just put console.log('hi') in my customized JS file, It can appear on console.

It's seems odoo load web.assets_backend.js before generating DOM. Because I test alert('hi'), it popup before load DOM(screen completely blank).

Solution

  • I found solution.
    - click radio to change bgcolor

    • implement bgcolor change while load DOM in different type record.

    my code

    odoo.define('yc_root.my_JS', function (require) {"use strict";
    var core = require('web.core');
    var Widget = require('web.Widget');

    var bgdrawer = Widget.extend({
        /* <init: construct before loading DOM completely.>*/
        init: function() {
            var self = this;
            self._super.apply(this, arguments);
             //self.bgChanger();
             /*  this is used to register a listener on an event.
                  form: .on(ev, node.callback, node.context);
                   ev:
                      'resize': implement when browser resize
                      'DOM_updated': implement when DOM updated
                      ...etc.                                      */
             core.bus.on('click', "div[name='in_out'] div input:checked", self.bgChanger);
             core.bus.on('DOM_updated', "span[name='in_out']", self.post_bgChanger);
             core.bus.on('click', "button .o_pager_next", self.post_bgChanger);
        },
        bgChanger: function() {
            var v = $("div[name='in_out'] div input:checked").attr('data-value');
            if (v =='O') { $('.o_form_sheet').css("background-color","#adff2f");}
            else if(v =='I') { $('.o_form_sheet').css("background-color","#ffc0cb");}
        },
        post_bgChanger: function() {
            if ($("span[name='in_out']")[0]){
                var _str = $("span[name='in_out']")[0].innerHTML;
                if (_str=="出貨") { $('.o_form_sheet').css("background-color","#adff2f");}
                else if(_str=="進貨") { $('.o_form_sheet').css("background-color","#ffc0cb");}
            }
        },
    });

    // Init a new bgdrawer when the web client is ready
    /*core.bus.on('web_client_ready', null, function () {new bgdrawer();});
    return {'bgdrawer': bgdrawer,};*/

    var my_widget = new bgdrawer(this);
    my_widget.appendTo($(".o_form_sheet"));

});