Category: javascript

I am getting the following error while running my NestJs (11.1.1) app with TypeOrm (0.3.24). I have searched for days but couldn’t find any answer to fix it so i decided to ask it here. The error i get is:

[Nest] 21495  - 05/21/2025, 10:34:53 PM    WARN [CLI Plugin] Skipping dtoFileNameSuffix option ".ts" because it can cause unwanted behaviour.
webpack 5.98.0 compiled successfully in 20943 ms
node:internal/modules/esm/resolve:1072
    throw error;
    ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/Documents/app/api/node_modules/typeorm/browser/globals' imported from /home/Documents/app/api/node_modules/typeorm/browser/index.js
    at finalizeResolution (node:internal/modules/esm/resolve:275:11)
    at moduleResolve (node:internal/modules/esm/resolve:932:10)
    at defaultResolve (node:internal/modules/esm/resolve:1056:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:654:12)
    at #cachedDefaultResolve (node:internal/modules/esm/loader:603:25)
    at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:353:53)
    at new ModuleJobSync (node:internal/modules/esm/module_job:341:34)
    at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:326:11)
    at loadESMFromCJS (node:internal/modules/cjs/loader:1411:24)
    at Module._compile (node:internal/modules/cjs/loader:1544:5) {
  code: 'ERR_MODULE_NOT_FOUND',
  url: 'file:///home/Documents/app/api/node_modules/typeorm/browser/globals'
}

Node.js v22.13.0

Here is my package.json

{
  "name": "api",
  "version": "0.0.1",
  "description": "",
  "author": "",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "build": "nest build",
    "format": "prettier --write "apps/**/*.ts" "libs/**/*.ts"",
    "start": "nest start",
    "start:dev": "nest start --watch",
    "start:debug": "nest start --debug --watch",
    "start:prod": "node dist/apps/api/main",
    "lint": "eslint "{src,apps,libs,test}/**/*.ts" --fix",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:cov": "jest --coverage",
    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
    "test:e2e": "jest --config ./apps/api/test/jest-e2e.json"
  },
  "dependencies": {
    "@kafkajs/confluent-schema-registry": "^3.8.0",
    "@nestjs/axios": "^4.0.0",
    "@nestjs/cache-manager": "^3.0.0",
    "@nestjs/common": "^11.1.1",
    "@nestjs/config": "^4.0.0",
    "@nestjs/core": "^11.1.1",
    "@nestjs/jwt": "^11.0.0",
    "@nestjs/mapped-types": "^2.1.0",
    "@nestjs/microservices": "^11.1.1",
    "@nestjs/mongoose": "^11.0.1",
    "@nestjs/passport": "^11.0.5",
    "@nestjs/platform-express": "^11.1.1",
    "@nestjs/platform-socket.io": "^11.1.1",
    "@nestjs/swagger": "^11.0.4",
    "@nestjs/typeorm": "^11.0.0",
    "@nestjs/websockets": "^11.1.1",
    "@types/mongodb": "^4.0.7",
    "amqp-connection-manager": "^4.1.10",
    "amqplib": "^0.10.3",
    "axios": "^1.5.0",
    "cache-manager-redis-yet": "^4.1.2",
    "class-transformer": "^0.5.1",
    "class-validator": "^0.14.0",
    "eureka-js-client": "^4.5.0",
    "jwks-rsa": "^3.1.0",
    "kafkajs": "^2.2.4",
    "liquibase": "^4.28.1",
    "mongodb": "^5.8.5",
    "mongoose": "^8.1.3",
    "npm-check-updates": "^17.1.14",
    "passport": "^0.6.0",
    "passport-jwt": "^4.0.1",
    "pg": "^8.9.0",
    "postgresql": "^0.0.1",
    "reflect-metadata": "^0.2.0",
    "rxjs": "^7.2.0",
    "socket.io": "^4.7.5",
    "typeorm": "^0.3.24",
    "uuid": "^9.0.1"
  },
  "devDependencies": {
    "@nestjs/cli": "^11.0.4",
    "@nestjs/schematics": "^11.0.1",
    "@nestjs/testing": "^11.1.1",
    "@types/cache-manager": "^4.0.6",
    "@types/express": "^4.17.13",
    "@types/jest": "29.2.4",
    "@types/js-yaml": "^4.0.5",
    "@types/node": "18.11.18",
    "@types/passport-jwt": "^3.0.10",
    "@types/supertest": "^2.0.11",
    "@types/uuid": "^9.0.8",
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "@typescript-eslint/parser": "^5.0.0",
    "eslint": "^8.0.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "jest": "29.3.1",
    "keyv": "^5.2.3",
    "prettier": "^2.3.2",
    "source-map-support": "^0.5.20",
    "supertest": "^6.1.3",
    "ts-jest": "29.0.3",
    "ts-loader": "^9.2.3",
    "ts-node": "^10.0.0",
    "tsconfig-paths": "4.1.1",
    "typescript": "^4.9.5"
  },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "ts"
    ],
    "rootDir": ".",
    "testRegex": ".*\.spec\.ts$",
    "transform": {
      "^.+\.(t|j)s$": "ts-jest"
    },
    "collectCoverageFrom": [
      "**/*.(t|j)s"
    ],
    "coverageDirectory": "./coverage",
    "testEnvironment": "node",
    "roots": [
      "<rootDir>/apps/",
      "<rootDir>/libs/"
    ],
    "moduleNameMapper": {
      "^@app/shared(|/.*)$": "<rootDir>/libs/shared/src/$1"
    }
  }
}

and here is my tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2017",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "skipLibCheck": true,
    "strictNullChecks": false,
    "noImplicitAny": false,
    "strictBindCallApply": false,
    "forceConsistentCasingInFileNames": false,
    "noFallthroughCasesInSwitch": false,
    "paths": {
      "@app/shared": [
        "libs/shared/src"
      ],
      "@app/shared/*": [
        "libs/shared/src/*"
      ]
    }
  }
}

Any help to fix this problem would be highly appreciated

When an element has a transformation applied, its child elements will have different computed values (e.g., from getBoundingClientRect()) compared to what is actually rendered on the screen. This issue isn’t limited to retrieving these values via JavaScript; you can also observe it using browser DevTools. For example, when you hover over an element with bilt-node=”rectangle” in DevTools, the overlay shown on the screen has a slight offset from the actual rendered element. This behavior has been tested in Chrome and may be browser-specific. Does anyone know the cause of this issue? Is it a bug or an expected behavior? If this is expected, does anyone know how to obtain the exact bounding values of the element?

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden
}


.zoom-canvas {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  user-select: none;
  touch-action: none;
  /* Prevent default touch behaviors */
}

.canvas {
  position: absolute;
  width: 100%;
  height: 100%;
}

<div style="position: fixed; left: 0; top: 0;     width: 489px;
    height: 618px;">
  <div data-v-36c7ab2d="" class="zoom-canvas" style="background-color: #1e1e1e;">
    <div data-v-36c7ab2d="" class="canvas" style="display: flex;justify-content: center;align-items: center;transform: translate(77.2px, -2915px) scale(11.72593);transform-origin: 0px 0px;">
      <div data-v-36c7ab2d="" class="relative" style="
    position: relative;
">
        <div bilt-node="rectangle" class="cursor-cell" style="left: -326px; top: -42.4445px; position: absolute; width: 100px; height: 100px; background-color: white;"></div>
      </div>
    </div>
</div>

I’m trying to rotate a circle around another circle in 2d.

I have the following code implemented, which rotates the circle on its axis, however, I want to rotate the circle around the other one.

var w = window.innerWidth;
var h = window.innerHeight;

var canvas = document.createElement('canvas');

document.body.appendChild(canvas);

canvas.width = w;
canvas.height = h;

var ctx = canvas.getContext('2d');

var point = function(x,y,z,rgb) {this.x=x;this.y=y;this.z=z;this.rgb=rgb;}

class Circle {
    constructor(x,y,z,radius) {
        this.x=x;
        this.y=y;
        this.z=z;
        this.radius=radius;
        this.points = [];

         for(let i =0; i<360; i++) {
            let angle = Math.PI / 180 * i;
            let cos = this.x + Math.cos(angle) * this.radius;
            let sin = this.y + Math.sin(angle) * this.radius;
            this.points.push(new point(cos, sin, this.z, `rgb(${i}, ${i}, ${i})`));
    
    }
    }

    rotate() {
    for(let i =0; i<this.points.length; i++) {
        let p = this.points[i];
        let dx = Math.cos(Math.PI / 180) * (p.x - this.x) - Math.sin(Math.PI / 180) * (p.y - this.y);
        let dy = Math.sin(Math.PI / 180) * (p.x - this.x) + Math.cos(Math.PI / 180) * (p.y - this.y);

        p.x = dx + this.x;
        p.y = dy + this.y;
    }
}


drawX(points, i) {
    let p = points[i];
    ctx.beginPath();
    ctx.strokeStyle = p.rgb; 
    ctx.moveTo(p.x, p.y);
    ctx.lineTo(p.x + 1, p.y + 1);
    ctx.stroke();
}

draw(ctx) {
    for(let i =0; i<this.points.length; i++) {
       this.drawX(this.points, i);
    }
}

}

circle1 = new Circle(w/2, h/2, 10, 50); 
circle2 = new Circle(w/2+200, h/2, 10, 50);

function rotateAround(p1, p2) {
    for(let i =0; i<p1.length; i++) {
        for(let j =0; j<p2.length; j++) {
            let dx = Math.cos(Math.PI / 180) * (p1[i].x - p2[j].x) - Math.sin(Math.PI / 180) * (p1[i].y - p2[j].y);
            let dy = Math.sin(Math.PI / 180) * (p1[i].x - p2[j].x) + Math.cos(Math.PI / 180) * (p1[i].y - p2[j].y);

            p1[i].x = dx + p2[j].x;
            p1[i].y = dy + p2[j].y;
        }   
    }
}

function render(now) {
    //now *= 0.001;

    circle1.draw(ctx);
    circle1.rotate();

    circle2.draw(ctx);
    circle2.rotate();

    //rotateAround(circle1.points, circle2.points);       
    requestAnimationFrame(render);
}
render();

Unfortunately, the circles rotate but not around one another. What I have tried can be seen in the rotateAround method.

How do I go about solving this?

Any help would be muchly appreciated

I have large dataset of 400,00 records in a mysql database, accessed by a java api to a hibernate repo. There is an Autocomplete component in Material UI that works nice for relately small datasets in memory. That won’t work for 400K records since I don’t have that much RAM.
How do I access just the data needed as the user types?

I have the database indexed, similar to this example.

import javax.persistence.*;
import org.hibernate.annotations.Index;

@Entity
@Table(name = "users", indexes = {
    @Index(name = "idx_email", columnList = "email"),
    @Index(name = "idx_lastname_firstname", columnList = "lastName, firstName")
})
public class User {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(unique = true)
    private String email;

    private String firstName;
    private String lastName;

    // Add Getters and setters
}

That makes queries faster, but RAM still can’t hold it all. I presume I will need to limit the query to the first 100 records or so that match the input subset and replace the autocomplete list with that data. I haven’t tried that yet but it probably will be too slow for a good user experience.

Before I spend weeks experimenting, I thought I’d get suggestions here first, since it seems like it’s probably a common use case. All the examples I’ve googled so far have loaded all the data in RAM, even the “virtualized” ones.

Below is the code and I’ve edited it so many times. The copy of the template is made and put into the corresponding folder, but the text isn’t being replaced. Now there is an error message for the replace text function.

function BeeSafePopInvoiceFromBookARideForm(e) {
    var timestamp = e.values[0];
    var emailaddress = e.values[1];
    var passengername = e.values[2];
    var phonenumber = e.values[3];
    var date = e.values[4];
    var time = e.values[5];
    var thisrideisfor = e.values[6];
    var billtoname = e.values[16];

    var templatefile = DriveApp.getFileById("13AyC4fpLo-iLDN_CeRmmlgLzJVx2Qj3ZSyLj1XQW2hU");
    var popinvoicefolder = DriveApp.getFolderById("1X__Ph7vxabpxdgbYABMe3W5RqFjYswnA");

    // fix is here 
    var copy = templatefile.makeCopy(passengername + "_" + date, popinvoicefolder);
    var copiedTemplateId = copy.getId();

    let doc = DocumentApp.openById(copiedTemplateId);
    
    const body = DocumentApp.getActiveDocument().getActiveTab().asDocumentTab().getBody();

    // body.replaceText() var body = doc.getBody()
    body.replacetext("{{Timestamp}}", timestamp);
    body.replacetext("{{Email Address}}", emailaddress);
    body.replacetext("{{Name}}", passengername);
    body.replacetext("{{Phone Number}}", phonenumber);
    body.replacetext("{{Date}}", date);
    body.replacetext("{{Time}}", time);
    body.replacetext("{{This ride is for}}", thisrideisfor);
    body.replaceText("{{Bill To Name}}", billtoname);

    doc.saveAndClose();
}

In running the below R Shiny code, the 2 sections of JavaScript appear to be conflicting with each other. One section of JS is in the tooltipFun() function and the other is in the module UI section; the JS in the module UI section allows the modal dialog to be dragged by the user. The modal dialog is triggered by clicking the single action button in this example.

Basically, commenting out this following block of module UI code for draggable-modal allows the tooltip to render correctly, but the modal can no longer be dragged.

tags$head(
  tags$script(src = "jquery-ui.min.js"),
  tags$style(HTML(".draggable-modal .modal-header { cursor: move; }")),
  tags$script(HTML("
    $(document).on('shown.bs.modal', '.draggable-modal', function () {
      var $dialog = $(this).find('.modal-dialog');
      if (!$dialog.hasClass('ui-draggable')) {
        $dialog.draggable({ handle: '.modal-header', containment: 'window' });
      }
    });
  "))
),

Activating that same block of module UI code allows the modal to be dragged, but the tooltip no longer renders.

Why do these 2 sections of JS collide with each other and how can this be corrected, so both the tooltip renders (as formatted currently including bullets) and the modal remains draggable?

In working with R Shiny I am very carefully making modules as independent as possible and locally scoping objects wherever I can. I am unsure of how to carefully scope JS code.

Some images help explain. This next image shows what happens when the draggable-modal JS is activated:

And this next image shows what happens when the draggable-modal JS is deactivated:

Here is the code:

library(shiny)

numInputFun <- function(inputId, value = 10, label_text = "", label_tooltip = NULL, ns = identity) {
  label <- if (!is.null(label_tooltip)) {
    tooltipFun(ns(inputId), label_text, label_tooltip, ns = ns)
  } else {
    label_text
  }
  tagList(
    tags$label(label),
    shinyWidgets::autonumericInput(
      inputId = ns(inputId),
      label = NULL,
      value = value,
      options = list(caretPositionOnFocus = "start")
    )
  )
}

tooltipFun <- function(id, label, tooltip_html, placement = "bottom", ns = identity) {
  tagList(
    tags$span(label, id = ns(id), title = ""),
    tags$script(HTML(sprintf(
      "$(document).ready(function() {
         $('#%s').attr('title', `%s`).tooltip({html: true, placement: '%s'});
       });",
      ns(id), tooltip_html, placement
    )))
  )
}

mod30_A_ui <- function(id) {
  ns <- NS(id)
  tagList(
    tags$head(
      tags$script(src = "jquery-ui.min.js"),
      tags$style(HTML(".draggable-modal .modal-header { cursor: move; }")),
      tags$script(HTML("
        $(document).on('shown.bs.modal', '.draggable-modal', function () {
          var $dialog = $(this).find('.modal-dialog');
          if (!$dialog.hasClass('ui-draggable')) {
            $dialog.draggable({ handle: '.modal-header', containment: 'window' });
          }
        });
      "))
    ),
    numInputFun(
      inputId = "periods",
      label_text = "Periods (x-axis)",
      label_tooltip = "TEST <ul><li>Point 1</li><li>Point 2</li></ul>",
      ns = ns
    ),
    br(),
    actionButton(ns("delSeries"), "Delete series"),
    br(),
    tableOutput(ns("seriesTable"))
  )
}

mod30_A_server <- function(id, mod10_data = NULL) {
  moduleServer(id, function(input, output, session) {
    ns <- session$ns
    seriesTbl_1 <- reactiveVal(data.frame(
      `Series 1` = c(1, 2, 3),
      `Series 2` = c(4, 5, 6),
      check.names = FALSE
    ))
    
    output$seriesTable <- renderTable(seriesTbl_1(), rownames = TRUE, bordered = TRUE)
    
    observeEvent(input$delSeries, {
      showModal(
        tags$div(class = "draggable-modal",
                 modalDialog(
                   title = "Delete Series (drag from here)",
                   selectInput(ns("delSelect"), "", choices = colnames(seriesTbl_1()))
                 )
        )
      )
    })
  })
}

# Dummy parent App
ui <- fluidPage(mod30_A_ui("mod30_A"))
server <- function(input, output, session) { mod30_A_server("mod30_A") }
shinyApp(ui, server)

This is a weird one but I’m a major novice when it comes to React, I’m probably just doing this completely wrong but I’m trying to dynamically render a content tree. It starts with a single node and when the user clicks the +, it calls an API to get all the children of that node (if it hasn’t been already loaded) and add the children as inner nodes, which can then also be clicked to load those children, etc. The reason it’s done incrementally is to improve performance by only loading each necessary piece at a time rather than trying to load the whole tree at once, which can have thousands of items.

Here are the relevant parts of my code:

const [currentSelections, setCurrentSelections] = useState<any[]>();
const [contentMainRoot, setContentMainRoot] = useState<Root>();

const resetTree = () => {
  if (contentMainRoot) {
    contentMainRoot.render(<ul id={sitecoreRootId}></ul>);
  }
};

useEffect(() => {
  const rootElem = document.getElementById(sitecoreRootId);
  if (!rootElem) return;
  setContentMainRoot(createRoot(rootElem));
  resetTree();
}, [activeInstance]);

const toggleNode = async (e: any) => {
  if (!activeInstance) return;
  if (!e.target.classList.contains('loaded')) {
    const id = e.target.parentElement.getAttribute('data-id');
    const results = await GetItemChildren(activeInstance, id);
    const children = results.children;
    console.log(children);

    // append ul root
    let root = null;
    if (id + '-root' === sitecoreRootId && contentMainRoot) {
      root = contentMainRoot;
    } else {
      const rootElem = document.getElementById(id + '-root');
      if (!rootElem) return;
      root = createRoot(rootElem);
    }
    const innerTree = getInnerBrowseTree(id, children);
    root?.render(innerTree);

    e.target.classList.add('loaded');
    e.target.classList.add('open');
  } else {
    if (e.target.classList.contains('open')) {
      e.target.classList.remove('open');
    } else {
      e.target.classList.add('open');
    }
  }
};

const selectNode = (e: any) => {
  const id = e.target.parentElement
    .getAttribute('data-id')
    .replace(/(.{8})(.{4})(.{4})(.{4})(.{12})/, '$1-$2-$3-$4-$5');
  const name = e.target.parentElement.getAttribute('data-name');
  console.log(id);

  if (e.target.classList.contains('selected')) {
    e.target.classList.remove('selected');
    // remove id
  } else {
    let selectedItem = { itemId: id, name: name };
    let selectedItems: any[] =
      currentSelections === undefined ? [selectedItem] : currentSelections?.concat(selectedItem);
    setCurrentSelections(selectedItems);

    e.target.classList.add('selected');
  }
};

const getInnerBrowseTree = (id: string, children: any[]) => {
  return (
    <ul id={id}>
      {children.map((child, index) => (
        <li key={index} data-name={child.name} data-id={child.itemId}>
          {child.hasChildren && <a className="browse-expand" onClick={(e) => toggleNode(e)}></a>}
          <a className="sitecore-node" onDoubleClick={(e) => selectNode(e)}>
            {child.name}
          </a>
          <ul id={child.itemId + '-root'}></ul>
        </li>
      ))}
    </ul>
  );
};

return (
  <>
    {browseContentOpen && (
      <div id="content-tree" className="content-tree">
        <div className="inner">
          <div className="flex items-center gap-2 mt-4">
            <ul>
              <li data-name="sitecore" data-id="{11111111-1111-1111-1111-111111111111}">
                <a className="browse-expand" onClick={(e) => toggleNode(e)}></a>
                <a className="sitecore-node" onDoubleClick={(e) => selectNode(e)}>
                  sitecore
                </a>
                <ul id={sitecoreRootId}></ul>
              </li>
            </ul>
            <ul>
              {currentSelections &&
                currentSelections?.map((item, index) => (
                  <li data-id={item.itemId} data-name={item.name} key={index}>
                    {item.name}
                  </li>
                ))}
            </ul>
            <Button variant="ghost" size="sm" onClick={() => setBrowseContentOpen(false)}>
              Close
            </Button>
          </div>
        </div>
      </div>
    )}
</>
)

The issue:
All the code to expand my tree nodes works right, but selectNode doesn’t work right because it always resets currentSelections to just the item I just clicked on. Within that code, when it checks currentSelections it is always undefined, even when I just set it previously. Even though I can see currentSelections actively updating where it’s displayed, when it’s accessed in the selectNode code it’s undefined so whenever I click an item, instead of getting [content] -> [content, media library] -> [content, media library, layout], I get [content] -> [media lirbary] -> [layout]

BUT if I select a node, CLOSE the modal (click the Close button), then reopen it, the previously selected value of currentSelections is still there, and the next thing i click gets ADDED to it rather than overwriting it; but again, when i click another item, it keeps the original item from before but overwrite the new one rather than adding to it.

I’m in the process of coding this FPS shooter game on Vercel but everytime I try to run a match in the game it gives me the error “TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))” How can I fix this?

I tried restarting and reloading the game, even debugging it but nothing works.

I’ve recently put together a basic backend template using MySQL and Express.js, mainly for learning purposes and possibly to use it later in some smaller full-stack projects.
I tried to keep the structure simple and modular, so it can easily be reused and adapted for different use cases.

I’m wondering what you think about it:

In what kinds of small projects do you think this setup would be most useful?

What are some things I could improve in terms of code structure, security, or performance?

I also included a very small part of the frontend code, just to demonstrate how it might connect to the backend.

Any feedback or suggestions would be really appreciated — I’m trying to get better at writing clean and practical code!

const express = require('express');
const mysql = require('mysql');
const path = require('path');
const app = express();
app.use(express.static('public'));
const port = 3000;

const db = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: ''
});

app.listen(port, () => {
    console.log(`Server is running at http://localhost:${port}`);
});

function lekerdez(sql) {
    return new Promise((resolve, reject) => {
        db.query(sql, (err, result) => {
            if (err) reject(err);
            else resolve(result);
        });
    });
}

function kuld(res, promise) {
    promise.then((result) => {
        res.json(result);
    }).catch((err) => {
        res.json(err);
    });
}

app.get('/get_html/:filename', (req, res) => {
    res.sendFile(path.join(__dirname, 'public', req.params.filename));
});

app.get('/get_tablak', (req, res) => {
    const sql = 'SHOW TABLES';
    kuld(res, lekerdez(sql));
});

$(document).ready(function() {
    if ($("#content").attr("ures") == "true") {
        load();
        $("#content").attr("ures", "false");
    }
});

function load(url) {
    const urlToLoad = url ? url : 'tablak.html';
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/get_html/' + urlToLoad, true);
    xhr.send();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            $("#content").html(xhr.responseText);
        }
    };
}

function selectTable() {
    $('#tablazatHead #tablazatBody #tablazatHead2 #tablazatBody2').html('');
    fillTable('tablazatHead', 'tablazatBody', '/get_tablak/' + $('#lista').val(), 'onclick="sortElemek(event)"', 'onclick="sorKatt(event)"');
}

function sortElemek(event, tablaNev) {
    if (tablaNev == '') {
        const column = $(event.target).index();
        const table = $('#tablazatBody1');
        const rows = table.find('tr').get();
        rows.sort(function(a, b) {
            const A = $(a).children('td').eq(column).text().toUpperCase();
            const B = $(b).children('td').eq(column).text().toUpperCase();
            if (A < B) return -1;
            if (A > B) return 1;
            return 0;
        });

        $.each(rows, function(index, row) { table.append(row); });
    }
}

function sorKatt(event) {
    const tableName = $('#lista').val();
    if (tableName === '') {
        const row = $(event.target).parent().children('td').get();
        const id = $(row[0]).text();
        fillTable('tablazatHead2', 'tablazatBody2', `something/${id}`);
    }
}

function masikTabla() {
    $('#tablazatHead #tablazatBody #tablazatHead2 #tablazatBody2').html('');
    fillTable('tablazatHead', 'tablazatBody', '/other_something');
}

function fillTable(tablehead, tablebody, url) {
    return new Promise((resolve, reject) => {
        $(`#${tablehead}`).html('');
        $(`#${tablebody}`).html('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.send();
        xhr.onreadystatechange = function() {
            var tabla = JSON.parse(xhr.responseText);
            if (xhr.readyState == 4 && xhr.status == 200) {
                if (url.search("/") != -1) {
                    xhr = new XMLHttpRequest();
                    xhr.open('GET', '/', true);
                    xhr.send();
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            var moziidcount = JSON.parse(xhr.responseText);
                            var fejlec = '<tr>';
                            for (var key in tabla[0]) {
                                fejlec += `<th>` + key + '</th>';
                            }
                            fejlec += '</tr>';
                            var sorok = '';
                            for (var i = 0; i < tabla.length; i++) {
                                let szam = moziidcount.filter(m => m.moziid == tabla[i].id);
                                sorok += `<tr title="${szam.length > 0 ? szam[0].count : 0}">`
                                for (var k in tabla[i]) {
                                    sorok += '<td>' + tabla[i][k] + '</td>';
                                }
                                sorok += '</tr>';
                                
                            }
                            $(`#${tablehead}`).html(fejlec);
                            $(`#${tablebody}`).html(sorok);
                            resolve();
                        }
                    }
                } else {
                    var fejlec = '<tr>';
                    for (var key in tabla[0]) {
                        fejlec += `<th>` + key + '</th>';
                    }
                    fejlec += '</tr>';
                    var sorok = '';
                    for (var i = 0; i < tabla.length; i++) {
                        sorok += `<tr>`;
                        for (var k in tabla[i]) {
                            sorok += '<td>' + tabla[i][k] + '</td>';
                        }
                        sorok += '</tr>';
                    }
                    $(`#${tablehead}`).html(fejlec);
                    $(`#${tablebody}`).html(sorok);
                    resolve();
                }
            }
        };
    });
}

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="index.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/2.2.2/css/dataTables.dataTables.css" />
    <script src="https://cdn.datatables.net/2.2.2/js/dataTables.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <title></title>
    <style>
        nav a {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand navbar-light bg-light mb-2">
        <div class="nav navbar-nav">
            <a class="nav-item nav-link" onclick="load('1.html')"></a>
            <a class="nav-item nav-link" onclick="load('2.html')"></a>
            <a class="nav-item nav-link" onclick="load('3.html')"></a>
        </div>
    </nav>
    <div id="content" ures=true>
    </div>

</body>
</html>

<div class="row col-12 justify-content-center" style="height: calc(100vh - 100px);">
    <div class="col-lg-5 h-100 mb-5" style="overflow: auto;">
        <h2 id="tablazatCim0" class="tablazatCim"></h2>
        <table id="tablazat0" class="table table-striped table-bordered table-hover table-responsive-xs">
            <thead id="tablazatHead0"></thead>
            <tbody id="tablazatBody0"></tbody>
        </table>
    </div>
    <div class="col-lg-5 h-100 mb-5" style="overflow: auto;">
        <h2 id="tablazatCim1" class="tablazatCim"></h2>
        <table id="tablazat1" class="table table-striped table-bordered table-hover table-responsive-xs">
            <thead id="tablazatHead1"></thead>
            <tbody id="tablazatBody1"></tbody>
        </table>
    </div>
</div>
<script>
    var xhrTablak = new XMLHttpRequest();
    xhrTablak.open('GET', '/get_tablak', true);
    xhrTablak.send();
    xhrTablak.onreadystatechange = function() {
        if (xhrTablak.readyState == 4 && xhrTablak.status == 200) {
            var tablak = JSON.parse(xhrTablak.responseText);
            tablaRekurziv(0, tablak);
        }
    };

    function tablaRekurziv(i, tablak) {
        if (i < tablak.length) {
            $("#tablazatCim" + i).text(tablak[i].Tables_in_vetitesek);
            fillTable('tablazatHead' + i, 'tablazatBody' + i, 'get_tablak/' + tablak[i].Tables_in_vetitesek).then((result) => {
                tablaRekurziv(i + 1, tablak);
            });
        }
    } 
</script>

<div class="row col-12 justify-content-center" style="height: calc(100vh - 100px);">
    <div class="col-auto h-100" style="overflow: auto;">
        <table class="table table-striped table-bordered table-hover table-responsive-sm">
            <thead id="tablazatHead"></thead>
            <tbody id="tablazatBody"></tbody>
        </table>
    </div>
</div>
<script>
    fillTable('tablazatHead', 'tablazatBody', 'get_szinkron_tipusonkent');
</script>

<div class="row col-12" style="height: calc(100vh - 100px);">
    <div class="col-auto h-100">
        <h2 class="">!</h2>
        <select id="selectMozi"></select>
    </div>
    <div class="col-auto h-100" style="overflow: auto;">
        <h2 class=""></h2>
        <table class="table table-striped table-bordered table-hover table-responsive-sm">
            <thead id="tablazatHead"></thead>
            <tbody id="tablazatBody"></tbody>
        </table>
    </div>
</div>
<script>
    var xhrVaros = new XMLHttpRequest();
    xhrVaros.open('GET', '/get_tablak/tabla_name', true);
    xhrVaros.send();
    xhrVaros.onreadystatechange = function() {
        if (xhrVaros.readyState == 4 && xhrVaros.status == 200) {
            var mozik = JSON.parse(xhrVaros.responseText);
            var opciok = '<option></option>';
            mozik.forEach(d => {
                opciok += `<option value=""</option>`;
            });
            $('#selectMozi').html(opciok);
        }
    };
    $('#selectMozi').change(function() {
        const moziid = $('#selectMozi').val();
        fillTable('tablazatHead', 'tablazatBody', '/get_table_name/' + moziid);
    });
</script>

ซื้อหวยออนไลน์ ถูกกฎหมาย ซื้อหวยออนไลน์ เว็บไหนดี 2568 ซื้อหวยออนไลน์ แทงหวยออนไลน์ ซื้อหวยออนไลน์ 2 ตัว ซื้อหวยออนไลน์ กองสลาก ซื้อหวยออนไลน์ เว็บ ซื้อหวยออนไลน์เว็บไหนดี pantip แทงหวยออนไลน์ แทงหวยออนไลน์เว็บไหนดี

✅ แทงหวยคลิ้ก https://citly.me/en/px1tW

แนะนำ SBO2UPOP1 เว็บแทงหวยออนไลน์ที่ดีที่สุดในไทย ซื้อหวยออนไลน์ บาทละ 1200 มีบริการหวยครบวงจรทั้งหวยรัฐบาลไทย, หวยลาว, หวยฮานอย, หวยยี่กี, หวยหุ้น, หวยมาเลย์, หวยใต้ดิน, หวยออมสิน, และหวย ธ.ก.ส.

หวยเยอะ , หวยรัฐบาล , หวยลาว , หวยฮานอย , ยี่กี , มาเลย์ , เว็บหวยมาเเรง 2023 , สมัครสมาชิกหวยหุ้น เว็บหวยรวย , หวยโฮจิมินห์ , หวยลาวภาคี , หวยลาวมิตรภาพ , หวยลาวสำพันธ์ , หวยยี่กีได้ง่าย , หวยยี่กีกี่บาท , กลุ่มหวยยี่กี , เว็บหวยยี่กี , ซื้อหวยยี่กี , หวยยี่กีไม่โกง , หวยยี่กียิงเลข , หวยยี่รอบเร็ว , , เว็บหวยเว็บไหนจ่ายจริงบ้างครับ เว็บหวย ออกหวย , หวยดีไหม , เลข 2 ตัว , เว็บซื้อหวย หวยรัฐบาล , แทงหวย ซื้อหวยออนไลน์ , หวยไทย , หวยสด ,ซื้อหวย ขั้นต่ำ 1บาท , หวยออนไลน์ จ่ายเท่าไร , หวยมาเเรง , เว็บซื้อหวย หวยเปิดใหม่ , มักหวย หวยดี แทงหวย ใต้ดิน , หวยลาว ซื้อหวยลาว , ซื้อหวย 3 ตัวบน , สมัครหวย สมัครแทงหวยออนไลน์ , ซื้อหวยหุ้น ,ซื้อหวยรัฐบาล,ซื้อหวยกับเราไม่ยากเลย,ซื้อหวยผ่านเเอพ ,มีหวยมากมาย ซื้อหวยได้ที่ไหน , สมัครซื้อหวย , หวยออนไลน์ 24 ชั่วโมง, ซื้อหวยออนไลน์ ที่ไหนดี, เว็บหวย ดีที่สุด, ฮานอยพิเศษ, เล่นหวยสด, หวยลาว, ฮานอยVIP, แนวทางหวยหุ้น รูปเเบบหวยออนไลน์, ตรวจหวย, เว็บหวยออนไลน์, สมัครซื้อหวยง่ายๆ, ยี่กี, หวยไทย, เว็บหวย, หวยฮานอย หวยมาเลย์, ซื้อหวยได้ที่ไหน, ฮานอยวีไอพี, หวยรัฐบาล, หวยยี่กี, หวยสด, หวยลาว, มาเลย์, เว็บหวยจ่ายไม่อั่น ซื้อหวย, หวยเล่นง่าย, สมัครซื้อหวย, และเเนวทางหวย, บาทละ1200 , บาทละ1200 เป็นหนึ่งใน เว็บหวย ที่ให้บริการผ่านทางออนไลน์

$('.Nav1').click(function() {
    history.pushState(true, '', '/home');
});

$('.Nav2').click(function() {
    history.pushState(true, '', '/gallery');
});

$('.Nav3').click(function() {
    history.pushState(true, '', '/blogs');
});

$('.Nav4').click(function() {
    history.pushState(true, '', '/memes');
});

$('.Nav5').click(function() {
    history.pushState(true, '', '/profile');
});


$(window).on('popstate', function(e) {
    let state = e.originalEvent.state;
    if(state){
        const path = window.location.pathname.replace(/^/+|/+$/g, '');
        alert(path)
    }else{
        $('.Nav1').click()
    }
});

On that scenario, the popstate triggered perfectly and triggered again if you go back until there’s no pushState().

But if you modify the popstate event like this:

$(window).on('popstate', function(e) {
    let state = e.originalEvent.state;
    if (state) {
        const path = window.location.pathname.replace(/^/+|/+$/g, '');
        if (path == 'home') {
            $('.Nav1').click();
        } else if (path == 'gallery') {
            $('.Nav2').click();
        } else if (path == 'blogs') {
            $('.Nav3').click()
        } else if (path == 'memes') {
            $('.Nav4').click()
        } else if (path == 'profile') {
            $('.Nav5').click();
        }
    } else {
        $('.Nav1').click()
    }
});

The popstate run once. After the second back, it will close the entire window or close the site.

I have 5 navigations, if you click the Profile (class=”.Nav5″), then click Memes (class=’.Nav4′), then if you click back button or swipe back. The site switch to go on Profile. Because of if(path == 'profile'). However, if you go back again, it will close the site, Instead it go back to “Home Page”. (Triggered the else statement because the state is now null.

Expectations

Case 1:

Gallery > Blogs > Profile

First Back = Blogs

Second Back = (instead of ‘Gallery’, it goes Home immediately

Third back = Close site or go back to previous site.

Case 2:

Profile

First Back = Home

Second Back = Close Site

Case 3:

Profile > Gallery > Blogs > Gallery > Memes > Profile

First Back = Memes

Second Back = Home (immediately)

Third Back = Close

REALITY

The popstate trigger once

The second back, closed the window immediately even you click more navigations.

I have been working with a client who is using an existing chatbot provider (Glia). They already have a functional chatbot on the site, but the client also wants a chat widget on a particular page that will have the same functionality, but appear as a row of buttons.

The buttons are appearing as “unavailable” on initial page load, but they do show as working after a page refresh. Trying to troubleshoot that, and noticed that the phone number button needs some extra JS according to the Glia folks:

“You will also need to modify the phone section of the JavaScript to dynamically gather the visitor’s phone number, either from the member accounts or via a form on your website.”

Here’s the “phone section of the JS” as far as I can tell below (this was the code Glia has in their docs)

I am stuck as to do where it says: Read the visitor’s phone number from a separate UI element or from another information source.

Does anyone have any advice on how to modify this function to gather the visitor’s phone number in a form?

// Queue upon button click
mediaButton.addEventListener('click', function() {

if (buttonMedium === 'phone') {

// Read the visitor's phone number from a separate UI element or from

// another information source.

var visitorPhoneNumber = '+11111111111';

salemove

.queueForEngagement(buttonMedium, {

queueId: queueId,

phoneNumber: visitorPhoneNumber

})

.catch(showFailedToQueueView);

} else {

salemove

.queueForEngagement(buttonMedium, {queueId: queueId})

.catch(showFailedToQueueView);

The chatbot that is embedded throughout the site using Glia’s SDK DOES have a working UI to add a phone number. I would think that using the same SDK JS would enable the same functionality, but that doesn’t seem to be the case.

Throughout the whole project Glia has tended to give pretty cryptic instructions which could be because they are trying to get us to just give up and have them do this for WAY more money. So, client is trying to save $$$ and I am learning a lot, just not sure how to implement a feature like this. Any advice welcome! Thanks!

enter image description here

I’m trying to create a userscript that monitors text changes in a visually hidden element on Google’s Gemini AI interface and automatically pastes that text into the Quill editor input area.

What I’m trying to achieve:

1. Monitor text changes in an element with class h1.cdk-visually-hidden on https://gemini.google.com/ or https://gemini.google.com/app/
2. When text changes are detected, simulate a human paste operation to copy that text (including multiline formatting) into the Quill editor (element with class .ql-editor)

Current issue:

When I update the hidden element with multiline text, the line breaks aren’t preserved correctly when inserted into the target Quill editor. I believe this is because I’m not properly simulating how a human would paste text.

My current approach:

I’ve tried directly setting the innerHTML of the target element, but this doesn’t trigger Quill’s native handling of pasted content:

function insertTextToInputArea(text) {
    const inputDiv = document.querySelector('.ql-editor');
    if (!inputDiv) return false;
    
    // This approach doesn't preserve multiline formatting correctly
    const formattedText = text.split('n').map(line =>
        line.trim() ? line : ''
    ).join('');
    
    inputDiv.innerHTML = '' + formattedText + '';
    
    // Trigger events
    const event = new Event('input', { bubbles: true });
    inputDiv.dispatchEvent(event);
}

What I’ve tried:

• Setting innerHTML directly with paragraph tags
• Using document.execCommand(‘insertText’)
• Creating a ClipboardEvent with the text data

I believe I need to properly simulate a paste operation that will trigger Quill’s native paste handling. The target element is not a standard textarea but a contenteditable div:

I am trying to write an image strip style component, using React, that shows an array of img elements. When an img is clicked on, I want it to be set as the selected item and change the border color.

I’m facing an issue – when I click on an img, it causes all of the img elements to re-download their images.

I’ve put together this demo that shows what I’m talking about. The URLs are sample images from Lorem Picsum and will randomly generate an image upon loading. So it’s easy to see that when you click one, they all change.

How can I prevent this?

import * as React from 'react';

import ImageStrip from './ImageStrip';

function App() {
  const [selected, setSelected] = React.useState('');

  function handleClick(url: string) {
    setSelected(url);
  }

  const urlsCallback = React.useCallback(() => {
    const randomNumbers = Array.from({ length: 5 }, () =>
      Math.floor(Math.random() * 100)
    ).map((m) => Number(m));

    return randomNumbers.map((m) => `https://picsum.photos/100?random=${m}`);
  }, []);

  const urls = urlsCallback();

  return (
    <>
      <div>
        <p>selected url: {selected}</p>
      </div>
      <div>
        <ImageStrip urls={urls} selectedUrl={selected} onClick={handleClick} />
      </div>
    </>
  );
}

export default App;

https://stackblitz.com/edit/vitejs-vite-s5cxkc4k?file=src%2FApp.tsx

Hi I am using this JS code but I am not able to view the info “ui-icon-info” icon can someone help me.

const summary = "Summary text";
const info = "Info text";
const act = "Act text";
const title = "Title";


$(document).ready(function() {
  $('<div id="custom-alert" >' + '<br><b>' + summary + '</b><br><br>' + info + '<br><br>' + act + '</div>').appendTo('body');
  $('#custom-alert').dialog({
    title: title,
    modal: true,
    width: 600,
    height: 320,
    icon: "ui-icon-info",
    closeText: '',
    buttons: {
      "OK": function() {
        $(this).dialog('destroy').remove()
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css" />