Category: javascript

I am trying to download multiple files sequentially in a JSP page using setTimeout and top.location.href, but the download process doesn’t behave as expected. Instead of executing each download in separate rounds (with a 2-second delay), it seems like it only processes the first file and skips the others.

Here’s a simplified version of my code:

<%@page language="java"%>
<%@ page import="java.util.*, java.text.*, java.sql.*"%>
<%@ page import="java.io.*"%>
<%@ page import="sapphire.accessor.QueryProcessor, sapphire.util.DataSet, sapphire.util.StringUtil, sapphire.util.ActionBlock, sapphire.accessor.ActionProcessor, sapphire.util.DBAccess, sapphire.accessor.ActionException"%>
<%@ taglib uri="/WEB-INF/tlds/sapphire.tld" prefix="sapphire" %>
<%@ taglib uri="/WEB-INF/tlds/c.tld" prefix="c" %>
<sapphire:controlledpage allowanonymous="true"/>
<sapphire:page layout="${layout.objectname}">
<sapphire:pagecontent name="content">

<%!
    public void writeLog(String logstr) {
        String pathFile = "D:\GenControlChartLog.txt";
        try {
            PrintWriter out = new PrintWriter(new BufferedWriter(new FileWriter(pathFile, true)));
            out.println(new java.util.Date() + " - " + logstr);
            out.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
%>

<%
    writeLog("Start processing control charts");
    String data = requestinfo.getProperty("data");
    String sdate = requestinfo.getProperty("sdate");
    String edate = requestinfo.getProperty("edate");
    String scno = requestinfo.getProperty("scno");
    String[] _data = data.split("%3B");
    String filenameall = "";
    for(int i = 0;i<_data.length;i++) {
        String[] __data = _data[i].split(";");
        String filename = "ControlChart-"+__data[0]+"-"+i+"-" + new SimpleDateFormat("dd-MM-yyyy-HH-mm-ss").format(new java.util.Date()) +".xlsx";
        String success = "";
        writeLog("filename = "+ filename);
        HashMap hm = new HashMap();
        hm.put("filename", filename);
        hm.put("keyid1", _data[i]);
        hm.put("sdate", sdate);
        hm.put("edate", edate);
        hm.put("scno", scno);
        ActionProcessor ap = new ActionProcessor(application.getInitParameter("nameserverlist"), pageinfo.getConnectionId());
        try {
            ap.processAction("ControlChartXLXS", "1", hm);
            success = "SUCCESS";    
            writeLog("ControlChartXLXS SUCCESS ");
        } catch (ActionException ae) {
            success = "FAILURE";
            writeLog("error1 :"+ae.getMessage());
        } catch (Exception e) {
            success = "FAILURE";
            writeLog("error2 :"+e.getMessage());
        }
        if(i>0) {
            filenameall +="%3B";
        }
        filenameall +=filename;
    }
%>

<script>
    function downloadFile_V2(file, i) {
        setTimeout(function() {
            top.sapphire.alert( 'into setTimeout Download round ' + i, true );
            console.log('into setTimeout Download round ' + i);
            top.location.href = "WEB-CUSTOM/Download/DownloadFile_00.jsp?filepath=WEB-CUSTOM/ControlChart/Output/" + file;
        }, i * 2000); 
    }

    var _filename = "<%=filenameall%>";
    console.log('filearrOG = ' + _filename);
    if (_filename != "") {
        var filearr = _filename.split("%3B");
        console.log('filearr after split = ' + filearr);
        top.sapphire.alert('filearr length = ' + filearr.length, true);
        for (let i = 0; i < filearr.length; i++) {
            top.sapphire.alert('filearr = ' + filearr[i], true);
            console.log('filearr = ' + filearr[i]);
            downloadFile_V2(filearr[i], i);
        }
    } else {
        top.sapphire.alert('Not Found Document Template!', true);
    }
</script>

</sapphire:pagecontent>
</sapphire:page>

Problem:

The downloadFile_V2 function is supposed to trigger downloads sequentially, with a 2-second delay between each round. However, only the first download occurs, and the others are skipped or not triggered.

I expect the logs to show
into setTimeout Download round 0
into setTimeout Download round 1
into setTimeout Download round 2

But instead, it only logs the first round (into setTimeout Download round 0).
What I’ve tried:

Used setTimeout with a delay of i * 2000 for each download.
Checked the length of the filearr array, and it seems correct.
Checked for any JavaScript errors, but none are shown.
Any suggestions on why this might be happening or how I can fix this?

1. I am using ngx-markdown as a markdown viewer

2. If there is a link on clicking I’m trying to open the link in new
   tab

3. To handle marked bold, italic etc I’m using marked.parseInline

   import { marked } from 'marked';
   import { MARKED_OPTIONS, MarkdownModule, MarkedOptions, MarkedRenderer } from 'ngx-markdown';
   
   export function markedOptionsFactory(): MarkedOptions {
       const renderer: any = new MarkedRenderer();
       renderer.link = (linkObj) => {
           const parsedText = marked.parseInline(linkObj.text);
           return `<a href="${linkObj.href}" title="${linkObj.title || ''}" target="_blank" rel="noopener noreferrer">${parsedText}</a>`;
       };
       return { renderer };
   }
   
   

Error I'm getting is

main.js:23 ERROR RangeError: Maximum call stack size exceeded
Please report this to https://github.com/markedjs/marked.
    at String.replace (<anonymous>)
    at Td.lex (main.js:23:2146672)
    at Function.lex [as lexer] (main.js:23:2146597)
    at DV.link (main.js:1:17743759)
    at tU.<computed> [as link] (main.js:23:2159956)
    at EF.parseInline (main.js:23:2157113)
    at Dd.paragraph (main.js:23:2153462)
    at EF.parse (main.js:23:2156168)
    at Function.parse [as parser] (main.js:23:2155250)
    at main.js:1:17743788

I generate text boxes in js based on a value chosen by a number type input :

function updateChannels(input) 
{
    const container = document.getElementById('description-container');
    const count = parseInt(input.value, 10);

    // Empty the container to reset the descriptions
    container.innerHTML = '';

    // Vérifie que l'entrée est un nombre entre 1 et 4
    if (isNaN(count) || count < 1 || count > 4) 
    {
        input.value = ''; // Reset if the value is invalid
        alert('Please enter a number between 1 and 4.');
        return;
    }

    // Add description fields based on value
    for (let i = 1; i <= count; i++) 
    {
        const label = document.createElement('label');
        label.textContent = `Please describe your channel number ${i}`;

        const textarea = document.createElement('textarea');
        textarea.name = `channel_description_${i}`;
        textarea.id = `channel_description_${i}`;
        textarea.className = 'form-control';
        textarea.placeholder = `Description for channel ${i}`;

        // Add the label and text box to the container
        container.appendChild(label);
        container.appendChild(textarea);
    }
}

So, if I choose 1, a text box is displayed, etc… up to 4.

I retrieve all the data from my form with a $request variable in the route, here is the code :

Route::post('/submit_before', function (Request $request) 
{
    
    // Enregistrement de la manipulation
    $manipulation = Manipulation::create([
        'users_id' => $request->input('user'),
        'machines_id' => 1,
        'manipulation_name' => $request->input('manipulation_name'),
        'system_issue' => $request->input('system_free_issue'),
        'system_qualified' => $request->input('system_qualified'),
        'howmany_injections' => $request->input('channelCount'),
        'column_id' => $request->input('column_description'),
        'guard_column_id' => $request->input('guard_column_description'),
        'type_samples' => $request->input('type_of_samples'),

    ]);

    // Récupérer l'ID de l'enregistrement créé
    $manipulationId = $manipulation->id;
    //récupérer le nombre de description de channels :
    $channelCount = $request->input('channelCount');

    // Boucler pour insérer chaque description de canal
    for ($i = 1; $i <= $channelCount; $i++) {
        // Construire dynamiquement le nom de l'input pour chaque description de canal
        $description = $request->input("channel_description_$i");
    
        // Insérer dans la table channels_descriptions
        ChannelsDescription::create([
            'description' => $description,
            'manipulation_id' => $manipulationId,
            'channel_number' => $i, // Numéro du canal (1, 2, etc.)
        ]);
    }
    


    // Rediriger vers la vue `chrono` après l'enregistrement
    return view('chrono');
})->name('submit_before'); // Déplacement de ->name() avant le point-virgule

The problem is that everything is retrieved except the value of my text boxes which are generated dynamically (the name of textareas begins with channel_description_);

#parameters: array:9 [▼
      "_token" => "0dusC043ovYJMZGShMlsBdioLY3nR8Zyw00zrqAO"
      "user" => "1"
      "manipulation_name" => "eerrere"
      "system_free_issue" => "yes"
      "system_qualified" => "yes"
      "channelCount" => "2"
      "column_description" => "21"
      "guard_column_description" => "17"
      "type_of_samples" => "reeee"

They are NULL.

$description = $request->input("channel_description_$i");

null // routes/web.php:72

If I have two, two rows are inserted into the database, but NULL is put in description.

On the other hand, if the text boxes are present when the form loads, I get their values ​​in the $request variable.

Do you have any idea please? Thanks in advance.

I am new to both Mongo and Stackoverflow, and I have a question so basic that I can’t find it anywhere online.
I am trying to query a Mongo database with the following code in an index.js file:

app.post('/users', async (req, res) => {
    await Users.findOne({ Username: req.body.Username })
        .then((user) => {
            if (user) {
                return res.status(400).send(req.body.Username + 'already exists');
            } else {
                Users
                    .create({
                        Username: req.body.Username,
                        Password: req.body.Password,
                        Email: req.body.Email,
                        Birthday: req.body.Birthday
                    })
                    .then((user) => {res.status(201).json(user) })
                .catch((error) => {
                    console.error(error);
                    res.status(500).send('Error' + error);
                })
            }
        })
        .catch((error) => {
            console.error(error);
            res.status(500).send('Error' + error);
        });
});

This should allow me to create a new “user” based on the following schema in a models.js file:

let userSchema = mongoose.Schema({
    Username: {type: String, required: true},
    Password: {type: String, required: true},
    Email: {type: String, required: true},
    Birthday: Date,
    FavoriteMovies: [{type: mongoose.Schema.Types.ObjectId, ref: 'Movies'}]
});

However, attempting to query this in Postman crashes my server and displays the following error (that the Username part of req.body.Username is undefined):
Terminal Error

Any time I try to use req.body.Username, it crashes and says that Username is undefined. However, all users in the Users model have Usernames; also, using req.params.Username functions as normal. I have been running into this problem for days now and can’t seem to solve it.

Hi i am creating 2 simple test projects where project A is a custom NPM package and project B consume it. When running it through es-dev-server i get Error: Could not resolve import “npm-project-a” in “src/index.ts”.

My folder structure looks like this:

project-a/src/index.ts

export function MRTAdd(v1: number, v2: number): number {
    return v1 + v2;
}

project-a/package.json

{
  "name": "npm-project-a",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "module": "commonjs",
  "scripts": {
    "build": "tsc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

project-a/tsconfig.json

{
  "compilerOptions": {
    "target": "es2016",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "module": "commonjs",
    "declaration": true,
    "declarationMap": true,
    "outDir": "./dist",
    "skipLibCheck": true
  }
}

Next i ran npm build which gives me the tsc build inside dist folder

Next step i did is to npm link inside root of project-a, and then in project-b i npm link npm-project-a

Now inside project-b/src/index.ts

import { MRTAdd } from 'npm-project-a';

console.log(MRTAdd(1, 2));

My index.html is referencing <script src="index.ts"></script>
Then when running command in project-b/package.json

"scripts": {
  "start": "es-dev-server --app-index src/index.html --node-resolve --watch --open"
},

i get this error

Please advise!

Hi i am creating 2 simple test projects where project A is a custom NPM package and project B consume it. The issue is that there is no import intellisense.

My folder structure looks like this:

project-a/src/index.ts

export function MRTAdd(v1: number, v2: number): number {
    return v1 + v2;
}

project-a/package.json

{
  "name": "npm-project-a",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "module": "commonjs",
  "scripts": {
    "build": "tsc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

project-a/tsconfig.json

{
  "compilerOptions": {
    "target": "es2016",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "module": "commonjs",
    "declaration": true,
    "declarationMap": true,
    "outDir": "./dist",
    "skipLibCheck": true
  }
}

Next i ran npm build which gives me the tsc build inside dist folder

Next step i did is to npm link inside root of project-a, and then in project-b i npm link npm-project-a

Now that i see it is install inside node_modules, then when i tried typing MRTAdd i see this

Although typing the import manually works

Please advise!

As stated in the title of this post, whenever I try to apply any of the below transformations to each of the cubes created in the addGUIControls() function they act in unexpected ways. When I apply makeScale() in the applyScalingCube() function it stretches the cube but also changes its position as well as oscillating in the scaling it does rather than in a linear fashion in accordance with the sliders in the GUI. I’ll attach a picture for each of the other awry transformations to give an idea. If any of you need to see how the rest of the scene was set up let me know. I ask this question since this is a project and some of my classmates have done the code in a similar way and theirs works. I don’t know if it’s because my environment (I’m using webstorm) isn’t set up properly. Before posting this I reset it to its default settings but it didn’t fix the issues. I also want to add I have separate inverse functions of each of the transformations which also are acting entirely awry but I want the first four transformations addressed. They do not affect the state of the initial normal functions unless the inverse buttons are toggled.

function applyScaling(cube, { scaleX, scaleY, scaleZ }) {
  const scaleMatrix = new THREE.Matrix4().makeScale(scaleX, scaleY, scaleZ);
  cube.matrix.identity();
  cube.applyMatrix4(scaleMatrix);
  render();
}

Scaled cube overscaled

Scaled Cube and Translated(unexpected behavior, it shouldn’t move)

function applyTranslation(cube, { translateX, translateY, translateZ }) {
  const translationMatrix = new THREE.Matrix4().makeTranslation(translateX, translateY, 
  translateZ);
  cube.matrix.identity();
  cube.applyMatrix4(translationMatrix);
  render();
}

Compounded Translation

(Translation seems to stack and not adhere to a linear mode of movement in alignment with the slider.)

function applyRotation(cube, { rotateY, rotateZ }) {
  const rotationYMatrix = new THREE.Matrix4().makeRotationY(rotateY);
  const rotationZMatrix = new THREE.Matrix4().makeRotationZ(rotateZ);
  cube.matrix.identity();
  cube.applyMatrix4(rotationYMatrix);
  cube.applyMatrix4(rotationZMatrix);
  render();
}

Unexpected Rotation Behavior

(It appears to rotate around the origin rather than its center and it also seems to compound rather than stop at the bounds of the slider)

function applyShear(cube, { shearX, shearY }) {
  const shearMatrix = new THREE.Matrix4().set(
        1, shearX, 0, 0,
        shearY, 1, 0, 0,
        0, 0, 1, 0,
        0, 0, 0, 1
  );
  cube.matrix.identity();
  cube.applyMatrix4(shearMatrix);
  render();
}

Unexpected Shear Behavior

(Also appears to compound the shear of the cube)

function render() {
  renderer.render(scene, camera);
}


function addGUIControls() {
gui = new GUI();

cubes.forEach((cube, index) => {
  const cubeFolder = gui.addFolder(`Cube ${index + 1}`);
  const transform = {
    scaleX: 1,
    scaleY: 1,
    scaleZ: 1,
    translateX: 0,
    translateY: 0,
    translateZ: 0,
    rotateY: 0,
    rotateZ: 0,
    shearX: 0,
    shearY: 0
  };

  // Scaling Controls
  cubeFolder.add(transform, 'scaleX', 0.5, 3).name('Scale X').onChange(() => applyScaling(cube, transform));
  cubeFolder.add(transform, 'scaleY', 0.5, 3).name('Scale Y').onChange(() => applyScaling(cube, transform));
  cubeFolder.add(transform, 'scaleZ', 0.5, 3).name('Scale Z').onChange(() => applyScaling(cube, transform));

  // Inverse Scale
  cubeFolder.add({ inverseScale: () => applyInverseScaling(cube) }, 'inverseScale').name('Inverse Scale');

  // Translation Controls
  cubeFolder.add(transform, 'translateX', -5, 5).name('Translate X').onChange(() => applyTranslation(cube, transform));
  cubeFolder.add(transform, 'translateY', -5, 5).name('Translate Y').onChange(() => applyTranslation(cube, transform));
  cubeFolder.add(transform, 'translateZ', -5, 5).name('Translate Z').onChange(() => applyTranslation(cube, transform));

  // Inverse Translation
  cubeFolder.add({ inverseTranslation: () => applyInverseTranslation(cube) }, 'inverseTranslation').name('Inverse Translation');

  // Rotation Controls
  cubeFolder.add(transform, 'rotateY', 0, Math.PI * 2).name('Rotate Y').onChange(() => applyRotation(cube, transform));
  cubeFolder.add(transform, 'rotateZ', 0, Math.PI * 2).name('Rotate Z').onChange(() => applyRotation(cube, transform));

  // Inverse Rotation
  cubeFolder.add({ inverseRotation: () => applyInverseRotation(cube) }, 'inverseRotation').name('Inverse Rotation');

  // Shear Controls
  cubeFolder.add(transform, 'shearX', -1, 1).name('Shear X').onChange(() => applyShear(cube, transform));
  cubeFolder.add(transform, 'shearY', -1, 1).name('Shear Y').onChange(() => applyShear(cube, transform));

  // Inverse Shear
  cubeFolder.add({ inverseShear: () => applyInverseShear(cube) }, 'inverseShear').name('Inverse Shear');

  cubeFolder.open();
});
}

I am currently making a game with HTML, and I set up a temporary page to test if something works. I am trying to have some SVG files from a folder put on my HTML site by putting in JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Gallery</title>
</head>
<body>
    <h1>SVG Gallery</h1>
    <div id="svg-container"></div>

    <script>
        async function fetchSVGs() {
            try {
                const response = await fetch('/assets/svg/props/items');
                const text = await response.text();
                
                // This will parse the directory listing to extract SVG file names.
                const parser = new DOMParser();
                const doc = parser.parseFromString(text, 'text/html');
                const links = Array.from(doc.querySelectorAll('a'))
                    .filter(link => link.href.endsWith('.svg'));

                // Load each SVG file dynamically
                const container = document.getElementById('svg-container');
                links.forEach(link => {
                    const svgPath = link.getAttribute('href');
                    const img = document.createElement('img');
                    img.src = svgPath;
                    container.appendChild(img);
                });
            } catch (error) {
                console.error('Error loading SVGs:', error);
            }
        }

        fetchSVGs();
    </script>
</body>
</html>

As you can see I want to list them all on the page. It did manage to enter the items folder and see all the items in it, but it couldn’t load them. It said

Failed to load resource: the server responded with a status of 404

Here are the items in my folder and the system accessing them but not loading the images:

enter image description here

enter image description here

I want to put an outline on the other eyelid (with the class “other_eyelid_outline”) here:

function getRandomColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

document.addEventListener('keydown', (event) => {
    if (event.key === 's' || event.key === 'S') {
        const headColor = document.getElementById('head_color');
        headColor.setAttribute('fill', getRandomColor());

        // Optional: If eyelids need to match the head color, add this:
        const eyelids = document.getElementById('eyelids_color');
        eyelids.setAttribute('fill', headColor.getAttribute('fill'));
    }
});
document.addEventListener('DOMContentLoaded', function() {
    const pupils = document.getElementById('pupils'); // Group containing both pupils

    document.addEventListener('mousemove', function(event) {
        const eyesSvg = document.getElementById('eyes_svg');
        const eyesBox = eyesSvg.getBoundingClientRect();

        // Approximate center of the eyes (you may need to adjust these values based on your design)
        const eyeCenterX = eyesBox.left + eyesBox.width / 2;
        const eyeCenterY = eyesBox.top + eyesBox.height / 2;

        const maxPupilMovement = 10; // Maximum movement inside the eye

        // Calculate the mouse position relative to the center of the eyes
        const mouseX = event.clientX;
        const mouseY = event.clientY;

        // Calculate the angle and distance for pupil movement
        const angle = Math.atan2(mouseY - eyeCenterY, mouseX - eyeCenterX);
        const distance = Math.min(maxPupilMovement, Math.hypot(mouseX - eyeCenterX, mouseY - eyeCenterY));

        // Calculate the new pupil positions
        const pupilX = Math.cos(angle) * distance;
        const pupilY = Math.sin(angle) * distance;

        // Apply the transformation to the pupils group (move it down based on calculated values)
        pupils.setAttribute('transform', `translate(${48.5 + pupilX}, ${29.0 + pupilY})`);
    });
});

.character {
  position: relative;
}

.guide {
  position: absolute;
}

.part {
  position: absolute;
}

.eyes {
  position: absolute;
  z-index: 3;
  left: 19px;
}

.eyesoutline {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.whole_head {
  position: absolute;
  animation: float 2s ease-in-out infinite;
}

.head {
  position: absolute;
  margin-top: 19px;
  z-index: 2;
}

.headcolor {
  z-index: 1;
  margin-top: -500px;
  position: relative;
}

.headoutline {
  z-index: 2;
  position: relative;
  width: 100%;
  height: 100%;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}


/* Wipe-in and wipe-out animation for the eyelid (VERTICAL wipe) */



@keyframes wipe-in-out-eyelid {
  0% {
    clip-path: inset(0 0 100% 0); /* Fully hidden from the bottom */
  }
  5% {
    clip-path: inset(0 0 0 0); /* Fully visible (wipe-in complete) */
  }
  10% {
    clip-path: inset(0 0 100% 0); /* Fully hidden again (wipe-out complete) */
  }
  100% {
    clip-path: inset(0 0 100% 0); /* Stay hidden for the rest of the duration */
 }
}



@keyframes eyelids-outlines {
    0% {
        transform: translateY(5px);
  }
  5% {
    transform: translateY(50px); /*full length of the eye.*/
  }
  10% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(5px);
  }
}

.eyelid {
  fill: #ffcc66; /* Eyelid color */
  animation: wipe-in-out-eyelid 5s ease-out infinite; /* Wipe animation */
  transform-origin: center;
  position: relative;
  bottom: 0;
}
/* Animation for the line growing down, shrinking, and moving back up */
.eyelid_outline {
  animation: eyelids-outlines 5s ease-out infinite;
  transform-origin: center;
  position: relative;
  top:8px;
}

.other_eyelid_outline {
  position:absolute;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Character Assembly</title>
    <link rel="stylesheet" href="player.css">
</head>
<body>
    <div class="guide">
        <object data="/svgs/char/shapes/30.svg" type="image/svg+xml" class="part body"></object>

    </div>
    
    <div class="character">

    <div class="guide">
        <object data="/svgs/char/shapes/30.svg" type="image/svg+xml" class="part body"></object>

    </div>

    <div class="whole_head">
        

    <div class="eyes">
        
        

<svg id="eyes_svg">
    <g transform="matrix(1.0, 0.0, 0.0, 1.0, 57.3, 26.6)">
        <path d="M26.55 -26.6 Q39.25 -26.6 48.25 -18.8 57.25 -11.0 57.25 0.0 57.25 11.0 48.25 18.8 39.25 26.6 26.55 26.6 13.85 26.6 4.85 18.8 -4.15 11.0 -4.15 0.0 -4.15 -11.0 4.85 -18.8 13.85 -26.6 26.55 -26.6 M-24.7 -12.75 Q-19.1 -6.35 -19.1 2.7 -19.1 11.75 -24.7 18.15 -30.3 24.55 -38.2 24.55 -46.1 24.55 -51.7 18.15 -57.3 11.75 -57.3 2.7 -57.3 -6.35 -51.7 -12.75 -46.1 -19.15 -38.2 -19.15 -30.3 -19.15 -24.7 -12.75" fill="#ffffff" fill-rule="evenodd" stroke="none"/>
    </g>

    <!-- Pupils -->
    <g id="pupils" transform="matrix(1.0, 0.0, 0.0, 1.0, 34.5, 7.0)">
        <path d="M-24.25 4.75 Q-26.0 6.5 -28.5 6.5 -31.0 6.5 -32.75 4.75 -34.5 3.0 -34.5 0.5 -34.5 -2.0 -32.75 -3.75 -31.0 -5.5 -28.5 -5.5 -26.0 -5.5 -24.25 -3.75 -22.5 -2.0 -22.5 0.5 -22.5 3.0 -24.25 4.75" fill="#000000" fill-rule="evenodd" stroke="none"/>
        <path d="M33.15 4.95 Q31.1 7.0 28.2 7.0 25.3 7.0 23.25 4.95 21.2 2.9 21.2 0.0 21.2 -2.9 23.25 -4.95 25.3 -7.0 28.2 -7.0 31.1 -7.0 33.15 -4.95 35.2 -2.9 35.2 0.0 35.2 2.9 33.15 4.95" fill="#000000" fill-rule="evenodd" stroke="none"/>
    </g>
          <clipPath id="cut-bottom">
      <defs><clipPath clipPathUnits="userSpaceOnUse" id="a"><path d="M-57.3-26.6v53.2H3.839c-.02-.301-.042-.6-.06-.901-2.963-.245-5.933-.587-8.878-.643-.655-1.858-1.444-3.675-1.967-5.574-.263-.958-.582-3.19-.855-5.266-6.813-.163-3.393-1.313-.123-.97-.095-.755-.228-1.738-.274-2.133-.457-3.96-.765-7.936-1.072-11.91-.203-2.596-.417-5.192-.633-7.787-.846-10.18 3.516-15.993 8.582-17.073.037-.314.08-.628.118-.943zm52.1 40.836-.01.002.01.008v-.01z"/></clipPath></defs><path d="M26.55-26.6q12.7 0 21.7 7.8t9 18.8q0 11-9 18.8-9 7.8-21.7 7.8t-21.7-7.8q-9-7.8-9-18.8t9-18.8q9-7.8 21.7-7.8M-24.7-12.75q5.6 6.4 5.6 15.45 0 9.05-5.6 15.45-5.6 6.4-13.5 6.4t-13.5-6.4q-5.6-6.4-5.6-15.45 0-9.05 5.6-15.45 5.6-6.4 13.5-6.4t13.5 6.4" fill="#fff" fill-rule="evenodd" style="fill:blue" clip-path="url(#a)" transform="translate(57.3 26.6)"/>
    </clipPath>
      

    <!-- Eyelids (blinking animation) -->

<g clip-path="url(#cut-bottom)">
<g class="eyelid_outline" transform="matrix(1.0, 0.0, 0.0, 1.0, 66.55, 1.35)">
    <g>
    <path d="M66.55 1.4 L-66.55 1.4 -66.55 -1.35 66.55 -1.35 66.55 1.4" fill="#000000" fill-opacity="0.49803922" fill-rule="evenodd" stroke="none"/>
</g>
<g class="other_eyelid_outline">
    <path d="M66.55 1.4 L-66.55 1.4 -66.55 -1.35 66.55 -1.35 66.55 1.4" fill="#000000" fill-opacity="0.49803922" fill-rule="evenodd" stroke="none"/>
</g>
  </g>
  </g>
 <g class="eyelid"  transform="matrix(1.0, 0.0, 0.0, 1.0, 57.3, 26.6)">
    <path id="eyelids_color" d="M26.55 -26.6 Q39.25 -26.6 48.25 -18.8 57.25 -11.0 57.25 0.0 57.25 11.0 48.25 18.8 39.25 26.6 26.55 26.6 13.85 26.6 4.85 18.8 -4.15 11.0 -4.15 0.0 -4.15 -11.0 4.85 -18.8 13.85 -26.6 26.55 -26.6 M-24.7 -12.75 Q-19.1 -6.35 -19.1 2.7 -19.1 11.75 -24.7 18.15 -30.3 24.55 -38.2 24.55 -46.1 24.55 -51.7 18.15 -57.3 11.75 -57.3 2.7 -57.3 -6.35 -51.7 -12.75 -46.1 -19.15 -38.2 -19.15 -30.3 -19.15 -24.7 -12.75" fill="#ffcc66"/>

       
</g>
    
    <g id="eyesoutline" transform="matrix(1.0, 0.0, 0.0, 1.0, 57.3, 26.6)">
    <path d="M-50.2 -11.05 Q-55.2 -5.35 -55.2 2.7 -55.2 10.8 -50.2 16.5 -45.25 22.2 -38.15 22.2 -31.1 22.2 -26.1 16.5 -21.15 10.8 -21.1 2.7 -21.15 -5.35 -26.1 -11.05 -31.1 -16.8 -38.15 -16.8 -45.25 -16.8 -50.2 -11.05 M-57.3 2.7 Q-57.3 -6.35 -51.7 -12.75 -46.1 -19.15 -38.2 -19.15 -30.3 -19.15 -24.7 -12.75 -19.1 -6.35 -19.1 2.7 -19.1 11.75 -24.7 18.15 -30.3 24.55 -38.2 24.55 -46.1 24.55 -51.7 18.15 -57.3 11.75 -57.3 2.7" fill="#000000" fill-opacity="0.49803922" fill-rule="evenodd" stroke="none"/>
    <path d="M26.55 -24.3 Q14.9 -24.3 6.7 -17.15 -1.55 -10.05 -1.55 0.05 -1.55 10.1 6.7 17.25 14.9 24.35 26.55 24.4 38.15 24.35 46.4 17.25 54.65 10.1 54.65 0.05 54.65 -10.05 46.4 -17.15 38.15 -24.3 26.55 -24.3 M26.55 -26.6 Q39.25 -26.6 48.25 -18.8 57.25 -11.0 57.25 0.0 57.25 11.0 48.25 18.8 39.25 26.6 26.55 26.6 13.85 26.6 4.85 18.8 -4.15 11.0 -4.15 0.0 -4.15 -11.0 4.85 -18.8 13.85 -26.6 26.55 -26.6" fill="#000000" fill-opacity="0.49803922" fill-rule="evenodd" stroke="none"/>
  </g>


</svg>


        </div>
        
        <!-- Outline SVG -->
        <div class="head">



            <svg id="head_svg">
               

    <svg id="head_shape" xmlns="http://www.w3.org/2000/svg" width="150" height="90">



              <g transform="matrix(1.0, 0.0, 0.0, 1.0, 75.0, 45.0)">
    <path id="head_color" d="M75.0 0.0 Q75.0 18.65 53.0 31.8 31.05 45.0 0.0 45.0 -31.05 45.0 -53.05 31.8 -75.0 18.65 -75.0 0.0 -75.0 -18.65 -53.05 -31.85 -31.05 -45.0 0.0 -45.0 31.05 -45.0 53.0 -31.85 75.0 -18.65 75.0 0.0" fill="#ffcc66" fill-rule="evenodd" stroke="none" />
  </g>
         
        <g id="headoutline" transform="matrix(1.0, 0.0, 0.0, 1.0, 75.0, 45.0)">
    <path d="M53.0 -31.85 Q75.0 -18.65 75.0 0.0 75.0 18.65 53.0 31.8 31.05 45.0 0.0 45.0 -31.05 45.0 -53.05 31.8 -75.0 18.65 -75.0 0.0 -75.0 -18.65 -53.05 -31.85 -31.05 -45.0 0.0 -45.0 31.05 -45.0 53.0 -31.85 M51.05 -29.9 Q29.9 -42.25 0.0 -42.25 -29.9 -42.25 -51.05 -29.9 -72.2 -17.5 -72.2 0.0 -72.2 17.5 -51.05 29.85 -29.9 42.25 0.0 42.25 29.9 42.25 51.05 29.85 72.2 17.5 72.2 0.0 72.2 -17.5 51.05 -29.9" fill="#000000" fill-opacity="0.49803922" fill-rule="evenodd" stroke="none"/>
  </g>

  </svg>
</svg>
</div>



</div>
      <!--  <object data="body.svg" type="image/svg+xml" class="part body"></object>
        <object data="leftarms.svg" type="image/svg+xml" class="part arms"></object>
        <object data="rightarms.svg" type="image/svg+xml" class="part arms"></object>
        <object data="leftlegs.svg" type="image/svg+xml" class="part legs"></object>
        <object data="rightlegs.svg" type="image/svg+xml" class="part legs"></object>-->
    </div> 

    <script src="player.js"></script>
</body>
</html>

I went into my browser’s dev tools to check if they would allow me to move the very outside margins (you know, the top, bottom, left, right attribute), but I couldn’t see them in the preview layer:

So basically, that other_eyelid_outline can float up and down with the left eyelid outline, but the problem is that I cannot edit top, bottom, etc on the other_eyelid_outline despite its position being absolute. What should I change in order to move that eyelid around?

I found this website and couldn’t figure out how this was possible. I am working on a project and needed something similar but found no way to do so. Here is an image:

The rendered area is a textarea. I checked the textcontent but it was empty. The textarea does not have the editablecontent tag.

How are they able to add custom images with boxes for the cursor to jump to and input with just a textarea. I was maybe thinking it was a font but I am not sure.

Here is a link to the page to try it out: https://www.imatheq.com/imatheq/com/imatheq/math-equation-editor.html.

I would greatly appreciate if anyone knows how this is done.

Trying to install mongoose to my node.js application, and all the time I am getting this error, tried changing everything including changing the IP to “Allow access from everywhere” My current IP is whitlisted as wellm still don’t know why getting the error.

const express = require('express');
const mongoose = require('mongoose');
const dns = require('dns');
dns.setDefaultResultOrder('ipv4first');

const app = express();

mongoose.set('debug', true);

mongoose.connect("mongodb+srv://username:[email protected]/myDatabase?retryWrites=true&w=majority", {
    
    serverSelectionTimeoutMS: 5000 // Set a timeout limit for connection attempts
})
.then(() => console.log("Connected to MongoDB Atlas"))
.catch(err => console.error("Connection error:", err));

This is the error I am getting

MongooseServerSelectionError: Could not connect to any servers in your MongoDB Atlas cluster. One common reason is that you’re trying to access the database from an IP that isn’t whitelisted. Make sure your current IP address is on your Atlas cluster’s IP whitelist: https://www.mongodb.com/docs/atlas/security-whitelist/
at _handleConnectionErrors (/Users/adityaverma/Desktop/trying ass8/node_modules/mongoose/lib/connection.js:909:11)
at NativeConnection.openUri (/Users/adityaverma/Desktop/trying ass8/node_modules/mongoose/lib/connection.js:860:11) {
reason: TopologyDescription {
type: ‘ReplicaSetNoPrimary’,
servers: Map(3) {
‘mongo8-shard-00-02.hu8hm.mongodb.net:27017’ => ServerDescription {
address: ‘mongo8-shard-00-02.hu8hm.mongodb.net:27017’,
type: ‘Unknown’,
hosts: [],
passives: [],
arbiters: [],
tags: {},
minWireVersion: 0,
maxWireVersion: 0,
roundTripTime: -1,
minRoundTripTime: 0,
lastUpdateTime: 791219720,
lastWriteDate: 0,
error: MongoNetworkError: 409CBCD701000000:error:0A000438:SSL routines:ssl3_read_bytes:tlsv1 alert internal error:../deps/openssl/openssl/ssl/record/rec_layer_s3.c:1605:SSL alert number 80

        at connectionFailureError (/Users/adityaverma/Desktop/trying ass8/node_modules/mongodb/lib/cmap/connect.js:356:20)
        at TLSSocket.<anonymous> (/Users/adityaverma/Desktop/trying ass8/node_modules/mongodb/lib/cmap/connect.js:272:44)
        at Object.onceWrapper (node:events:628:26)
        at TLSSocket.emit (node:events:513:28)
        at emitErrorNT (node:internal/streams/destroy:151:8)
        at emitErrorCloseNT (node:internal/streams/destroy:116:3)
        at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
      [Symbol(errorLabels)]: Set(1) { 'ResetPool' },
      [cause]: [Error: 409CBCD701000000:error:0A000438:SSL routines:ssl3_read_bytes:tlsv1 alert internal error:../deps/openssl/openssl/ssl/record/rec_layer_s3.c:1605:SSL alert number 80
      ] {
        library: 'SSL routines',
        reason: 'tlsv1 alert internal error',
        code: 'ERR_SSL_TLSV1_ALERT_INTERNAL_ERROR'
      }
    },
    topologyVersion: null,
    setName: null,
    setVersion: null,
    electionId: null,
    logicalSessionTimeoutMinutes: null,
    maxMessageSizeBytes: null,
    maxWriteBatchSize: null,
    maxBsonObjectSize: null,
    primary: null,
    me: null,
    '$clusterTime': null
  },
  'mongo8-shard-00-00.hu8hm.mongodb.net:27017' => ServerDescription {
    address: 'mongo8-shard-00-00.hu8hm.mongodb.net:27017',
    type: 'Unknown',
    hosts: [],
    passives: [],
    arbiters: [],
    tags: {},
    minWireVersion: 0,
    maxWireVersion: 0,
    roundTripTime: -1,
    minRoundTripTime: 0,
    lastUpdateTime: 791219875,
    lastWriteDate: 0,
    error: MongoNetworkError: 409CBCD701000000:error:0A000438:SSL routines:ssl3_read_bytes:tlsv1 alert internal error:../deps/openssl/openssl/ssl/record/rec_layer_s3.c:1605:SSL alert number 80
    
        at connectionFailureError (/Users/adityaverma/Desktop/trying ass8/node_modules/mongodb/lib/cmap/connect.js:356:20)
        at TLSSocket.<anonymous> (/Users/adityaverma/Desktop/trying ass8/node_modules/mongodb/lib/cmap/connect.js:272:44)
        at Object.onceWrapper (node:events:628:26)
        at TLSSocket.emit (node:events:513:28)
        at emitErrorNT (node:internal/streams/destroy:151:8)
        at emitErrorCloseNT (node:internal/streams/destroy:116:3)
        at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
      [Symbol(errorLabels)]: Set(1) { 'ResetPool' },
      [cause]: [Error: 409CBCD701000000:error:0A000438:SSL routines:ssl3_read_bytes:tlsv1 alert internal error:../deps/openssl/openssl/ssl/record/rec_layer_s3.c:1605:SSL alert number 80
      ] {
        library: 'SSL routines',
        reason: 'tlsv1 alert internal error',
        code: 'ERR_SSL_TLSV1_ALERT_INTERNAL_ERROR'
      }
    },
    topologyVersion: null,
    setName: null,
    setVersion: null,
    electionId: null,
    logicalSessionTimeoutMinutes: null,
    maxMessageSizeBytes: null,
    maxWriteBatchSize: null,
    maxBsonObjectSize: null,
    primary: null,
    me: null,
    '$clusterTime': null
  },
  'mongo8-shard-00-01.hu8hm.mongodb.net:27017' => ServerDescription {
    address: 'mongo8-shard-00-01.hu8hm.mongodb.net:27017',
    type: 'Unknown',
    hosts: [],
    passives: [],
    arbiters: [],
    tags: {},
    minWireVersion: 0,
    maxWireVersion: 0,
    roundTripTime: -1,
    minRoundTripTime: 0,
    lastUpdateTime: 791219524,
    lastWriteDate: 0,
    error: MongoNetworkError: 409CBCD701000000:error:0A000438:SSL routines:ssl3_read_bytes:tlsv1 alert internal error:../deps/openssl/openssl/ssl/record/rec_layer_s3.c:1605:SSL alert number 80
    
        at connectionFailureError (/Users/adityaverma/Desktop/trying ass8/node_modules/mongodb/lib/cmap/connect.js:356:20)
        at TLSSocket.<anonymous> (/Users/adityaverma/Desktop/trying ass8/node_modules/mongodb/lib/cmap/connect.js:272:44)
        at Object.onceWrapper (node:events:628:26)
        at TLSSocket.emit (node:events:513:28)
        at emitErrorNT (node:internal/streams/destroy:151:8)
        at emitErrorCloseNT (node:internal/streams/destroy:116:3)
        at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
      [Symbol(errorLabels)]: Set(1) { 'ResetPool' },
      [cause]: [Error: 409CBCD701000000:error:0A000438:SSL routines:ssl3_read_bytes:tlsv1 alert internal error:../deps/openssl/openssl/ssl/record/rec_layer_s3.c:1605:SSL alert number 80
      ] {
        library: 'SSL routines',
        reason: 'tlsv1 alert internal error',
        code: 'ERR_SSL_TLSV1_ALERT_INTERNAL_ERROR'
      }
    },
    topologyVersion: null,
    setName: null,
    setVersion: null,
    electionId: null,
    logicalSessionTimeoutMinutes: null,
    maxMessageSizeBytes: null,
    maxWriteBatchSize: null,
    maxBsonObjectSize: null,
    primary: null,
    me: null,
    '$clusterTime': null
  }
},
stale: false,
compatible: true,
heartbeatFrequencyMS: 10000,
localThresholdMS: 15,
setName: 'atlas-9q7qfy-shard-0',
maxElectionId: null,
maxSetVersion: null,
commonWireVersion: 0,
logicalSessionTimeoutMinutes: null

},
code: undefined
}

Node.js v18.16.0

In the code below I am attempting to use puppeteer to automatically open a list of all of Caeleb Dressel’s times on USA Swimming. Because he doesn’t have any times in 2025, I have to change the selected option in the first dropdown to the one with value="-1". I use page.select, but for some reason it doesn’t work, but everything above the await page.waitForSelector("#competitionYearId"); works perfectly fine. I have tried many other methods, but none of them work, and I’m pretty sure page.select should work perfectly fine. How can I fix this?

const puppeteer = require("puppeteer");

(async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();

    await page.goto("https://data.usaswimming.org/datahub/usas/individualsearch");

    await page.waitForSelector("#firstOrPreferredName", { visible: true });
    await page.type("#firstOrPreferredName", "Caeleb");
    await page.type("#lastName", "Dressel");
    await page.click('button[type="submit"]');

    await page.waitForSelector("._ActionButton_8nq2x_59");
    await page.evaluate(() => {
        const buttons = document.querySelectorAll("._ActionButton_8nq2x_59._ActionIntraPage_8nq2x_159");
        if (buttons[0]) {
            buttons[0].click();
        }
    });
    await page.waitForSelector("#competitionYearId");
    await page.select("#competitionYearId", "-1");
})();

I need to run WKWebView in several contexts, including ones where there is no view.

In the App, it’s fine. Load it, link it, show it.
But I also need to load it in a widget – not for display, but to access the data stored in the indexeddb on the page, also for a background processing task (though that’s less critical), and finally in the handler for a pushed notification.
The issue here is I don’t want to move my entire data storage into the app – Then I’d have to duplicate the same storage for Android too – and it’s all working fine in the browser – I don’t want 3 versions if i can avoid it.
For the web-app, local storage and indexeddb storage work great.
For WKWebView, it’s great and if I need info I can request it from the page.
But WKWebView seems to need to be attached to a live view hierarchy, and cannot be attached to the widget view hierarchy.

Has anyone got a way to either instantiate a working WKWebView without attaching to the view stack, or to access the WKWebView local storage and/or indexeddb storage for a site without the full WKWebView (for example, accessing the JSContext but having it bind to a full site)
Note: I am trying to build code that can operate while offline, so I can’t just query my main site for data.

As an example (not actually what I’m building but it conveys the idea…)
Imagine an online calendar service. The app shows the calendar, allows new items etc. All appointments are cached locally in indexeddb so you can open the app and see them even if you are offline. Now you want a widget to show the calendar. It needs access to the same data. Likewise, you receive a notification of a new calendar item just before you lose signal – you open your app expecting to see it (after all, your phone’s received it), but it’s not there because the notification handler can’t access the web-context of the indexeddb

What I want is to do…

let web = WKWebView(noViewContext)
web.load("https://example.com/functionpage") // note, relying on caching here.  I have that sorted)
web.evaluateJavaScript("SomeCodeHere()") { (outcome, error) in etc. etc.}

I am displaying data fetched from API in table, which has inputs as fields to edit the data.

It has multiple data records fetched via API , post changes of the record I want to update the changes done by user and pass it to API for update.

    {Result.map((item,index) => (
                    <tr key={index} className="table-Result-Data">
                      <td>
                        <input
                          type="text"
                          name="applicationId"
                          value={item.acd_ap_id}
                          readOnly
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="applicationName"
                          value={item.acd_ap_nm}
                          readOnly
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="gsid"
                          value={item.acd_ap_gsid}
                          readOnly
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="Sequence"
                          value={item.acd_con_seq}
                          readOnly
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="applicationDl"
                          onChange={(e) => {
                            item.acd_appl_dl = e.target.value;
                          }}
                          defaultValue={item.acd_appl_dl}
                        />
                      </td>
                      <td>
                        <input
                          type="email"
                          name="leadManagerDl"
                          defaultValue={item.acd_lead_manager_dl}
                          onChange={(e) => {
                            item.acd_lead_manager_dl = e.target.value;
                          }}
                        />
                      </td>
                      <td>
                        <input
                          type="email"
                          name="systemOwnerNameDl"
                          defaultValue={item.acd_system_owner_name_dl}
                          onChange={(e) => {
                            item.acd_system_owner_name_dl = e.target.value;
                          }}
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="dataCenterName"
                          defaultValue={item.acd_dc_name}
                          onChange={(e) => {
                            item.acd_dc_name = e.target.value;
                          }}
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="qaSftpId"
                          defaultValue={item.acd_qa_sftp_id}
                          onChange={(e) => {
                            item.acd_qa_sftp_id = e.target.value;
                          }}
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="qaSftpPwd"
                          defaultValue={item.acd_qa_sftp_pwd}
                          onChange={(e) => {
                            item.acd_qa_sftp_pwd = e.target.value;
                          }}
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="prodSftpId"
                          defaultValue={item.acd_prod_sftp_id}
                          onChange={(e) => {
                            item.acd_prod_sftp_id = e.target.value;
                          }}
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="prodSftpPwd"
                          defaultValue={item.acd_prod_sftp_pwd}
                          onChange={(e) => {
                            item.acd_prod_sftp_pwd = e.target.value;
                          }}
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="updatedUser"
                          defaultValue={item.acd_upd_usr}
                          onChange={(e) => {
                            item.acd_upd_usr = e.target.value;
                          }}
                        />
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <input type="submit" className="submit_Update" />

The result has four data I accessing it using the formdata

export async function action({ request }) {
  console.log(" APDB functioncalled");
  const formData = await request.formData();
  console.log(formData)
  const data = Object.fromEntries(formData);
  console.log(data)
}

I submit I am getting only the last values of result not able to all the objects of results, is due to map function or what?
How I can resolve it?

I have a div with contenteditable="true", and have two spans with contenteditble="false" and user-select: all.

Now, the cursor cannot be placed between these two spans by clicking.

But, if I change the user-select to ‘text’, it can behave correctly.

So, how to place the cursor between two nodes that use user-select:all by clicking?

Demo:
https://developer.mozilla.org/en-US/play?id=pToIaTfvo8adOT5tE7M22HX7GCiLb6yZ6R4cDSLaNQnMS%2B2BszfUm74s6OSu67faCW0ZKCPl8cn0eX9f