Category: javascript

I’m trying to access the spreadjs canvas for one of my automation project with selenium java

This is code snippet I’m using for the same

URL: https://developer.mescius.com/spreadjs/demos/features/table-sheet/overview/purejs

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("window.testSpread = new GC.Spread.Sheets.findControl(document.querySelector("[gcuielement='gcWorksheetCanvas']"))");
Object value = js.executeScript("return window.testSpread.getActiveSheet().getValue(0,0,);");

Getting the below error while running the code

org.openqa.selenium.JavascriptException: javascript error: window.testSpread.getActiveSheet is not a function

I am using this regexp to replace all non digits with an empty space. But I want to NOT replace a plus sign.

str.replace(/D/g, '')

067 – valid
+067 – valid
-067 – invalid
aaa – invalid
$%$ -invalid

how can we allow a single + sign to be allowed not to be replaced?
how can we allow a multiple + signs to be allowed not to be replaced?

I am creating a polygon using point positions, and based on that, I am creating the boundary. However, my boundary is loading differently, and I want to resolve it. Can someone help me?

code is here
https://codesandbox.io/p/sandbox/charming-tdd-nkf64x?file=%2Fsrc%2FobjViewer.tsx&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cls9v0l5m0006356map1fkgfh%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cls9v0l5m0002356m06sg3gy6%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cls9v0l5m0003356m3il2pgut%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cls9v0l5m0005356m3p0pskeg%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B49.1156749881308%252C50.8843250118692%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cls9v0l5m0002356m06sg3gy6%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cls9v0l5l0001356mf94p7pwa%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fpublic%252Findex.html%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522cls9y18en003x356fn5277paa%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252FobjViewer.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522cls9v0l5m0002356m06sg3gy6%2522%252C%2522activeTabId%2522%253A%2522cls9y18en003x356fn5277paa%2522%257D%252C%2522cls9v0l5m0005356m3p0pskeg%2522%253A%257B%2522id%2522%253A%2522cls9v0l5m0005356m3p0pskeg%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cls9v0l5m0004356myp0rrrwc%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522activeTabId%2522%253A%2522cls9v0l5m0004356myp0rrrwc%2522%257D%252C%2522cls9v0l5m0003356m3il2pgut%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cls9v0l5m0003356m3il2pgut%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Afalse%252C%2522sidebarPanelSize%2522%253A0%257D

https://www.awesomescreenshot.com/video/25104664?key=257e8a949f820e5272aba2079519bae4

this is the video link here boundary was in red color and green was the polygon lines I want to fit into the polygon lines how can i fix it..

I have a CSS class .pre-wrap with the following definition:

.pre-wrap {
  white-space: pre-wrap;
}

This class is applied to certain elements containing text. The white-space: pre-wrap; property is supposed to preserve white space and wrap lines when necessary.

However, I’ve encountered an issue where triple-clicking on a line of text with this class doesn’t always select the entire line. Instead, it selects the whole line along with the first letter of the next line.

I’ve noticed that this problem occurs inconsistently across different lines of text. Some lines behave as expected, where triple-clicking selects the entire line, while others exhibit the issue described above.

I’ve attached a screenshot for reference.

How can I ensure that triple-clicking always selects the entire line of text, without including the first letter of the next line?

Thanks in advance for your help

I wonder what is the architecture used by GitHub to receive notifications in web pages?
For example, when you open a GitHub issue, and someone else replies to that issue (or close the issue), the web page is updated automatically with such information.

I also have the impression that after the page is open for a while, the notifications stopped working (i.e., if the issue is closed, the page is not updated anymore, unless you refresh it).

Does that mean that maybe the mechanism is a long polling request?

I tried to inspect the source code and the network connections but couldn’t understand much. I didn’t see any WebSockets connection active in the browser network tab, nor any pending HTTPS connection there.

Getting this error:

node_modulesexpress-validatorsrcchainvalidators-impl.js:25
this.lastValidator.message = message;
^

TypeError: Cannot set properties of undefined (setting ‘message’)

TypeError: Cannot set properties of undefined (setting ‘message’) in Express Validator
this.lastValidator.message = message;

user.validators.js

const { check, body } = require('express-validator');

const signUp = [
  check('username').exists().withMessage('Username is Required'),
  check('email').isEmail().normalizeEmail().withMessage('Email is Required'),
  check('password').isLength({ min: 8 }).withMessage('Minimum 8 charcters required'),
]

const loginCheck = [
  check('email').isEmail().normalizeEmail().withMessage('Email is Required'),
  check('password').isLength(8).withMessage('Minimum 8 charcters required'),
]

const forgotEmail = check('email').isEmail().normalizeEmail().withMessage('Email is Required')


const checkPass = [
  check('password').isLength({ min: 8 }).withMessage('Minimum 8 charcters required'),
  check('newPassword').isLength({ min: 8 }).withMessage('Minimum 8 charcters required'),
]


module.exports = {
  signUp,
  loginCheck,
  forgotEmail,
  checkPass
}

validate.js:

const { validationResult } = require('express-validator');

const validate = async (req, res, next) => {
  try {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(400).json({ errors: errors.array() });
    } else {
      next();
    }
  } catch (e) {
    console.log(e);
    return res.status(400).json({ message: 'something went wrong!' });
  }
};

and user.routes.js:

const express = require('express')
const router = express.Router();
const eventRoutes = require('./event.routes')
const { validationResult } = require('express-validator');
const auth = require('./../middleware/auth.middleware')
const userValidate = require('./../validator/user.validators')

const controller = require('../controllers/users.controllers');
const validate = require('../validator/validate');

router.post('/register', userValidate.signUp, validate, controller.register)

router.post('/login', userValidate.loginCheck, validate, controller.login)

router.post('/logout', auth, controller.logout)

router.put('/change-password', auth, userValidate.checkPass, validate, controller.changePassword)

router.put('/reset-password', controller.resetPassword)

router.post('/forgot-password', userValidate.forgotEmail, validate, controller.forgotPassword)

router.get('/gettoken', auth, controller.checkToken)

router.use('/events', auth, eventRoutes)

module.exports = router;

I have similar routes, controllers & validators for “Event” & “InvitedUsers”

Every time I refresh the page, the first time I add an element to the array “checkCount” using the push() function, two “0” are added as a result

Codes come from codingartistweb.com【JavaScript line 120 – 140】, but I made some modifications

document.querySelector("#push").addEventListener("click", () => {
  checkCount.push(count);
  console.log(checkCount);
  updateStorage(count, newTaskInput.value, false);
  count += 1;
  newTaskInput.value = "";
  console.log(checkCount);
});

By outputting the checkCount, you can see a strange result：
enter image description here
The updateStorage() function should not have any impact (It has passed the breakpoint check)
Does anyone know why there are two inputs of 0 and how to fix it? Thanks♪(･ω･)ﾉ
(If you need the complete code, I will add it to my CodePen page later)

I created a list where i used onPressStart , onpressMove and onPressEnd to rearrange the list. i added a setTimeout so that i can see if the action is a scrolling or a rearranging action.

if the startPress is active for more that 500ms its considered as a rearranging action and a flag is set. and if onpRessMove is triggered before 500ms its considered as a scrolling action. im using a ref for both timeout and the action.

after 500ms the said element’s position will be set to fixed and z index to 99, the top and left of the element is set using clientx and clienty from the onTouchmove eventlistner.

the problem is that when i test this on android , the image behind the element with the listeners is picking up the longpress and the chrome popup for downloading the image is appearing.

Im using react to build the web app.

i tried priventDefaut() and stopPropogation() , it did not work.

i have checked if its related to z index ,but i have not set z index of the image. And the zindex of the element with the listeners have been set to 99 and still the image is taking the event.

Error : Requiring module “node_modulesreact-apexchartsdistreact-apexcharts.min.js”, which threw an exception: ReferenceError: Can’t find variable: SVG

I did research on this error but i didnt proper solution and this is package.json file of mine
i m using react-apexchart with dep apexcharts even its giving error

{
  "name": "****",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android --reset-cache",
    "a": "react-native run-android",
  },
  "dependencies": {
    "apexcharts": "^3.46.0",
    "react": "16.13.1",
    "react-apexcharts": "^1.4.1",
    "react-native": "0.63.4",
    }

comp.tsx
When I tried to implement

/* eslint-disable react-native/no-inline-styles */
import React, {memo} from 'react';
import {
  // TouchableOpacity,
  View,
} from 'react-native';
import {Appbar} from 'react-native-paper';
import {
  useNavigation,
  // DrawerActions
} from '@react-navigation/native';
import {withTheme} from 'react-native-paper';
import ReactApexChart from 'react-apexcharts';

function comp({theme}) {
  const navigation = useNavigation();
  const chartOptions = {
    // Define your chart options here
    chart: {
      type: 'line',
    },
    series: [
      {
        name: 'Series 1',
        data: [30, 40, 35, 50, 49, 60, 70, 91, 125],
      },
    ],
    xaxis: {
      categories: [
        'Jan',
        'Feb',
        'Mar',
        'Apr',
        'May',
        'Jun',
        'Jul',
        'Aug',
        'Sep',
      ],
    },
  };
  return (
    <>
      <Appbar.Header
        style={{borderBottomWidth: 2, borderColor: theme.colors.primary}}>
        <View>
          <Appbar.BackAction
            color={theme.colors.primary}
            onPress={() => {
              navigation.navigate('Profile');
            }}
          />
        </View>
        <Appbar.Content
          title="Stress Level"
          titleStyle={{
            color: theme.colors.primary,
            fontFamily: theme.fonts.thin.fontFamily,
            fontSize: 25,
          }}
        />
        {/* <TouchableOpacity
          onPress={() => navigation.dispatch(DrawerActions.openDrawer())}>
          <Appbar.Action icon="menu" color={theme.colors.primary} size={28} />
        </TouchableOpacity> */}
      </Appbar.Header>
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <ReactApexChart
          options={chartOptions}
          series={chartOptions.series}
          type="line"
          height={350}
        />
      </View>
    </>
  );
}

export default memo(withTheme(comp));

I’m working on my first package.
The package has a playground, where I can test the Datatable component. Everything works as expected there.
Then I have a project, that will depend on this package. In the project, the dropdown has unlimited height, because tw class max-h-64 is not imported in the project.

If I extend project’s tailwind.config.js to this:

content: [
    './src/**/*.{html,js,svelte,ts}',
    './node_modules/mynew-ui/dist/**/*.{html,js,svelte,ts}'
],

it works, however it should come with package, so other users won’t be bothered with this installation step.

How to include tailwind classes used by the package in its build directory?

package’s package.json

{
    "name": "mynew-ui",
    "version": "0.1.2",
    "scripts": {
        "dev": "vite dev",
        "build": "vite build && npm run package",
        "preview": "vite preview",
        "package": "svelte-kit sync && svelte-package && publint",
        "prepublishOnly": "npm run package",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
        "lint": "prettier --check . && eslint .",
        "format": "prettier --write ."
    },
    "exports": {
        ".": {
            "types": "./dist/index.d.ts",
            "svelte": "./dist/index.js"
        }
    },
    "files": [
        "dist",
        "!dist/**/*.test.*",
        "!dist/**/*.spec.*"
    ],
    "peerDependencies": {
        "svelte": "^4.0.0"
    },
    "devDependencies": {
        "@sveltejs/adapter-auto": "^3.0.0",
        "@sveltejs/kit": "^2.0.0",
        "@sveltejs/package": "^2.0.0",
        "@sveltejs/vite-plugin-svelte": "^3.0.0",
        "@types/eslint": "8.56.0",
        "@typescript-eslint/eslint-plugin": "^6.0.0",
        "@typescript-eslint/parser": "^6.0.0",
        "autoprefixer": "^10.4.16",
        "eslint": "^8.56.0",
        "eslint-config-prettier": "^9.1.0",
        "eslint-plugin-svelte": "^2.35.1",
        "postcss": "^8.4.32",
        "postcss-load-config": "^5.0.2",
        "prettier": "^3.1.1",
        "prettier-plugin-svelte": "^3.1.2",
        "prettier-plugin-tailwindcss": "^0.5.9",
        "publint": "^0.1.9",
        "svelte": "^4.2.7",
        "svelte-check": "^3.6.0",
        "tailwindcss": "^3.3.6",
        "tslib": "^2.4.1",
        "typescript": "^5.0.0",
        "vite": "^5.0.11"
    },
    "svelte": "./dist/index.js",
    "types": "./dist/index.d.ts",
    "type": "module",
    "dependencies": {
        "bits-ui": "^0.18.1",
        "clsx": "^2.1.0",
        "latinize": "^2.0.0",
        "tailwind-merge": "^2.2.1",
        "tailwind-variants": "^0.2.0"
    }
}

Right now I am developing chrome extension that works in background for Facebook.com, it works now and well as it does not require the user to login, probably because the cookies are stored somewhere.

But in last 2 days I am seeing this warning continuously and it appears alot, is there way to remove this warning and in future will this affect the way I am currently using chrome extension for running facebook.com in scrapping because if third party cookies will not be allowed from iframe then it probably means the user would require to login which is not possible as the site is hidden through iframe in offscreen document.
Currently, I am creating offscreen document –> removing x-frame options from response header –> injecting iframe –> setting src for iframe

I have a text field that contains text with resolvers like so:

hello %%firstname%% text example 1234 %%lastname%%

I want to match anything that is wrapped between %% and %% like %%firstname%% and %%lastname%% and so on for all the resolvers that are present.

Can anyone help with the regex in javascript?

Thanks

I want to check if the obj object variable has all the properties of the Person interface.

interface Person {
  name: string;
  age: number;
}

const jsonObj = `{
  name: "John Doe",
  age: 30,
}`;

const obj: Person = JSON.parse(jsonObj);

const isPerson = obj instanceof Person; // Person is not defined

console.log(isPerson); // true

When I execute this code, it yield Person in not defined!

I would expect the code to log true as the obj is an instance of Person.

So in my application I implemented to following sequence:

I have a NotificationsHub connected to all users. Then, through this hub, user1 sends a request to chat to user2. User2 accepts the request and is immediately redirected to the chat page, which belongs to another Hub, the ChatHub. When user2 finishes loading the page and creating the connection to the Hub, I use the same NotificationHub to send the connectionId of the chatHub to the user1 to redirect and connect him to the same chat.

My problem is this last part. I don’t know if it has something to do with asyncronous calls, but when I try to send the user to the page it says it cannot send because the connection is not in the connected state.

Both users are redirected to the same page, the difference is in the role of the user connected:

<script src="~/js/chat.js"></script>
<script src="~/js/notifications.js"></script>
<script>

    @if(User.IsInRole(Constantes.userRoleConsultor))
    {
        @:window.onload = function() {
            @:var chatId = document.cookie
            @:var chatDB = "@ViewData["ChatDb"]";
            @:var consultorId = "@ViewData["ConsultorId"]";
            @:var userId = "@ViewData["UserId"]";

            @:notificationsConnection.invoke("SendUserToChat", userId, chatId, chatDB).catch(function(err) {
              @:return console.log(err);
            @:});
        @:}
    }

    @if (User.IsInRole(Constantes.userRoleCustomer))
    {
        @:window.onload = function() {
            @:var chatId = "@ViewData["ChatId"]";
            @:var chatDB = "@ViewData["ChatDbId"]";
            @:var consultorId = "@ViewData["ConsultorId"]";
            @:var userId = "@ViewData["UserId"]";

            @:connectToChatHub(chatId);
        @:}
    
    }
</script>

So both users are loading my 2 hubs when they reach the page. And when the first user (he has the userRoleConsultor) finishes it, he sends a signal trough the notifications hub to “SendUserToChat”, but here its when it says the notificationsConnection is not in a connected state.

I thought that by using window.onload() I would be able to wait for chat.js and notification.js to do all they need to do before proceding but looks like it doesent so I could use some ideas to fix my problem. Thank you!

I’ve already tried 20 ways and append and show and both fail.
You want the #zakaz-pusto object to be displayed again after removing an item from the cart
And for me, everything is deleted, but the object is not visible.
What’s wrong with that?
Nothing helps.
I asked GPT, it doesn’t help me in any way.

For the most part, the shopping cart is working properly.

Can you give me more advice? You are welcome.

$(document).ready(function CartLogic() {
    const cart = [];

    const itemx7 = {
        name: 'item1',
        price: 10190,
        quantity: 1,
    };

    $('.button-buy').click(function BuyItem() {
        $('#zakaz-pusto').hide();
        $('#cart-object').show();

        const existingItem = cart.find(item => item.name === itemx7.name);

        if (existingItem) {
            existingItem.quantity++;
        } else {
            cart.push({...itemx7, quantity: 1});
        }

        updateCartDisplay();
    });

    function updateCartDisplay() {
        const cartContainer = $('#zakaz-menu');

        cartContainer.empty();

        cart.forEach(item => {
            const itemHTML = `<div class="cart-item">
                            <span class="item-name">${item.name}</span>
                            <button class="quantity-button increase" data-action="increase" data-name="${item.name}">+</button>
                            <span class="item-quantity">${item.quantity}</span>
                            <button class="quantity-button decrease" data-action="decrease" data-name="${item.name}">-</button>
                            <span class="item-price">${item.price * item.quantity} ₽</span>
                            <button class="quantity-button item-delete" data-action="item-delete" data-name="${item.name}">✕</button>
                          </div>`;
            cartContainer.append(itemHTML);
        });

        let totalAmount = 0;
        cart.forEach(item => {
            totalAmount += item.price * item.quantity;
        });

        const totalAmountContainer = $('#zakaz-summa');

        totalAmountContainer.empty();

        totalAmountContainer.text(`${totalAmount} ₽`);

        //////<---->//////
        if (cart.length === 0){
            cartContainer.append($('#zakaz-pusto'))
        }
        //////<---->//////
    }

    $('#zakaz-menu').on('click', '.quantity-button', function () {
        const action = $(this).data('action');
        const itemName = $(this).data('name');
        const itemToUpdate = cart.find(item => item.name === itemName);

        if (action === 'increase') {
            itemToUpdate.quantity++;
        } else if (action === 'decrease' && itemToUpdate.quantity > 1) {
            itemToUpdate.quantity--;
            //////<---->//////
        } else if (action === 'item-delete') {
            cart.length = 0;
        } else if (action === 'decrease' && itemToUpdate.quantity === 1){
            cart.length = 0
        }
            //////<---->//////
        updateCartDisplay();

    });
});