How to add a java script handler for button click event in odoo 10?

Question

I want to make a handler for button in header using java script. My view model is given below :

     <template id="assets_backend" name="petstore" 
        inherit_id="web.assets_backend">
        <xpath expr="." position="inside">

     <script type="text/javascript" 
        src="/mypetstore/static/src/js/model_access.js">
     </script>

     <link href="/mypetstore/static/src/css/petstore.css" 
         rel="stylesheet">
     </link>
        </xpath>
    </template> 



    <record model="ir.ui.view" id="my_pet_store_form">
        <field name="name">my_pet_store_form</field>
        <field name="model">petstore.message</field>
        <field name="type">form</field>
        <field name="arch" type="xml">
        <header>
         <button name="click_me" string="Click" 
              class="oe_highlight"/>
         </header>
            <form string="Message of the day">

                <group col="2">
                    <group>
                        <field name="data"/>
                    </group>
                </group>
            </form>
          </field>
       </record>

When user click on 'click_me' button, then it call a simple javascript function or action client. Just print an alert. JS part : odoo.define('mypetstore.model_access', function (require) { "use strict"; var Class = require('web.Class'); var Widget = require('web.Widget'); var core = require('web.core'); var utils = require('web.utils');

    jq('#click_me').bind('click', function(){
       alert("hello");
      });  
    });

It's "JavaScript", not "java script".

user663031
– user663031

2017-07-18 13:27:32 +00:00
Commented Jul 18, 2017 at 13:27 — user663031
– user663031, Commented Jul 18, 2017 at 13:27

Affan Pathan · Accepted Answer · 2017-07-18 13:13:22Z

1

First I would suggest you to give some ID attribute to Object, you want to use. like

 <button name="click_me" id="click_me" string="Click" 
              class="oe_highlight"/>

JQuery:

jq('#click_me').bind('click', function(){
   alert("hello");
});

answered Jul 18, 2017 at 13:13

Affan Pathan

3081 gold badge6 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

NidhinMohanCheriyan Over a year ago

Getting error : "error: Some modules could not be started "

NidhinMohanCheriyan Over a year ago

I added this code in my js file and getting the error. I have written my js code with the above code

Affan Pathan Over a year ago

use $ instead, I have rename JQuery object to jq. Sorry for inconvenience, instead, jq('#click_me') use $('#click_me')

NidhinMohanCheriyan Over a year ago

but.. its not working.. do we need to add those buttons inside template tag ?

NidhinMohanCheriyan Over a year ago

getting this errorjQuery.fn.init {context: document, selector: "#click_me"}

Zainab Hammami · Accepted Answer · 2017-07-18 13:13:17Z

0

This is how your button should looks like, just add onclick whish is your handler.

         <header>
           <button onclick="myFunction()" name="click_me" string="Click" 
              class="oe_highlight"/>
         </header>

myFunction() will be your javascript code.

Now the alert code will be this:

<script type = "text/ javascript">  
  function myFunction() {
    alert("Hello! I am an alert box!!");
  }
</script>

hope it helps.

answered Jul 18, 2017 at 13:13

Zainab Hammami

4312 gold badges6 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to add a java script handler for button click event in odoo 10?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related