Category: javascript

Several “buttons” have been selected via “querySelectorAll”, their class is the same, and by clicking on one of them I want to add a “style” to the class named “basket”. But because I’ve never done this before, I can’t do it, I don’t know how to do it, and this is the code I wrote.

let basket = document.querySelectorAll(".basket")
document.querySelectorAll('.pBasket').forEach(item => {
  item.addEventListener('click', event => {
    basket.style.display = "block"
  })
})

.basket {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  display: none;
}

<div class="smra smallRaditation">
  <h5>130 000 so`m</h5>
  <hr>
  <div class="colBox">
    <h3>Ventilatsiya</h3>
    <div class="rowBox">
      <button class="pBtn pBasket">Savatga</button>
    </div>
  </div>
</div>


<div class="basket">

</div>

let basket = document.querySelectorAll(".basket")
document.querySelectorAll('.pBasket').forEach(item => {
  item.addEventListener('click', event => {
  basket.style.display = "block"
  })
})

Why does this work? I would expect SomeInterface to not be defined in time to be passed as an argument:

interface SomeInterface
  extends Model<
    InferAttributes<SomeInterface>,
    InferCreationAttributes<SomeInterface>
  >
{ ...

(example from https://sequelize.org/api/v7/types/_sequelize_core.index.inferattributes)

I am currently working on optimizing our website’s performance and search engine visibility, and I’ve noticed some indexing issues and other SEO-related challenges while using the AOS (Animate On Scroll) library on our site. Specifically, it appears that content dependent on AOS for visibility may not be indexed effectively by Google. Could you provide insights into how AOS might affect SEO and content indexing?
Example:

<link href="/home/assets/vendor/aos/aos.css" rel="stylesheet">
<script src="/home/assets/vendor/aos/aos.js"></script>
 <h1 data-aos="fade-up">Welcome to Our Website!</h1>
    <p data-aos="fade-up" data-aos-delay="200">
        We are excited to share our content with you. Scroll down to see more animations!
    </p>

I am attempting to hide the autocomplete bar above the keyboard on Chrome on Android, but all my various attempts are having no impact.

<input type="text"                           
  autocomplete="off" 
  autocorrect="off" 
  autocapitalize="off" 
  spellcheck="false"
  inputmode="text"
  enterkeyhint="next"
/>

JSFiddle demonstrating this: https://jsfiddle.net/38x2s4te/

Tested on Pixel 7, Chrome 130.0.6723.59.
Note: this works perfectly fine on latest iOS Safari and iOS Chrome browsers.

What is the magical incantation (if any) to get this to work?

Outer function for find max in array. Array contain some objects and f() used for get parameter from object.

function table_max(array, f)
{
    var rmax = -2147483648;

    for(var i = array.length - 1; i >= 0; i--)
    {
        if(f(array[i]) > rmax) rmax = f(array[i]);
    }
    return rmax;
}

This function used for create table:

function(o, p)
{
    return table_max(o.stats_g, function(o, p){ return p.stat[7]; });
}

But i get error: p is undefined.

But this work:

function(o, p)
{
    return p.stat[7];
}

I need to find cookie name and i try to use

import Cookies from "js-cookie"
const regexp = /^commercelayer_order-id/;
const orderId = Cookies.get(regexp)

i am stuck

I ve tried several ways to find by name , now i try a regexp.

Ill try to put it as simple as possible:

1. User click at element inside of div.
2. It triggers routing, replacing the content of a div with the same content, but routed.
3. I want the “click” action be re-executed after routing happens, at the same element that was clicked

What is the best way to do it?

var hero = {
    let character = Math.floor(Math.random() * 8);
    if (character === 0) {
        character = 'D.J. Sparkstorm';
    } else if (character === 1) {
        character = 'Forest Guardian Rose';
    } else if (character === 2) {
        character = 'Infernal Arrow';
    } else if (character === 3) {
        character = 'Captain L. Ness';
    } else if (character === 4) {
        character = 'Radiant Knight';
    } else if (character === 5) {
        character = 'Frozen Fist';
    } else if (character === 6) {
        character = 'Element';
    }
    let evolve = Math.floor(Math.random() * 8);
    if (character === 7) {
        if (evolve === 0) {
            evolve = 'D.J. Flarestorm';
        } else if (evolve === 1) {
            evolve = 'Frozen Tundra Guardian Rose';
        } else if (evolve === 2) {
            evolve = 'Sunflame Arrow';
        } else if (evolve === 3) {
            evolve = 'Arctic Admiral L. Ness';
        } else if (evolve === 4) {
            evolve = 'Solarain Knight';
        } else if (evolve === 5) {
            evolve = 'Icicleflare Fist';
        } else if (evolve === 6) {
            evolve = 'Cosmic Emporer Element';
        }
        let overload = Math.floor(Math.random() * 7);
        if (evolve === 7) {
            if (overload === 0) {
                overload = 'D.J. Excelling Thunder';
            } else if (overload === 1) {
                overload = 'Forest Reviver Rose';
            } else if (overload === 2) {
                overload = 'Flaming Wrath Arrow';
            } else if (overload === 3) {
                overload = 'Ocean General L. Ness';
            } else if (overload === 4) {
                overload = 'Shining Paladin';
            } else if (overload === 5) {
                overload = 'Roaring Blizzard Fist';
            } else if (overload === 6) {
                overload = 'Universal God Element';
            }
        }
    }
}
console.log(hero);

I tried using {} to select all of the code, and figured that would work, but it ended up creating an error for another part of the code. Another thing I tried was putting the code all on the same line as the variable declaration, but the same error occurred. Is there something that I am doing wrong, or will this just not work at all.

I’ve been trying to download audios off the Whatsapp API, however no matter what I try it will not let me.

I first make a call to retrieve the URL of the audio and that works fine, however when I try to download the audio it always errors out.

I’ve tried using fetch and axios, and after playing around with Postman I got it to work there, and I can see my audio but I haven’t managed to get it to work in Node.

I’ve tried using many different headers, but to no avail.
Usually I get a 400 error, but playing around with the headers I’ve managed to get ‘fetch failed’ error, but I’m kinda stuck there, don’t know what else to try.

There are other questions like this one but I’ve tried their answers to no avail already.

My code:
`
async function downloadAudio(url,outputPath, audioType){

var file = fs.createWriteStream(path.join(outputPath, `audio.${audioType}`) );

try {
    var response = await fetch(url, {
        method: 'GET',
        headers: {
            'Authorization': `Bearer ${apiKey}`,
            'Host': new URL(url).host,
            'User-Agent': 'PostmanRuntime/7.42.0',
            'Accept': '*/*',
            'Accept-Encoding': 'gzip, deflate, br',
            'Connection': 'keep-alive',
            'Transfer-Encoding': 'chunked',
            'Content-Type': 'audio/ogg',
        },
    });

    if (!response.ok) {
        throw new Error(`Failed to get '${url}' (${response.status})`);
    }  

    response.body.pipe(file);

    return new Promise((resolve, reject) => {
        file.on('finish', () => {
            file.close();
            console.log(`Downloaded audio to ${outputPath}`);
            resolve();
        });

        file.on('error', (err) => {
            fs.unlink(outputPath, () => {}); 
            reject(err);
        });
    });
} catch (error) {
    console.error(`Error downloading the audio: ${error.message} n${error}`);
}

}`

We are using javascript to display a map, which looks great, but when something above it pushes the map down, the bottom of the map gets hidden by the element below it. Also, using pretty standardd bootstrap

I was expecting the map to push down visual elements, below it.

Currently, it’s not possible to define an event handler on an element which will fire when the element is attached/added to the DOM.

<div id="data" onattach="this.innerText = someConfig.something.data"></div>

Is there another way to have this work without using an external script:

function setData() {
    document.getElementById("data").innerText = someConfig.something.data;
}

If not, are there any plans in upcoming JS/ES spec for this sort of feature? I was not able to find anything.

I am running into an issue with ag grid related to the agSetColumnFilter filter in a React application. If you set the agSetColumnFilter filter, then click on the row in the filtered table, the agSetColumnFilter filter resets and all the rows return. There is an onCellClicked method that seems to be causing this behavior, but all it does is update React state (which we need to occur without the filter being modified). I have broken the code down to its simplest components and I am not sure why this behavior is occurring. I have tried adding

apply: true, 
newRowsAction: "keep", 

to the affected filter but that has not changed the behavior occurring.

I have also tried adding the flag “deltaRowDataMode=true” to the table itself and that has also not solved the issue.

Here is the relevant code:

import React, { useState, useEffect } from "react";
import { AgGridReact } from "ag-grid-react";
import "ag-grid-enterprise";

import data from "./data.js";
import filters from "./filters.js";
import "./table.scss";

const Table = () => {
  const [drawerOpen, setDrawerOpen] = useState(false);

  const columns = [
    {
      headerClass:
        "base__name-header-cell table__name-header-cell",
      headerName: "Name",
      field: "name",
      cellClass: () => "base__name-cell table__name-cell",
      pinned: "left",
      sort: "asc",
      suppressFloatingFilterButton: true,
      floatingFilterComponentParams: {
        className: "table__name-search-filter",
        option: "contains",
      },
      filter: "agTextColumnFilter",
      minWidth: 270,
      exportable: true,
    },
    // The following filter is the one that is affected by this:
    {
      headerName: "Type",
      cellClass: "type-cell",
      field: "type",
      filter: "agSetColumnFilter",
      filterParams: {
        values: filters.types,
        suppressAndOrCondition: true,
        defaultToNothingSelected: true,
        apply: true,
        newRowsAction: "keep",
      },
      suppressFloatingFilterButton: true,
      filterValueGetter: (params) => {
        let types = [...params.data.types];
        return types;
      },
      minWidth: 160,
      maxWidth: 200,
      exportable: true,
    },
  ];

  const openDrawer = () => {
    setDrawerOpen(true);
  };

  const onCellClicked = () => {
    openDrawer();
  };

  const defaultColDef = {
    suppressHeaderMenuButton: true,
    sortable: true,
    filter: true,
    floatingFilter: true,
    sortingOrder: ["desc", "asc", null],
    headerCheckboxSelectionFilteredOnly: true,
    filterParams: { newRowsAction: "keep" },
  };

  return (
    <div className="ag-theme-alpine-dark base table js-table">
      <div>
        <AgGridReact
          deltaRowDataMode={true}
          columnDefs={columns}
          defaultColDef={defaultColDef}
          domLayout="autoHeight"
          onCellClicked={onCellClicked}
          paginationPageSize={50}
          rowData={data}
          rowHeight={40}
          rowSelection="multiple"
          suppressRowClickSelection
          autoSizeStrategy={{ type: "fitCellContents" }}
          getRowId={(params) => params.data.assessmentId}
        />
      </div>
    </div>
  );
};

export default Table;

I feel as though there has to be a simple solution to this as I don’t believe simply clicking on a row and having it reset a filter would be the default behavior. Note that this is also not the only table we have with this affected behavior, there are more tables with more complex logic also having this same issue, but I hope solving it here will also apply elsewhere. Also note that this only affects the agSetColumnFilter filter, all other filters do not appear to be affected by this. Please advise if I am missing some type of configuration for this ag-grid table.

I thought about creating a project that uses Jspreadsheet to build interactive Excel tables, where people can easily and simply fill in data without needing to install anything complicated. The idea is that a company that needs to collect information from different departments, like sales or inventory, could have each team use these tables directly in the browser to input data. Once the data is entered, it would automatically be sent to a backend developed in Java.

This backend would have the role of taking the data from the tables and converting it into PDFs. For example, if the sales team fills in a spreadsheet with goals and results, the Java backend would convert that data into a PDF report using a library like iText or Apache PDFBox. This would ensure that the data is organized and ready to be shared or archived.

After generating the PDFs, the system would store these files in a secure location. I’m thinking about using a cloud storage solution like AWS S3, which makes managing large volumes of files easier and ensures they’re always accessible. Another possibility would be to store these files directly in a database, like PostgreSQL or MySQL, especially if there’s a need for detailed queries or to organize the data by specific categories.

In addition to the PDFs, the raw data from the spreadsheets would also be stored, so we can perform future analyses. For example, if the management team wants to analyze sales performance over the last six months, with the data already organized and stored, the system could generate detailed reports based on the previously filled information. This helps both with analysis and tracking goals and performance.

So, the project flow would be as follows: the user enters Jspreadsheet, fills in the tables with the necessary data (whether it’s sales, inventory, or something else), the Java backend processes this data, converts it into PDFs, and stores them securely. Finally, all the data remains accessible for future queries and deeper analyses. This would create a complete solution, integrating data collection, report generation, and efficient storage, all in an automated and accessible way.

I’m really eager to move this idea forward, but I know a project like this involves many technical details and different areas of expertise. That’s why I need help to make it all happen. If anyone is interested in participating in this project.

I tried to do the front end and hope to get help for the back end

I’m working on a Cube.js project where I need to configure pre-aggregations to refresh at regular intervals, specifically every 12 hours or at a specific time like 4:00 AM UTC. I’ve set up a cube to optimize query performance using pre-aggregations, but I’m unsure how to configure the refresh schedule to achieve this behavior.

When testing the last refresh using Postman, for example, checking every 5 minutes, Cube.js doesn’t seem to respect the scheduled refresh time, even though I’ve set it for every 5 minutes. The refresh happens inconsistently.

Here’s an example of my Orders cube where I want to apply these configurations:

cube('Orders', {
  sql: `SELECT id, user_id, total_price, added_at FROM public.orders`,

  preAggregations: {
    OrdersSummary: {
      dimensions: [Orders.id, Orders.userId, Orders.totalPrice],
      refreshKey: {
        every: '12 hour'
      }
    },
    OrdersDetails: {
      dimensions: [Orders.id, Orders.userId, Orders.addedAt],
      refreshKey: {
        every: '12 hour'
      }
    }
  },

  dimensions: {
    id: {
      sql: `id`,
      type: `number`,
      primaryKey: true
    },
    userId: {
      sql: `user_id`,
      type: `number`
    },
    totalPrice: {
      sql: `total_price`,
      type: `number`
    },
    addedAt: {
      sql: `added_at`,
      type: `time`
    }
  }
});

I am new to SolidJS and have implemented solidjs/router for route navigation in my starter project. I want to reinitialize certain functionalities whenever the route changes. I initially wrote the reinitialization logic using useLocation and createEffect, but this approach doesn’t seem to work with the latest version of solidjs/router (v0.14.10). Interestingly, when I downgrade to version (v0.9.1), the same code works as expected.

Here’s the code I used:

const App = () => {
  const location = useLocation();
  createEffect(() => {
    const currentPath = location.pathname;
    console.log(`Route changed: ${currentPath}`);
    
    window.HSStaticMethods.autoInit();
  });

  return (
    <Router>
      <div class="bg-base-200/60 min-h-screen">
        <Navbar />
        <div class="p-6">
          {/* Define routes */}
          <Route path="/" component={Home} />
          <Route path="/button" component={Button} />
          <Route path="/card" component={Card} />
          <Route path="/form-elements" component={FormElements} />
          <Route path="/accordion" component={Accordion} />
          <Route path="/advance-forms" component={AdvanceForms} />
          <Route path="/overlays" component={Overlays} />
        </div>
      </div>
    </Router>
  );
};

export default App;

However, I encounter an error :Error Image.

Could anyone guide me on how to resolve this issue in the latest version?

Thank you in advance!

I encountered an issue with the following code, which causes an error in my project:

const location = useLocation();
createEffect(() => {
  const currentPath = location.pathname;
  console.log(`Route changed: ${currentPath}`);
  
  window.HSStaticMethods.autoInit();
});

When I remove this section of code, the project functions correctly, but the desired behavior of reinitializing when the route changes is lost. As a result, the component’s JavaScript is not re-triggered upon navigation.

I’m looking for guidance on how to ensure that my components reinitialize properly when the route changes, without causing any errors. Any advice or suggestions would be greatly appreciated!