Call JS function from XML

Question

I want to call a js function in Odoo from XML

        <template id="portal_my_attendances_inherit" name="My Attendances"
              inherit_id="hr_attendance_portal.portal_my_attendances">
        <xpath expr="//t[@t-call='portal.portal_searchbar']" position="after">
            <div class="mb4">
                <t t-if="env.user.employee_id">
                    <a t-if="env.user.employee_id.attendance_state != 'checked_in'"
                       href="#" class="btn btn-success checkInBtn">Check Inn <i class="fa fa-sign-in"/></a>
                    <t t-else="">
                        <a href="#" class="btn btn-warning checkOutBtn">Check Out <i class="fa fa-sign-out"/></a>
                        <strong> Hours today:</strong>
                        <span t-field="env.user.employee_ids.hours_today" t-options="{'widget': 'float_time'}"/>
                        <small>(refresh page to update)</small>
                    </t>
                </t>
            </div>
        </xpath>
    </template>

    /** @odoo-module **/

import publicWidget from '@web/legacy/js/public/public_widget';
console.log('Start ...');

publicWidget.registry.portalAttendance = publicWidget.Widget.extend({
        selector: '.checkInBtn, .checkOutBtn',

        events: {
            'click .checkInBtn': '_onCheckInClicked',
            'click .checkOutBtn': '_onCheckOutClicked',
        },

        _onCheckInClicked: function (ev) {
            ev.preventDefault();
            console.log('In Button clicked !!!');
        },

        _onCheckOutClicked: function (ev) {
            ev.preventDefault();
            console.log('Out Button clicked !!!');
        },

    });

export default publicWidget.registry.portalAttendance;

"Start ..." is printed in the console, but when I click the check in button I don't get the 'In Button clicked !!!' messege. Can any one assist me please.

Answer 1

The selector needs to be a parent of the event elements, thus you should update it.

The <div class="mb4"> that encloses your event element now has a new class called wrap-div added to it.

<template id="portal_my_attendances_inherit" name="My Attendances" inherit_id="hr_attendance_portal.portal_my_attendances">
    <xpath expr="//t[@t-call='portal.portal_searchbar']" position="after">
        <div class="mb4 wrap-div">
            <t t-if="env.user.employee_id">
                <a t-if="env.user.employee_id.attendance_state != 'checked_in'" href="#" class="btn btn-success checkInBtn">Check Inn <i class="fa fa-sign-in"/></a>
                <t t-else="">
                    <a href="#" class="btn btn-warning checkOutBtn">Check Out <i class="fa fa-sign-out"/></a>
                    <strong> Hours today:</strong>
                    <span t-field="env.user.employee_ids.hours_today" t-options="{'widget': 'float_time'}" />
                    <small>(refresh page to update)</small>
                </t>
            </t>
        </div>
    </xpath>
</template>

Then,

selector: '.wrap-div',