Having difficulty accessing data in a JavaScript file within Odoo 9 platform

I have attempted to extract HTML content from JavaScript declared in my module.

However, when I try to retrieve content by class name, all I can access is the header contents and not the kanban view.

openerp.my_module = function(instance) {
    var header = $(".headerClass").html();
    console.log(header);
    var kanban = $(".kanbanClass").html();
    console.log(kanban);
};

I have also added the JavaScript file to web.assets_backend.

<?xml version="1.0" encoding="UTF-8"?>
<openerp>
    <data>
        <template id="assets_backend" inherit_id="web.assets_backend">
            <xpath expr="." position="inside">
                <script type="text/javascript" src="/my_module/static/src/js/my_module.js"></script>
            </xpath>
        </template>
    </data>
</openerp>

The first log displays the HTML contents, but the second log shows "undefined."

It seems that when this JavaScript is executed, the kanban view in XML is not included.

UPDATE

<record id="my_module_view_kanban" model="ir.ui.view">
    <field name="name">my.module.kanban</field>
    <field name="model">my.module.model</field>
    <field name="arch" type="xml">
        <kanban class="oe_background_grey o_kanban_dashboard" display="[name]">
             <field name="name"/>
             <field name="color"/>
             <field name="state"/>
             <field name="nth_week"/>
             <field name="date_start"/>
             <field name="date_end"/>
             <field name="date"/>
             <field name="count_employees"/>
             <templates>
                <t t-name="kanban-box">
                   <div class="kanban_weekly_record">
                      <div t-attf-class="#{kanban_color(record.color.raw_value)} oe_kanban_global_click">
                          <div class="o_weekly_kanban_main">
                             <div class="o_kanban_card_content o_visible">
                                 <div class="o_kanban_primary_left">
                                     <div class="o_kanban_primary_left">
                                         <div class="o_primary weekly">
                                             <span>
                                                 <div class="kanbanClass">
                                                     <t t-esc="record.field.value"/>
                                                 </div>
                                             </span>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                          </div>
                       </div>
                    </div>
                 </t>
             <template>
         </kanban>
     </field>
</record>

Furthermore, I receive "undefined" when logging with the o_kanban_primary_left class.

Answer №1

Make sure to give the app enough time to fully load before running this code:

openerp.my_module = function(instance) {
    $(document).ready(function () {
       var header = $(".headerClass").html();
       console.log(header);
       var kanban = $(".kanbanClass").html();
       console.log(kanban);
    });
};

This is important because you may have selected an element that is still in the process of loading.

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

I want to display events from my database table on their corresponding dates using JavaScript and jQuery. How can I achieve this?

Using the FullCalendar plugin, I attempted to achieve a specific functionality, but unfortunately fell short of my goal. Below is the snippet of my scripting code: $('#calendar').fullCalendar({ //theme: true, header: { ...

What are some ways to design unique custom data grid toolbar elements?

I am having trouble syncing my custom toolbar buttons with the imported material data grid toolbar components. I would like them to match in style, specifically applying the material styles to my custom components. However, I have not been able to find a w ...

Executing Enter Key and Button Simultaneously with JavaScript: Step-by-Step Guide

I need assistance understanding how to simultaneously trigger the enter key and button in this code. When the value is entered into the input field, it should trigger both the enter key and the button "Enter" at the same time. Additionally, after pressing ...

The error message says: "VueComponent.filterKategori function cannot read property 'filter' because it is undefined at line 16260 in app.js."

this is the code snippet that I'm dealing with: computed: { filterKategori() { var kategori = this.kategori.data.filter(f => { return f.induk == null && f.id_klasifikasi == this.id_klasifikasi; }); return kat ...

Using the dot operator to load an image

Is it possible to using the dot operator to load an image? Let's talk about this as a sample image URL <img src={{GET_PROFILE_DATA.googleProfileData.fullName}} alt="profile" class="home-screen-profile-image"> Take note of the unusual looking ...

Discovering WebElements nested within other WebElements using WebdriverJS

Looking at this HTML structure <div> <div> <p class="my-element"></p> </div> <div> <div> <div> <p class="the-text"> I want to retrieve this text</p> </div> </div> <div> ...

Retrieve every HTML element that is currently visible on the screen as a result

I have a dynamic HTML table that updates frequently, with the potential for over 1000 rows. Instead of replacing the entire table each time it updates, I am exploring options to only update the visible rows. My initial approach involved iterating through ...

Prevent infinite scrolling with JavaScript AJAX when the response is empty

I am currently implementing the infinite scroll functionality on my website. Whenever the page reaches the bottom, an ajax call is triggered to fetch a new set of data. However, I'm unsure how to handle stopping the ajax call if there is no more data ...

Utilize Meteor's ability to import async functions for seamless integration into method calls

Encountering an issue with this Meteor app where the error TypeError: vinXXX is not a function occurs when attempting to call an exported async function named "vinXXX" from within a method call in a sibling folder, which has been imported in the methods f ...

The expect.objectContaining() function in Jest does not work properly when used in expect.toHaveBeenCalled()

Currently, I am working on writing a test to validate code that interacts with AWS DynamoDB using aws-sdk. Despite following a similar scenario outlined in the official documentation (https://jestjs.io/docs/en/expect#expectobjectcontainingobject), my asser ...

The unexpected identifier 'express' was encountered in the import call, which requires either one or two arguments

I'm in the process of constructing an express server using typescript and Bun. Recently, I completed my register route: import express from "express"; const router = express.Router(); router.get('/registerUser',(_req:express.Reque ...

The xModal window will only pop up once, after which a page refresh is required

My modal window opens when a user clicks on a div, but I'm having an issue. The modal window doesn't reopen when I click on the div again. Here is my code: <div onclick="document.getElementById('id01').style.display='block&apos ...

What is the procedure for turning off hover color on an href element?

Working on a website that utilizes MUI components, I have incorporated href into the Tab elements within the navigation bar. <Tab label={element} id={index} sx={{display: {xs: 'none', md: 'inherit'}}} href={`#${navElements[element ...

Ensure that the central section of the slider remains illuminated

Looking for help with customizing my "product" slider, lightSlider. I want the middle div to always be highlighted when navigating through the slider. Here's what it looks like currently: Link to screenshot - current. My goal is to achieve this look: ...

Executing a function by click event using the onclick attribute from a file located in the public directory of my project (Next

I'm new to using Next.js and I have a question about how to utilize onclick to execute a function from an external file located in my public folder. Below is my index.js file: import Head from "next/head" import Script from "next/scrip ...

Exploring the Depths of Google Chrome: Unleashing the Power of

While a similar question has been posed previously, I am encountering difficulties debugging Javascript in Google Chrome. When I navigate to Page > Developer, the "Debug Javascript" function (Ctrl+Shift+L) is not active. Even trying Alt + ` does not seem ...

Managing stream pauses and resumes in Node.js using setTimeout()

After some experimentation with Node.js (v4.4.7), I managed to create a simple program to play a sound... const Speaker = require('audio-speaker/stream'); const Generator = require('audio-generator/stream'); const speaker = new Speake ...

The HTML Style for implementing HighChart title text does not work when exporting files

I have inserted the <br/> and &nbsp; HTML tags into the HighChart titles. The style changes successfully appear in the chart view, but unfortunately, when exported as PNG or JPEG images, the text style fails to apply in the resulting images. To s ...

Is there a way in Reactjs Material UI 5 (MUI5) to unselect only the star that was clicked, without affecting the rest of the stars in the

For instance: I selected the 3rd star on the rating component, but when I click on it again, all the previous stars disappear and it shows 0 stars. How can I make it so that if I click on the 3rd star a second time, only the 3rd star is removed, leaving ...

Develop a Vue.js component embedded within another component to manipulate data stored in the parent

After reviewing a few answers that partially address my question, I realized there is more to explain. In our Laravel project website layout, we utilize a global #app div. This means all pages share the same main Vue instance, prompting me to segregate ke ...