Category: javascript

I have a makeUrl helper function, which uses a timestamp so that the image refreshes in the browser. Without it, the image won’t refresh, because it will have the same URL.

const timestamp = `timestamp=${Date.now()}`;

const output = `${person.photo}/400?${timestamp}`

It will be used like this:

<Avatar url={makeUrl(person)} />

But Next.js will complain that the image URL don’t match in the server and in the client, because the Date.now() will create a different time.

How to solve this issue?

Title is my best guess at the problem. Here is what is happening:

I need to download several thousand files from a very old system (Cogon, in case anyone is interested). For several reasons, the only way to get the data I need, is to click through the system (which works fine), request an archive, limit the “from” and “to” dates to one single day (dialogue shown in the screenshot), click on “Ok”, and then download the selected data.

When I perform the sequence manualy, everything works fine. However, when I use Power Automate Desktop, I can populate the fields just fine in several ways (explained below), but if I click on “Ok”, the system acts as if I made no inputs.

Does anyone have an idea what might be happening, and how to solve this problem?

Here is the dialogue I am having trouble with:

This is the code of the input field for the “from” day (hence the value 25)

<div style="width:100%;height:100%;overflow:hidden;">
<table class="Common-CellPadding0 Common-CellSpacing0 DateTimePicker-Layout" dir="LTR">
<tbody><tr>
<td class="nobr Common-AlignCenter Common-VAlignMiddle">
<input 
id="VWG10845_1" type="text" data-vwgeditable="1" value="25"
class="Common-FontData DateTimePicker-InputValue_eq"
style=
"width:13px;display:block;margin:0px;padding:0px;
clear:both;position:static;text-align:center;text-shadow:inherit;"
onfocus="mobjApp.DateTimePicker_OnFocus('10845','1',this,window);
"data-vwgposition="1
"onkeydown="mobjApp.DateTimePicker_OnKeyDown('10845',this,window,event);
"onblur="mobjApp.DateTimePicker_OnTokenBlur('10845','1',this,window);
"onclick="mobjApp.DateTimePicker_OnClick(window,this,'10845','1');
"onmouseup="mobjApp.DateTimePicker_OnMouseup(event);" tabindex="-1" data-vwgfocuselement="1">
</td></tr></tbody>
</table></div>

What I tried so far:

• Sending numbers as keyboard commands
• Sending numbers as keyboard commands as emulated strokes
• Sending only Up/Down commands
• Using JS code to set the value of the fields

Here is the JS code I am using to set the values:

function ExecuteScript()
{
document.querySelectorAll('input[id ^=VWG][id $=_1][class="Common-FontData DateTimePicker-InputValue_eq"]')[0].value=%Tag%;
document.querySelectorAll('input[id ^=VWG][id $=_3][class="Common-FontData DateTimePicker-InputValue_eq"]')[0].value=%Monat%;
document.querySelectorAll('input[id ^=VWG][id $=_5][class="Common-FontData DateTimePicker-InputValue_eq"]')[0].value=%Jahr%;
document.querySelectorAll('input[id ^=VWG][id $=_1][class="Common-FontData DateTimePicker-InputValue_eq"]')[1].value=%Tag%;
document.querySelectorAll('input[id ^=VWG][id $=_3][class="Common-FontData DateTimePicker-InputValue_eq"]')[1].value=%Monat%;
document.querySelectorAll('input[id ^=VWG][id $=_5][class="Common-FontData DateTimePicker-InputValue_eq"]')[1].value=%Jahr%;
}

The selector is done this way because the ID changes every time the dialogue is created. Setting the value of the field works just fine, visually at least. But when I focus the field and, e.g., press “Down”, the day is set to 24, no matter what value I set before.

Could this be, because there is some magic in the JS functions that makes them talk to the backend? And I am somehow not triggering it, even though I am simulating physical button presses?

I’ve got a new project which I started with strapi v5 (5.4.1 at the moment).
In this I’ve got a custom controller for the current user as I want to query relations for the user as well. So I made a custom controller for the /api/user endpoint.

And here’s where my question comes; when querying the /api/user endpoint, strapi takes the jwt sent with the request and finds the assciated user. It does not, however, sanitize the user data, i.e. the hashed password is included in the response. In strapi v4 you could sanitize a user object with something like this:

const user = await strapi.entityService.findOne('plugin::users-permissions.user', id, {
      populate: ['teams',],
    });

const schema = strapi.getModel('plugin::users-permissions.user');
return await utils.sanitize.contentAPI.output(user, schema);

which would then return the sanitized user object without the hashed password field. Unfortunately this method doesn’t work anymore in v5. So my question would be: How do I sanitize the user object in strapi v5?

Any help would be greatly appreciated, greetz
DeM

I am building a ReactJS application using AG Grid, with the following component structure:

Grid.jsx: Contains the AG Grid component.

GridContainer.jsx: Renders the Grid.jsx component.

Main.jsx: Manages multiple tabs, each triggering different API calls.
Workflow:

The Main.jsx component has a shared state, rowData, to store data for AG Grid.
On switching tabs, an API call is made using axios, and the response is used to update the rowData state.

The GridContainer.jsx renders the grid using this state.

Problem:
When switching between tabs, if the API response for a previously selected tab is delayed, it updates the shared rowData state after the tab has been changed. This causes AG Grid to display outdated data from the previous tab in the currently active tab.

Expected Behavior:
The grid should display only the data relevant to the currently active tab. Outdated API responses from previously active tabs should not affect the state or grid rendering.

How can I handle that, AG Grid displays data only for the active tab, even when previous API responses are delayed?

Just to understand more clear, the below flow diagram:

-Click TAB 1, which triggers an API call to fetch data for TAB 1.

-Quickly switch to TAB 2, which triggers a new API call for TAB 2.

-Initially, TAB 2 displays the correct data.

-If the TAB 1 API response arrives late (e.g., after 10 seconds), the shared rowData state is updated with TAB 1 data, causing TAB 2 to display incorrect information.

Looking for some help to build a deeply nested data structure in JavaScript.

I will have input data that takes the form like this:

      [
        ["World", "Asia", "Singapore", "Asia-Singapore", "1300"],
        ["World", "Asia", "India", "Asia-India", "850"],
        ["World", "Asia-Singapore", "Bond", "Bond-Singapore", "650"],
        ["World", "Asia-Singapore", "Bond", "Singapore-Bond", "650"],
        ["World", "Asia-China", "Bond", "Bond-China", "600"],
        ["World", "Asia-China", "Bond", "China-Bond", "600"],
        ["World", "Asia-India", "Equity", "Equity-India", "500"],
        ["World", "Asia-India", "Equity", "India-Equity", "500"],
        [
          "World",
          "Asia-China",
          "Private Equity",
          "China-Private Equity",
          "400",
        ],
        [
          "World",
          "Asia-China",
          "Private Equity",
          "Private Equity -China",
          "400",
        ],
        ["World", "Asia-India", "Bond", "Bond-India", "350"],
        ["World", "Asia-India", "Bond", "India-Bond", "350"],
        [
          "Jupiter",
          "Asia-Singapore",
          "Private Equity",
          "Private Equity -Singapore",
          "350",
        ],
        [
          "Jupiter",
          "Asia-Singapore",
          "Private Equity",
          "Singapore-Private Equity",
          "350",
        ],
        ["Jupiter", "Asia-Singapore", "Equity", "Equity-Singapore", "300"],
        ["Jupiter", "Asia-Singapore", "Equity", "Singapore-Equity", "300"],
        ["Jupiter", "Asia", "China", "Asia-China", "Franky", "290"],
        ["World", "Asia-China", "Equity", "China-Equity", "250"],
        ["World", "Asia-China", "Equity", "Equity-China", "250"],
        ["World", "Asia", "China", "Asia-China", "Billy", "110"],
        ["World", "Asia", "China", "Asia-China", "Freddy", "50"],
      ];

With an unpredictable number of columns in each row and I need to be able to create an output with the following structure (does not eactly match values from above, but required structure should be clear):

   const testData = [
      {
        name: "World",
        children: [
          {
            name: "Asia",
            children: [
              {
                name: "Asia-China",
                value: 110,
              },
            ],
          },
        ],
      },
      {
        name: "Jupiter",
        children: [
          {
            name: "Asia-Singapore",
            children: [
              {
                name: "Google",
                value: 200,
              },
            ],
          },
        ],
      },
    ];

So it will need to loop through each row though the flat array given (always with the ‘Value’ as the last item in the array that is the row, but not necessarily the same number of other values every time) and create groups for as many levels as there are, nesting child nodes and then putting the ‘Value’ value when there are no child nodes to add.

Hopefully someone can help me structure this up – I get all tied up in mental knots when it comes to anything recursive like this.

I’ve setup an Outlook Add-in using an XML manifest file. I’ve got some buttons appearing in a menu drop down on the UI. When I click the buttons it says my request is being worked on and does nothing (I’m expecting message boxes on the click of these) <attached>

I’ve tried checking all the references and files involved. Double-checked the xml for the button, function is ShowAlert1:

<DesktopFormFactor>
            <FunctionFile resid="functionFile" />

            <!-- Message compose form -->
            <ExtensionPoint xsi:type="MessageComposeCommandSurface">
              <OfficeTab id="TabDefault">
                <Group id="msgComposeDemoGroup">
                  <Label resid="groupLabel" />
                  <!-- Function (UI-less) button -->
                <Control xsi:type="Button" id="msgComposeFunctionButton1">
                  <Label resid="funcComposeButtonLabel" />
                  <Supertip>
                    <Title resid="funcComposeSuperTipTitle" />
                    <Description resid="funcComposeSuperTipDescription" />
                  </Supertip>
                  <Icon>
                    <bt:Image size="16" resid="blue-icon-16" />
                    <bt:Image size="32" resid="blue-icon-32" />
                    <bt:Image size="80" resid="blue-icon-80" />
                  </Icon>
                  <Action xsi:type="ExecuteFunction">
                    <FunctionName>showAlert1</FunctionName>
                  </Action>
                </Control>

My function file is:

<bt:Url id="functionFile" DefaultValue="https://localhost:3000/Functions.html"/>

Within Functions.html is the ref to the js file with my function:

<script src="Functions.js" type="text/javascript"></script>

and finally the Functions.js has my function def:

function showAlert1() {
    alert("This is an alert box!");
    
    event.completed();
}

ALL three of these files, the manifest, the functions.html and functions.js are in the same folder. I’m running a localhost and it hasn’t complained in red about any of these files….
Can someone help to debug this or am I doing something obviously wrong?

i got some problem on next.js 15.0.3, node.js 20.15.0 and rocky linux 9.4 (Blue Onyx)
i was trying to navigate to a specific page through the tag.
but i got error.

[TypeError: fetch failed] {
  cause:  [ConnectTimeoutError: Connect Timeout Error] {
  name: 'ConnectTimeoutError',
  code: 'UND_ERR_CONNECT_TIMEOUT',
  message: 'Connect Timeout Error'
}
}

this component is client compoenet i try to reached.

'use client'

//...
export const dynamic = 'force-dynamic';
//...
export default function Component() {
    const fileRef = useRef<HTMLInputElement>(null);
    const [ file, setFile ] = useState<File>();
    //...
    const router = useRouter();
    //...
    const onSave = async () => {
        const formData = new FormData();
        if(file) {
            //...
            formData.append('file', file);
            //...
        } else {
            alert('error');
            return false;
        }
        try {
            const result = await fetch(UPLOAD, {
                method: 'POST',
                body: formData,
                credentials: 'include',
            }).then(res => res.json());
            if(result.success) {
                router.push(`/path/${result.file_id}`);
            } else {
                alert('error');
            }
        } catch(e) {
            console.error(e);
            alert('error');
        }
    };
    //...
    return <div>
        //...
        <div>file: <input ref={fileRef} type="file" accept="image/*" onChange={onFileChange} /></div>
        <button onClick={onSave}>commit</button>
        //...
    </div>;
}

it load the page very slowly at first time.
but load success then become a normally;
i don’t know what is problem.

strangely it works in my computer(next.js 15.0.3, node.js 20.15.0, MacOS).

My app is running on port 3000, but when try to access my endpoints via my https://site-url, the errorlogs show that i am trying to access static files and i get response from my API,can anyone help me identify the error in my markdown.

#Server blocks for incoming HTTP requests
server {
    if ($host = www.tendaafrica.net) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = tendaafrica.net) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    # server block for 'tendaafrica.net', 'www.tendaafrica.net' domains
    listen 80;
    listen [::]:80;
    server_name tendaafrica.net www.tendaafrica.net;
    # redirect any HTTP request to HTTPS
    return 301 https://$http_host$request_uri;




}
server {
    if ($host = api.tendaafrica.net) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    # server block for 'api.tendaafrica.net' domain
    listen 80;
    listen [::]:80;
    server_name api.tendaafrica.net;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }


}
server {
    # server block for 'static.tendaafrica.net' domain
    server_name static.tendaafrica.net;
    root /var/www/tenda-main;
    index index.html index.htm;
    location / {
        try_files $uri $uri/ =404;
    }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/tendaafrica.net/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/tendaafrica.net/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


}
server {
    # server block for all the other requests
    # this block will be a default server block listening on port 80
    listen 80 default_server;
    listen [::]:80 default_server;
    # close the connection immediately
    return 444;
}

# server blocks for incoming HTTPS requests
server {
    # server block for 'tendaafrica.net', 'www.tendaafrica.net' domains
    listen [::]:443 ssl;
    listen 443 ssl;
    server_name tendaafrica.net www.tendaafrica.net;

    # SSL configuration by certbot
    ssl_certificate /etc/letsencrypt/live/tendaafrica.net/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/tendaafrica.net/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot

The nginx server works very well, but my app is not served as it should be served

Works fine on desktop but on the newest version of iphone on fully updated chrome or safari is giving this error

SHA256 error: undefined is not an object (evaluating 'crypto.subtle.digest')

Is this just simply incompatible with mobile browsers? If so what is the native alternative for mobile chrome without using an external library?

I was thinking that the issue had to do with HTTPS/HTTP (testing in an HTTP LAN) but I’m wondering how https://github.com/Niek/obs-web gets around this as this works fine over HTTP on mobile.

I know there are two different APIs for getting compass heading in Javascript, one for iOS and one for everyone else, aka android:

• on iOS I request permission, then listen for deviceorientation events and snag the event.webkitCompassHeading value.
• on Android I listen for deviceorientationabsolute events and snag the event.alpha value.

I have been assuming that this value returns a bearing to magnetic north, and that for mapping purposes, I should adjust, using the geomagnetism library, to point to true north.

That said, I realized that none of the guides or spec pages that I’ve read confirm this fact… This leaves me with two questions:

• Is the deviceorientation::webkitCompassHeading value relative to magnetic north, or has it already been compensated to true north?
• Is the deviceorientationabsolute::alpha value relative to magnetic north, or has it already been compensated to true north?

I know the adjustment is likely too small to matter compared to the inaccuracy of the compass itself (at least for most populated areas), but I wanted to know for sure.

I’m building a list of keywords as buttons.

I want my list to look like this:

<a href='Javascript:false' onclick='filterOnKeyword("Alice")'>Alice</a></span>
<a href='Javascript:false' onclick='filterOnKeyword("Bob")'>Bob</a></span>
etc.

And I’m building it out like this:

function buildKeywordList(keywordArray){
    $.each(keywordArray, function(i,val){
    $(".keyword-list").append("<a href='Javascript:false' onclick='filterkeyword('" + val + "')'>" + val + "</a></span>");
    });
}

But this is what is being rendered:

<a href="Javascript:false" onclick="filterkeyword(" structure')'>structure</a>

Seems to be messing up the order of the quotes.

I tried pulling the string out into a variable, like this:

    var str = "filterkeyword('" + val + "')";
    $(".keyword-list").append("<a href='Javascript:false' onclick='" + str + "'>" + val + "</a></span>");

but it changed nothing.

It’s been decades since I had to write code with escaped quotes. Obviously I’ve forgotten how to do it.

I’d also accept alternate ways of doing this (i.e. ones from the 21st century).

I am looking for a free to use Solar Radiance / Radiation API, as I want to be able to recreate this map online for a small app I am building, non commercial use.
JRC Photovoltaic Geographical Information System (PVGIS) – European Commission
So I wonder how or where I can source such data (As I only found paywalls and raster data, and my guess is that I need some sort of json or so and then be able to map it from there) Or perhaps is there a way that through an iframe I could fetch the map results based on input of the places I want to look for?
Thanks,

I am referring to customizable <select> described at https://developer.chrome.com/blog/rfc-customizable-select.

All works as described; but I hit a wall trying:

document.querySelector('select').addEventListener('change',dropdownHandler);
// or
document.querySelector('selectedoption').addEventListener('change',dropdownHandler);

as no event gets fired […or I’m just a noob].

Please help me with my REGEX. Currently, we have code that replaces words/patterns. If I type in only the SSN like 123-12-1234. It will be replaced by ***********. However, if I type in "My SS# is 123-12-1234" it will not work since its part of a sentence. I am not sure why my regex does not match this. Here it is:

^(?!(000|666|9))d{3}-(?!00)d{2}-(?!0000)d{4}$^(?!(000|666|9))d{3},(?!00)d{2},(?!0000)d{4}$

I tried using other regex such as : /bd{3}-d{2}-d{4}b/g but this does not work as well.
expected behavior is to match any pattern even if its in a sentence or paragraph.

I cannot get my eas build of my app to work because it can’t find the audio file I’m importing on my home screen. The specific eas command I’m running is eas build --platform ios --profile preview. The error happens in the bundle javascript step. Note this error does not happen when I run a development build of the app in the simulator (npx expo run:ios -d

Unable to resolve module ../../assets/audio/meditation_10_min.mp3 from /Users/expo/workingdir/build/app/(tabs)/index.jsx: 

const track = require("../../assets/audio/meditation_10_min.mp3");
const player = useAudioPlayer(track);

What I’ve tried

1. Not using require and just importing the asset like normal.
2. Using expo-asset like so:

const [assets, error] = useAssets([
    require("../../assets/audio/meditation_10_min.mp3"),
  ]);
const player = useAudioPlayer(assets[0]);

It doesn’t work, assets is undefined. I’m not sure how this API is supposed to be used. It feels like it’s missing some loading boolean so I don’t pass undefined to my useAudioPlayer call.

3. Embedding the asset directly in the app at build time with expo-asset

    //app.json
    "plugins": [
          "expo-audio",
          [
            "expo-asset",
            {
              "assets": ["./assets/audio/meditation_10_min.mp3"]
            }
          ]
        ], 

// usage in component

import { useAudioPlayer } from "expo-audio";
const player = useAudioPlayer("meditation_10_min.mp3");