Category: javascript

We have developed web based application in asp.net Core 6.2. Application required to timeout in 15 mins for data security. It works perfectly if we have any call for server side but we have many client side operations using JavaScript and Ajax call, in this application is not doing session timeout. What is based approach to handle session timeout in 15 mins if user perform only client side activity. Please guide and thanks in advance.

I’m working on a web application where I need to show desktop notifications for real-time updates (e.g., Case updates in Salesforce) using CometD. The notifications should start working during a specific popup (e.g., a login flow popup) and should continue to work even after the user navigates away from the popup, without embedding the solution on any persistent Salesforce page.

Current Implementation:
I’ve built a web page that uses CometD to subscribe to a topic (e.g., /topic/Caseupadte).

The page is displayed in a popup during a login flow.

When the user clicks “Continue,” they are redirected to another page, and the popup closes.

Problem:
The CometD connection works fine while the popup is open, but as soon as the user navigates away (e.g., clicks “Continue”), the connection is lost, and notifications stop.

I’ve tried enabling WebSocket transport and configuring automatic reconnection, but the connection is still lost when the page is unloaded.

What I’ve Tried:
WebSocket Configuration:

Enabled WebSocket transport and fallback to long polling.

Added reconnect, maxConnections, and backoffIncrement for automatic reconnection.

Expectation:
The notifications should start working during a specific popup page(e.g., a login flow popup) and should continue to work even after the user navigates away from the popup page, without embedding the solution on any persistent Salesforce page.

I’m looking for someone who can help me coding/creating a (automatically updating) line chart with data from a online JSON file. The JSON file I want to use contains different kinds of data. But I would like to display only one specific group of data from the JSON file in a line chart, see the image ‘JSONdata’ below:

The line chart itself should look something like the chart shown on the image ‘Linechart’ below:

Link to the online JSON file I want to use: JSONfile

I already searched on Google and Youtube for some tutorials and information to create the kind of line chart I want, but this didn’t help much so far. Hopefully there are some more experienced developers here who can help me with this project.

As the title say, how can I get the raw data that comes in 2 colum format from an response on XHR (Inspect confirmed) as “ct” “iv” “s”
Also in the asset folder is the CryptoJS

Nothing due to lack of JS knowledge AES-min and AES-format

I’m implementing login using Flask as the backend and Next.js for the frontend. The login works fine—the session cookie is set and appears in the browser. However, when I try to access protected routes, the Next.js middleware doesn’t detect the session cookie, and it redirects the user back to the login page.

Here’s the Flask login endpoint:

@auth_bp.route('/login', methods=['POST'])
def login():
    data = request.json
    name = data.get('name')
    password = data.get('password')
    
    user = User.query.filter_by(name=name).first()

    if user and user.check_password(password):
        session["user_id"] = user.id
        return jsonify({
            "user_id": user.id,
            "user_name": name,
            "redirect": "/home"
        })
    
    return jsonify({"error": "Invalid Credentials"}), 401

And this is my middleware.js in Next.js:

import { NextResponse } from 'next/server';

export function middleware(request) {
    const session = request.cookies.get('session');
    const { pathname } = request.nextUrl;

    console.log('session: ', session)
}

export const config = {
    matcher: ['/', '/home/:path*', '/login', '/register'],
};

The problem is that request.cookies.get(‘session’) always returns undefined. The cookie is visible in the browser under Application > Cookies. What could be causing the middleware to not detect the cookie?

I’ve confirmed that:

The cookie is set in the browser.
Middleware is running and logging the output.
How can I make the middleware detect the session cookie properly?

So i’m currently making a discord bot with slash commands but it sends me this error :
“unknown integration“

instead of running the command which is supposed to shut down the bot

some details on my code :

• discord.js version : 14.17.3

• node.js version (ON VSCODE) : v18.20.5

• node.js version (ON RENDER) : v22.12.0

• os : windows

• running on https://render.com

what i tried to do :

• i’ve used this documentation website to help me with the slash commands + event handler (i modified some parts of the codes so i’m linking my github project) : https://discordjs.guide/#before-you-begin

• i’ve double checked the settings of my bot on the developper portal and on my discord server (everything is okay)

• i’ve also tried to ask ai to improve my code and add things that i didn’t know how to do (the code worked perfectly fine but i’ve double-checked incase)

here’s the error i get on render when i run a command :

TypeError: interaction.isChatInputCommand is not a function
    at Object.execute (/opt/render/project/src/events/interactionCreate.js:6:22)
    at Client.<anonymous> (/opt/render/project/src/index.js:34:50)
    at Client.emit (node:events:524:28)
    at InteractionCreateAction.handle (/opt/render/project/src/node_modules/discord.js/src/client/actions/InteractionCreate.js:97:12)
    at module.exports [as INTERACTION_CREATE] (/opt/render/project/src/node_modules/discord.js/src/client/websocket/handlers/INTERACTION_CREATE.js:4:36)
    at WebSocketManager.handlePacket (/opt/render/project/src/node_modules/discord.js/src/client/websocket/WebSocketManager.js:348:31)
    at WebSocketManager.<anonymous> (/opt/render/project/src/node_modules/discord.js/src/client/websocket/WebSocketManager.js:232:12)
    at WebSocketManager.emit (/opt/render/project/src/node_modules/@vladfrangu/async_event_emitter/dist/index.cjs:287:31)
    at WebSocketShard.<anonymous> (/opt/render/project/src/node_modules/@discordjs/ws/dist/index.js:1190:51)
    at WebSocketShard.emit (/opt/render/project/src/node_modules/@vladfrangu/async_event_emitter/dist/index.cjs:287:31)
Emitted 'error' event on Client instance at:
    at emitUnhandledRejectionOrErr (node:events:407:10)
    at process.processTicksAndRejections (node:internal/process/task_queues:92:21)

this is the file where the error is happening :

interactionCreate.js

const { Events, MessageFlags } = require('discord.js');

module.exports = {
  name: Events.InteractionCreate,
  async execute(interaction) {
    console.log(interaction); // interaction logging
    if (!interaction.isChatInputCommand()) {
      return;
    }

    const command = interaction.client.commands.get(interaction.commandName);

    if (!command) {
      console.error(`No command matching ${interaction.commandName} was found.`);
      return;
    }

    try {
      await command.execute(interaction);
    } catch (error) {
      console.error(error);
      if (interaction.replied || interaction.deferred) {
        await interaction.followUp({ content: 'There was an error while executing this command!', flags: MessageFlags.Ephemeral });
      } else {
        await interaction.reply({ content: 'There was an error while executing this command!', flags: MessageFlags.Ephemeral });
      }
    }
  },
};

the console shows me that the commands are loaded but there’s not anything about interaction

Scanning commands directory: /opt/render/project/src/commands
Found the following folders/files: [ 'ping.js', 'shutdown.js' ]
Checking folder/file: /opt/render/project/src/commands/ping.js
Reading command file: /opt/render/project/src/commands/ping.js
Loaded command: ping
Checking folder/file: /opt/render/project/src/commands/shutdown.js
Reading command file: /opt/render/project/src/commands/shutdown.js
Loaded command: sleep
Found 2 commands to deploy.
Started refreshing 2 application (/) commands.
Successfully reloaded 2 application (/) commands.
Ready! Logged in as NookBot#xxxx

the structure of the bot :

I tried to find the address of fopen in libc

But sometimes the libc is libc-2.20.so or libc-2.21.so

So I tried Module.findExportByName("libc*.so", 'fopen');

But that not help, why? is there any solution ?

Here is 1.html

<!DOCTYPE html>
<html>
  1
  <script>
    let time = 0;
    setInterval(() => {
      if (time === 500) location.href = '/2.html';
      time++;
    }, 1);
  </script>
</html>

And here is 2.html

<!DOCTYPE html>
<html>
  <body>
    2
  </body>
</html>

If access to 1.html, according to setInterval, the page will be moved to 2.html 0.5 seconds later by location.href. However, it is not possible to go back to 1.html using back button on a browser. I’ve heard that the reason of it is location.href was executed not by user events (like clicking) but by force caused by my code. I want to know how to make it work!

I tried history.pushState method to make the browser know that there is one more page you(browser) should add to the stack. It worked if I go back to previous page by history.back(). However, it still didn’t work if I tried to go back to previous page by pressing go back button on a browser.

I’m encountering an issue with image paths in my local website project hosted on a Raspberry Pi using Apache2. The website is a school project, and I’m using a shared navbar loaded via JavaScript. The problem is that icons (specifically SVGs) aren’t loading correctly when the navbar is injected via JavaScript, but do load when the HTML file containing the navbar is accessed directly. This worked perfectly fine when hosting the site locally on a Windows PC. Here’s a screenshot of the network error in the browser’s developer tools: https://i.sstatic.net/TfYe0IJj.png

The issue seems specific to pages where the navbar is loaded via JavaScript (e.g., homePage.html). When I navigate directly to the navbar files themselves (e.g., main/userNavBar.html), the icons load fine.

Here’s the relevant code snippet that attempts to load the image in the navbar:

    <a href="./loginPage.html"><button>
        <img src="/icons/person_8342b8.svg" alt="login Icon" class="login-button-icon">
        <span>User Login</span>
      </button></a>

my file tree:

project/
├── admin/
│   ├── addUser.html
│   ├── deleteUser.html
│   ├── editUser.html
│   └── adminNavBar.html
├── login/
│   ├── adminLogin.html
│   ├── userLogin.html
│   └── loginNavBar.html
├── main/
│   ├── homePage.html
│   ├── detailedPage.html
│   ├── historyPage.html
│   └── userNavBar.html
├── scrips/
│   ├── loadLoginContent.js
│   ├── loadAdminContent.js
│   └── loadMainContent.js
├── icons/
│   └── person_8342b8.svg
├── styles.css
├── index.html
└── .htaccess

I (with the use of AI) have tried to fix this by enabling things in the apache2.conf:

    <Directory /var/www/html>
       Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

and 000-default.conf:

    <Directory /var/www/html>
        Options Indexes  FollowSymLinks MultiViews
        AllowOverride All
        Require all granted
    </Directory>

and adding the .htaccess:

    AddType image/svg+xml .svg
    AddType image/png .png

I hope someone can help me with this since I can’t seem to find a solution online or with the use of an AI.
thanks in advance!

I have a grid paired with “target sums” for each row and column. Here’s an example:

   06 03 21 19
19  2  4  8  9
09  8  7  6  3
11  4  8  1  7
10  2  3  7  7

The goal is to determine which cells to remove to ensure that all target sums are met:

   06 03 21 19
19  2  .  8  9
09  .  .  6  3
11  4  .  .  7
10  .  3  7  .

It is guaranteed that there will always be a solution for this problem.

Currently, I determine which numbers can never be used for any of the sums, and remove those:

import { readFile } from "fs/promises";

const file = await readFile("input.txt", "utf8").then((contents) => contents.split("n"));

const dimension = Number(file[0]);

const colTargets = file[1].trim().split(" ").map(Number);
const rowTargets: number[] = [];

const matrix: number[][] = [];

for (let i = 0; i < dimension; i++) {
    const [target, ...rest] = file[2 + i].split(/s+/).filter(Boolean).map(Number);

    rowTargets[i] = target;

    matrix.push(rest);
}

function matchTarget(target: number, list: number[]) {
    // do not sort since we need the indices
    const candidates = list.slice(); // .sort((a, b) => b - a);
    const combinations: number[][] = [];

    const tracker: number[] = [];

    function recurse(target: number, start: number) {
        // right on the target
        if (target === 0) return combinations.push(tracker.slice());

        // overshot the target
        if (target <= 0) return;

        for (let i = start; i < candidates.length; i++) {
            tracker.push(i);

            // try this candidate out
            recurse(target - candidates[i], i + 1);

            tracker.pop();
        }
    }

    recurse(target, 0);

    return combinations;
}

const rowCandidates = rowTargets.map((target, i) => matchTarget(target, matrix[i]));
const colCandidates = colTargets.map((target, i) =>
    matchTarget(
        target,
        matrix.map((row) => row[i]),
    ),
);

for (let y = 0; y < dimension; y++) {
    for (let x = 0; x < dimension; x++) {
        const rowUses = rowCandidates[y].flat().filter((n) => n === x).length;
        const colUses = colCandidates[x].flat().filter((n) => n === y).length;

        if (rowUses + colUses === 0) matrix[y][x] = 0;
    }
}

However, I am unsure how to continue and would like to see a more efficient method. What’s the algorithm to solve this problem?

The styles should be applied after clicking the start button, but they are not.

start.addEventListener("click", () => {
  question.style.display = "block";
  want.style.display = "block";
  items.classList.remove("d-block");
  items.classList.add("d-none");
  selector.classList.add("d-none");
  imageElement.classList.add("d-none");
  systemImageElement.classList.add("d-none");
  start.classList.add("disabled");
});

my js and html codes:

JS codes
HTML codes

I have some legacy code which I am trying to update from bootstrap 3.4.1 to 5.3.3. Upon upgrading, a modal in my application no longer appears and there’s an error in the console. On investigating, it seems that some legacy code is trying to manually hide the Bootstrap $backdrop property:

var bsModalBackdrop = $(bsModal).data('bs.modal').$backdrop;
if (bsModalBackdrop) {
  bsModalBackdrop.addClass('hidden');
}

The error is that $(bsModal).data('bs.modal') comes up as undefined, whereas with Bootstrap 3.4.1 it contains an object like this:

{bs.modal: s}
    bs.modal: s
        $backdrop: S.fn.init
            0: div.modal-backdrop.fade.in
            length: 1
            prevObject: S.fn.init {0: div.modal-backdrop.fade.in, length: 1}
            [[Prototype]]: Object
        $body: S.fn.init {0: body.il-body.modal-open, length: 1}
        $dialog: S.fn.init {length: 0, prevObject: S.fn.init}
        $element: S.fn.init {0: div.il-modal.modal.fade.il-modal-sm.from-right, length: 1}

        bodyIsOverflowing: false
        fixedContent: ".navbar-fixed-top, .navbar-fixed-bottom"
        ignoreBackdropClick: false
        isShown: true
        options: {backdrop: true, keyboard: true, show: true}
        originalBodyPad: ""
        scrollbarWidth: 0
        [[Prototype]]: Object
    [[Prototype]]: Object

Has this functionality been removed, or replaced somewhere else? I’ve tried deleting the above code, but then the backdrop stays in place and I just don’t get the error message. It seems my code does expect Bootstrap to have placed the bs.modal property on the element and needs to remove it.

I am working on this repo: https://github.com/agnunez/AlpacaSafetyMonitor.
The program is implemented on an ESP32 dev. board.In the local SPIFF filesystem the root contains setup.html.
The SubDir css contains bootstrap.min.css.gz,jquery-ui.min.css.gz, theme.css
The SubDir js contains bootstrap.min.js.gz, jquery-ui.min.js.gz, jquery.min.js.gz, jsonFormer.jquery.js

On entering http://192.168.178.50/setup in the browser the ESP32 sends a JSON string and the menu pops up and the dialog is operational. The up/down controls and the booleans are working. When clicking the save button a JSON message is sent back to the ESP32. This reply message is the same as it was sent by the ESP32. see here: https://ascomtalk.groups.io/g/Developer/topic/alpaca_driver_setup_html_how/111054664

What has to be changed in the html file ? Is it on the zipped files? Do I need to unzip them and write them to the SPIFFS?

<!DOCTYPE html>
<html>
<head>
    <title>Alpaca Ascom Drivers Setup</title>
    <meta charset="UTF-8">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/jquery-ui.min.css">
    <link rel="stylesheet" href="/css/theme.css">

    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery-ui.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/jsonFormer.jquery.js"></script>

</head>
<body>
    <div class="container">
        <div class="card mb-3 mt-3">
            <div class="card-header">
                <div id="title"><H3>Alpaca Ascom Drivers Setup</H3></div>
                <ul id="nav-links" class="nav nav-tabs card-header-tabs">
                </ul>
            </div>
        <div class="card-body">
            <div id="form-container"></div>
            <button type="button" id="json_refresh" class="btn btn-primary">Refresh</   button>
            <button type="button" id="json_update" class="btn btn-primary">Update</button>
            <button type="button" id="json_save" class="btn btn-primary">Save</button>
        </div>
    </div>
    <script>
        $(document).ready(function () 
        {
            $.ajaxSetup({ cache: false });
            $.getJSON("jsondata", function(data) {
                $('#form-container').jsonFormer({
                    title: "Setup",
                    jsonObject: data
                });
                data;       
            });
            $("#json_update").click(function () {
                $.ajax({
                    url: 'jsondata',
                    type: 'POST',
                    dataType: "json",
                    data: JSON.stringify($('#form-container').jsonFormer('formData')),
                    contentType: 'application/json',
                    success: function(msg) {

                    }
                })
            });
            $("#json_save").click(function () {
                $.getJSON("/save_settings", function(data) {
                    alert(data['saved'] == true? "Saved succesfully" : "Save failed!");
                })
            });
            $("#json_refresh").click(function () {
                location.reload(); // until json-only refresh is ready
            });
            $.getJSON("/links", function(data) {
                let path = window.location.pathname;
                for(name in data) {
                    let url = data[name];
                    let navitem = $('<li class="nav-item"><a class="nav-link" href="#"></a></li>');
                    let a = navitem.find("a");
                    a.attr('href', url).text(name);
                    if(path == url)
                        a.addClass('active');
                    $("#nav-links").append(navitem);
                }
            });
        });
    </script>
</body>

I hope I did the formatting correctly.
If not please let me know how to do it correctly.

I have a React app that renders Vue routes and React routes. All works fine, however, for one specific use case I am mounting a react app inside a Vue app. ReactParent -> Vue -> ReactChild. The problem is the React child is using an iframe and the connection gets blocked by Vue when. It works fine in the React-only version, but the iframe connection fails when the code passes through Vue. This is my VueReactWrapper. Any suggestions?

I’m using v-html right now to try to pass the XSS checks, not working though. I tried v-pre, the same output

<template>
  <div v-html="reactMount"></div>
</template>

<script lang="ts">
  import { createRoot } from "react-dom/client"
  import { Vue, Component } from "vue-property-decorator"
  import { renderWithProviders } from "@/react/App"
  import { Root } from "react-dom/client"

  Vue.config.ignoredElements = ["iframe", "div"]

  @Component({
    inheritAttrs: false
  })
  export default class VueReactWrapper extends Vue {
    private reactRoot: Root | null = null
    private reactMount = '<div id="react-root"></div>'

    mounted(): void {
      const reactRootEl = document.getElementById("react-root")
      this.reactRoot = createRoot(reactRootEl as Element)
      renderWithProviders(this.reactRoot)
    }

    destroyed() {
      if (this.reactRoot) {
        this.reactRoot.unmount()
      }
    }
  }
</script>

<style scoped></style>

I’m trying to integrate Paddle.com as a payment solution for my application. Therefore I’m starting with the sandbox integration.

My aim is to send the crmId (some kind of customer id) of my application to Paddle on checkout in order to ‘link’ the customer in my database with the paddle customer object.

According to the paddle docs it’s possible to send custom data which I want to use to send the customerId. The docs show to send custom data as follows via JS:

Paddle.Checkout.open({
  customData: {
    "crmId": 1234,
  },    
});

My implementation looks like this:

function openCheckout(items){
    Paddle.Checkout.open({
        items: items,
        customer: {
            customData: {
                "crmId": "test123"
            },
        },
        customData: {
            "crmId": "test456"
        }
    });
}

As you can see I’m also trying to set the customerId on the customer object directly which is also a possible way according to the docs.

After generating my html markup I can see that the parameters are set in the code. Having a look at the console I see that paddle JS doesn’t load a customData attribute at all:

The Paddle.checkout.open functions gets executed correctly as I see updated price on my pricing page.

Another thing is that I can’t find a place on Paddle’s sandbox administation web frontend (the UI where you can see all transaction, customers, etc.) where custom data would be displayed.

Any help would be appreciated.