Triggering a click event on tags within a many-to-many field in Odoo 12

I've been attempting to create an event for tags within a many2many field using the following JavaScript code:

var FieldMany2ManyTags = relationalField.FieldMany2ManyTags.include({   
    events: _.extend({}, FieldMany2ManyTags.prototype.events, {
        'click .o_badge_text': '_onClickTag',
    }),

    _onClickTag: function(ev){
        var tar = ev.target;
        var tar1 = ev.currentTarget;
        console.log('FieldMany2ManyTags1');
        if(tar){
            console.log('Test');
            alert('many2many tag'); 
        }
        if(tar1){
            console.log('Test');
            alert('many2many tag'); 
        }

    },

});

});

However, I'm facing an issue where the event is not being triggered. Can someone please help me understand why this is happening? Any alternative solutions would be greatly appreciated. Thank you in advance.

Answer №1

To properly extend events, remember to replace the reference FieldMany2ManyTags with

relationalField.FieldMany2ManyTags
.

Answer №2

Utilize:

events: _.extend({}, relationalField.FieldMany2ManyTags.prototype.events, {
        'click .badge': '_onClickTag',
    }),

    _onClickTag: function(event){
        console.log('custom function for on-click event');
    }

Rather than:

events: _.extend({}, FieldMany2ManyTags.prototype.events, {
        'click .o_badge_text': '_onClickTag',
    }),

    _onClickTag: function(event){
        console.log('custom function for on-click event');
    }
    },

I trust this information will be beneficial to others.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AngularJS Table Checkbox Selection Helper Functions

I am feeling completely lost and could really use some assistance. I have been looking at different examples but nothing seems to be helping me out. I have created a dynamic table with checkboxes. Whenever a row is selected, its id gets added to an array ...

Is it possible to postpone mouseleave event in jQuery?

I am experiencing an issue with my code that changes the background on mouseover and reverts back to the initial background jpg on mouseleave. The transitions between photos are working fine, but if I unhover the mouse before the transition is finished, it ...

What is the process for transferring a file to a server from a PhoneGap or web application using FTP?

Can a PhoneGap application establish a connection with a server and transfer files using FTP? In simpler terms, is it feasible to initiate an FTP connection using Ajax or jQuery? ...

What is the best way to assign a name to an unnamed function or an express middleware in JavaScript?

Recently, I implemented some middleware in my express application. Here's the snippet: const app = express(); const port = 8000; const customMiddleware = () => { return async (req, res, next) => { await new Promi ...

Using the .ajax() function with jQuery to retrieve data and then using .find() on that data

Currently I am facing an issue while trying to extract the body tag from the result of the .ajax() call. Instead of getting the desired result, I only see undefined logged into the console... This is the section of code causing the problem: $(document).r ...

increasing the size of an element while keeping its overflow hidden

Is it possible to expand an element with "overflow: hidden" when clicked without affecting other elements? I'm looking for a solution that allows the expanded element to overlap and hide the element below it, rather than pushing it down. I've tr ...

`Stop the JW Player from playing several videos simultaneously`

I have a situation where I want to display multiple videos on the same page, but only one should be playable at a time. When a new video is started, the currently playing video should automatically stop. <div class="tab-pane active" id="abc"><d ...

Adjust the alignment of an expansion panel header to the right using Vuetify

Incorporating the Vuetify expansion panel, I am aiming to align a specific portion of the content within the <div slote="head"></div> to the right, resulting in this desired layout: https://i.sstatic.net/tbOL8.jpg https://i.sstatic.net/22NTS. ...

How can I divide a circle into sectors on Google Maps?

Is there a way to divide a circle in Google Maps into sectors of 120 degrees? Currently, I am able to draw a simple circle with a radius that looks like this: map = new google.maps.Map(document.getElementById('map_canvas'), { mapTypeId: goog ...

Loading multiple Meteor templates is a breeze with the ability to hide data

I have implemented a selection box where users can choose which inputs are relevant to them. The goal is to dynamically load only the input fields that the user has selected, hiding those that are irrelevant. However, I feel that my current approach is clu ...

Tips for updating the background color of the current day in a jquery datepicker when clicked

In my AngularJS project, I have implemented a jQuery datepicker. To make the current date stand out, I customized the CSS to display it with an orange background: .ui-state-highlight{ background-color:orange; } However, there is now a new requirement ...

Unable to access $_POST parameters in PHP when making an Ajax request

My HTML file is shown below: <script> var xml = new XMLHttpRequest(); xml.onreadystatechange = function(){ if (xml.readyState === 4 && xml.status === 200) { console.log(xml.responseText); } } xml ...

Using JavaScript/jQuery to analyze POST values just before submission

Currently facing a dilemma as my company is in the process of redesigning its website. I find myself stuck trying to come up with a temporary fix for an issue on the existing site. The solution requires the use of JavaScript or jQuery. The problem arises ...

Tips for utilizing nested filters to identify when there is a single list item and its child is specifically a <strong> tag

I am seeking to designate a specific class to the <ul> element only under certain conditions: it must have a single <li> which contains a solitary child, namely <strong>, without any additional text nodes or elements preceding or followin ...

By utilizing the power of JSONP, data transfer limitations can be eliminated

Is it possible to remove the limitation on data sent using JSONP? Here's my code. I'm attempting to send 3000 characters (an image converted to base64 data) at a time to a service (serviceCall.ashx). Since my data is quite large, up to 30,000-40, ...

Provide me with the list of names from the array of objects

I'm struggling to find a way to print the array of values in a specific order after looping through an object. **Here is the challenge:** Given a set of game outcome records, the task is to identify all the players and create an array of their names ...

Execute a task when the offset value is lower than a specified threshold in the waypoints

Is it possible to toggle a navbar class based on the body offset being less than -20px using the Waypoints plugin? The current code is not working because the offset values are undefined. How can I retrieve the body offset value using Waypoints? $("body ...

Generate a fresh array using the information extracted from a JSON file

I need assistance in extracting a new array from JSON data. The desired output should be an array containing "itog" values. [12860498,20156554,19187309] [ { "0": { "itog": 12860498, "return": ...

Is it time to advance to the next input field when reaching the maxLength?

In my Vue form, I have designed a combined input field for entering a phone number for styling purposes. The issue I am facing is that the user needs to press the tab key to move to the next input field of the phone number. Is there a way to automaticall ...

Ways to streamline your Jquery/Ajax code: Eliminate repetitive sections

Seeking guidance on optimizing my Jquery/Ajax code that involves sending GET requests. I've noticed there's quite a bit of repetition. How can I streamline this code effectively? $(".add_to_cart").click(function() { product_slug = $(this).at ...