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

What is the best method to override the CSS transition effect with JavaScript?

I am trying to implement a CSS transition where I need to reset the width of my box in advance every time my function is called. Simply setting the width of the box to zero makes the element shrink with animation, but I want to reset it without any animati ...

Interacting with various cookies created from user-provided input (specifically from textboxes) simultaneously

I'm facing a challenging problem and I'm in need of some assistance. The task at hand is to create three text boxes for users to input values for cookies named: name, city, and hobby. Then, using a single button with an onclick event, a function ...

Decapitalizing URL string in jQuery GET request

Check out my code below: $.get('top secret url and stuff',function(data){ console.log($("[style='color:white']", data.results_html)[0].innerHTML); window.html = document.createElement('d ...

Adding a collection of items to an array in preparation for organizing

Realizing that sorting objects is not feasible - despite the necessity of having the object values sorted - I conclude that the only option is to move the object array content into a new array for sorting purposes. The following code generates the output ...

Tips for retaining form inputs without the need for a submit event when the page is reloaded or refreshed

I have a form on a page with multiple text inputs In addition to the form, I have implemented Zend pagination to allow users to select results. However, when using Zend paginate, the user's form inputs are lost because it is not submitted. Since th ...

Steps to deactivate two choices in a multi-select dropdown menu and visually dim those options

Hey there, I recently worked with Angular8 and Bootstrap 4. I utilized a Bootstrap multi-select dropdown, where I encountered an issue: specifically, I'm trying to disable and gray out the options for PL Marketing and CL Marketing but have been unsucc ...

Rendering sibling components on Multiple Select Material UI in React

Here is my current challenge: I am trying to implement a multiple select feature with checkboxes in React using Material UI. The desired outcome should resemble the image linked below: https://i.stack.imgur.com/TJl8L.png I have structured my data in an a ...

How can I show information on the same page as a link by simply clicking on it?

My goal is to create a functionality where clicking on a link will display specific information. Currently, all the links and their corresponding information are displayed at once. I want to change this so that the links are displayed first, and the inform ...

How can I include multiple dictionary entries in a JSON file at once?

After attempting to include an array with dictionaries in a JSON file, I encountered multiple errors. This has led me to question whether it is feasible to add dictionaries directly into a JSON file without using Node.JS for data insertion. Here is an exa ...

Continuously simulate mousewheel events

I'm trying to make my mousewheel event trigger every time I scroll up, but it's only firing once. Can you assist me with this issue? Please review the code snippet below. $('#foo').bind('mousewheel', function(e){ if(e.o ...

Creating dynamic variable names in Jquery by combining strings and numbers

Hey there, I'm really stuck and in need of a solution for the issue I've encountered. Currently, I have a script that sends an Ajax GET request and retrieves JSON data. The data is successfully returned, but when I try to loop through it, that&a ...

Does anyone have an idea of the origin of the item in this ajax .each function?

Currently, I am utilizing the Etsy API with JavaScript by calling this AJAX code: $.ajax({ url: etsyURL, dataType: 'jsonp', success: function(data) { This code returns an object array, if I'm not mistaken. It then proceeds to enter this . ...

Tips for sending a form and showing results without the need to refresh the page

I am currently working on developing a basic calculator that takes a user input number and displays the calculated output without redirecting or reloading the page. However, since I have no experience with JavaScript (js) and Ajax, I am seeking assistance ...

What is the purpose of the .default() method being added to the class constructor in transpiled Typescript code

In TypeScript, I have the following code snippet to create an instance of ConnectRoles Middleware in Express: let user = new ConnectRoles(config); The middleware initialization is expected to be a simple call to a constructor. However, after transpiling, ...

Feeling puzzled about the next() function in Node.js?

https://github.com/hwz/chirp/blob/master/module-5/completed/routes/api.js function isAuthenticated (req, res, next) { // If the user is authenticated in the session, call the next() to proceed to the next request handler // Passport adds this met ...

Execute a PUT request within a Firebase Cloud Function database handler

I am working on syncing data between my server's database and Firebase realtime db. The first part, which involves syncing from my server to Firebase, is already complete. However, I am facing challenges with the second part - syncing data from Fireba ...

How can I break down an object with hyphenated key names?

Attempting to perform object destructuring on the following: { name: "Bryan", last-name: "Enid" } However, trying to destructure it like this is not successful: const {name, last-name} = req.body Is there an alternative method to destructure this ...

What is the best way to reset local state after triggering a success action in Redux Saga?

I'm looking to reset my component state after a successful call in redux saga. Is there a way to achieve this? Currently, I am using the component state to track my input value. this.state = { department: '', }; The solution I have im ...

Access a file from an npm module using an executable command

I have a npm module called @jcubic/lips, which includes an executable file. I need to open a file located within the module's directory. This module is installed globally. The specific file I want to access is ../examples/helpers.lips, relative to th ...

Passing events value in Fullcalendar Plugin by utilizing a javascript function to format events in the Fullcalendar event format

Currently, I am utilizing the full calendar plugin to display data on a calendar from a workflow. The values needed for the events are obtained in a separate function and need to be passed as fullcalendar events. I am uncertain about how to retrieve these ...