Category: javascript

I have a problem with playwright using python for automation, when I manipulate a button on the website, i had a problem, because it gives me an error, first I will show the code in Python

button = page.locator("button.p-ripple").first()
button.click()

In this case, I want to press this button, it is inside a p-button, apparently an element used in Angular.

This is the result when selecting the element from the DOM

document.querySelectorAll("button.p-ripple")
result -> NodeList [ button.p-button.p-component.p-ripple ]

This is the result right after placing the indexing, it finds the element

document.querySelectorAll("button.p-ripple")[0]
result -> <button class="p-button p-component p-ripple" pripple="" type="button">

I wanted to do the same with playwright using python, but neither first() nor nth(index) work for me, this error appears

‘Locator’ object is not callable
File “/file.py”, line 84, in function_python
button = page.locator(“button.p-ripple”).first()
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File “/file.py”, line 133, in main
function_python(page)
File “/file.py”, line 140, in
main()
TypeError: ‘Locator’ object is not callable

(on line 84 is where the locator is, on line 133 is where the function I created within the main function is located, its function is to call the browser page, on line 140 is the main function that I call in the initializer)

I want to create an input spinner with dynamic values (like: 125, 180, 200, 270, 260 and so on, there is no pattern) that I have stored in my db.
For my tech stack I am using Laravel, JavaScript, HTML, CSS and Bootstrap.

I was able to get the package in a dropdown but I was unable to put those in a input spinner

<select class="form-select form-select-lg srd" onchange="facebookrr()" id="facebookpack" aria-label="Default select example">

     <option selected value="">Select package</option>
      @foreach ($facebook as $item)
        <option value="{{ $item->amount }}">{{ $item->amount }}</option>
     @endforeach
</select>

I am using Bootstrap’s input spinner.

<input type="number" value="5" min="0" max="100" step="1">
<script>
   $("input[type='number']").inputSpinner();
</script>

Can anyone help me with it?

I want to set this “matrix effect” to be the background of my html5 website, but whenever I try to put elements above the canvas it fades out and the text is rendered above the canvas.

I tried making a separate canvas to put the image on but it just moves the image.
I have also tried several variants of this “matrix effect” but they all do the same method of fading out the letters.

background.js

const canvas = document.getElementById('background_canvas');
const context = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';
const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const nums = '0123456789';

const alphabet = katakana + latin + nums;

const fontSize = 16;
const columns = canvas.width/fontSize;

const rainDrops = [];

for( let x = 0; x < columns; x++ ) {
    rainDrops[x] = 1;
}

const draw = () => {
    context.fillStyle = 'rgba(0, 0, 0, 0.05)';
    context.fillRect(0, 0, canvas.width, canvas.height);

    context.fillStyle = '#0F0';
    context.font = fontSize + 'px monospace';

    for(let i = 0; i < rainDrops.length; i++)
    {
        const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));
        context.fillText(text, i*fontSize, rainDrops[i]*fontSize);

        if(rainDrops[i]*fontSize > canvas.height && Math.random() > 0.975){
            rainDrops[i] = 0;
        }
        rainDrops[i]++;
    }
};

setInterval(draw, 30);

style.css

html {
    background: black;
    height: 100%;
    overflow: hidden;
}

body .canvas #background_canvas{
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    display: block;
    height: 100%;
    width: 100%;
    z-index: -1;
}

body #foreground{
    background-color:transparent;
    fill-opacity: 100%;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>About RatherChaotic</title>
    <link rel="stylesheet" href="./assets/css/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div id="background">
        <script src="assets/js/background.js" type="module"></script>
        <canvas id="background_canvas" style='position:absolute; left:0; top:0;'>Cannot Render Canvas</canvas>
    </div>
    <div id="foreground">
        <script src="assets/js/app.js" type="module"></script>
        <canvas id="foreground_canvas"></canvas>
        <img src="assets/images/pfp.png" alt="My Profile Picture">
    </div>
</body>
</html>

I am creating a chess game. I reached the part where I am adding logic and stuff to my pawn using numbers, but when I drag my piece along an appropriate square the gameboard gets messy and pieces get misplaced, like in the following photos:

enter image description here
enter image description here

I am suspecting the issue might be related to my chessboard. Another thing, when I drag my black pawn, all the sqaure ids become the same when each is assigned a number based on thier index in the foreach loop.

const king =
  '<div class="piece" id="king fill="orange"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M224 0c17.7 0 32 14.3 32 32V48h16c17.7 0 32 14.3 32 32s-14.3 32-32 32H256v48H408c22.1 0 40 17.9 40 40c0 5.3-1 10.5-3.1 15.4L368 400H80L3.1 215.4C1 210.5 0 205.3 0 200c0-22.1 17.9-40 40-40H192V112H176c-17.7 0-32-14.3-32-32s14.3-32 32-32h16V32c0-17.7 14.3-32 32-32zM38.6 473.4L80 432H368l41.4 41.4c4.2 4.2 6.6 10 6.6 16c0 12.5-10.1 22.6-22.6 22.6H54.6C42.1 512 32 501.9 32 489.4c0-6 2.4-11.8 6.6-16z"/></svg> </div>';
const queen =
  '<div class="piece" id="queen"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 0a56 56 0 1 1 0 112A56 56 0 1 1 256 0zM134.1 143.8c3.3-13 15-23.8 30.2-23.8c12.3 0 22.6 7.2 27.7 17c12 23.2 36.2 39 64 39s52-15.8 64-39c5.1-9.8 15.4-17 27.7-17c15.3 0 27 10.8 30.2 23.8c7 27.8 32.2 48.3 62.1 48.3c10.8 0 21-2.7 29.8-7.4c8.4-4.4 18.9-4.5 27.6 .9c13 8 17.1 25 9.2 38L399.7 400H384 343.6 168.4 128 112.3L5.4 223.6c-7.9-13-3.8-30 9.2-38c8.7-5.3 19.2-5.3 27.6-.9c8.9 4.7 19 7.4 29.8 7.4c29.9 0 55.1-20.5 62.1-48.3zM256 224l0 0 0 0h0zM112 432H400l41.4 41.4c4.2 4.2 6.6 10 6.6 16c0 12.5-10.1 22.6-22.6 22.6H86.6C74.1 512 64 501.9 64 489.4c0-6 2.4-11.8 6.6-16L112 432z"/></svg> </div>';
const rook =
  '<div class="piece" id="rook"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M32 192V48c0-8.8 7.2-16 16-16h64c8.8 0 16 7.2 16 16V88c0 4.4 3.6 8 8 8h32c4.4 0 8-3.6 8-8V48c0-8.8 7.2-16 16-16h64c8.8 0 16 7.2 16 16V88c0 4.4 3.6 8 8 8h32c4.4 0 8-3.6 8-8V48c0-8.8 7.2-16 16-16h64c8.8 0 16 7.2 16 16V192c0 10.1-4.7 19.6-12.8 25.6L352 256l16 144H80L96 256 44.8 217.6C36.7 211.6 32 202.1 32 192zm176 96h32c8.8 0 16-7.2 16-16V224c0-17.7-14.3-32-32-32s-32 14.3-32 32v48c0 8.8 7.2 16 16 16zM22.6 473.4L64 432H384l41.4 41.4c4.2 4.2 6.6 10 6.6 16c0 12.5-10.1 22.6-22.6 22.6H38.6C26.1 512 16 501.9 16 489.4c0-6 2.4-11.8 6.6-16z"/></svg> </div>';
const bishop =
  '<div class="piece" id="bishop"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M128 0C110.3 0 96 14.3 96 32c0 16.1 11.9 29.4 27.4 31.7C78.4 106.8 8 190 8 288c0 47.4 30.8 72.3 56 84.7V400H256V372.7c25.2-12.5 56-37.4 56-84.7c0-37.3-10.2-72.4-25.3-104.1l-99.4 99.4c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6L270.8 154.6c-23.2-38.1-51.8-69.5-74.2-90.9C212.1 61.4 224 48.1 224 32c0-17.7-14.3-32-32-32H128zM48 432L6.6 473.4c-4.2 4.2-6.6 10-6.6 16C0 501.9 10.1 512 22.6 512H297.4c12.5 0 22.6-10.1 22.6-22.6c0-6-2.4-11.8-6.6-16L272 432H48z"/></svg> </div>';
const pawn =
  '<div class="piece" id="pawn">  <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M215.5 224c29.2-18.4 48.5-50.9 48.5-88c0-57.4-46.6-104-104-104S56 78.6 56 136c0 37.1 19.4 69.6 48.5 88H96c-17.7 0-32 14.3-32 32c0 16.5 12.5 30 28.5 31.8L80 400H240L227.5 287.8c16-1.8 28.5-15.3 28.5-31.8c0-17.7-14.3-32-32-32h-8.5zM22.6 473.4c-4.2 4.2-6.6 10-6.6 16C16 501.9 26.1 512 38.6 512H281.4c12.5 0 22.6-10.1 22.6-22.6c0-6-2.4-11.8-6.6-16L256 432H64L22.6 473.4z"/></svg> </div>';
const knight =
  '<div class="piece" id="knight"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M96 48L82.7 61.3C70.7 73.3 64 89.5 64 106.5V238.9c0 10.7 5.3 20.7 14.2 26.6l10.6 7c14.3 9.6 32.7 10.7 48.1 3l3.2-1.6c2.6-1.3 5-2.8 7.3-4.5l49.4-37c6.6-5 15.7-5 22.3 0c10.2 7.7 9.9 23.1-.7 30.3L90.4 350C73.9 361.3 64 380 64 400H384l28.9-159c2.1-11.3 3.1-22.8 3.1-34.3V192C416 86 330 0 224 0H83.8C72.9 0 64 8.9 64 19.8c0 7.5 4.2 14.3 10.9 17.7L96 48zm24 68a20 20 0 1 1 40 0 20 20 0 1 1 -40 0zM22.6 473.4c-4.2 4.2-6.6 10-6.6 16C16 501.9 26.1 512 38.6 512H409.4c12.5 0 22.6-10.1 22.6-22.6c0-6-2.4-11.8-6.6-16L384 432H64L22.6 473.4z"/></svg> </div> ';

<!-- begin snippet: js hide: false console: true babel: false -->

#gameboard {
  width: 320px;
  height: 320px;
  background-color: black;
  display: flex;
  flex-wrap: wrap;
}

.square {
  height: 40px;
  width: 40px;
  position: relative;
}

.square svg {
  height: 30px;
  width: 30px;
  margin: 5px;
  position: relative;
  z-index: -9;
}

path {
  position: relative;
  z-index: -10;
}

.piece {
  position: relative;
  z-index: 9;
}

.beige {
  background-color: rgb(110, 110, 98);
}

.brown {
  background-color: rgb(169, 43, 43);
}

.black {
  fill: black;
}

.white {
  fill: white;
}

<div id="gameboard"></div>
<p>It is <span id="player"></span>'s go.</p>
<p id="info-display"></p>

I would like to implement a new feature to the website which tracks user activity and in case user is inactive it redirects them to the main page. There is an iframe on the page which shows some learning. This iframe tracks for how long user is learning (iframe is showing).

So there are two timers – one for user activity on that page, one for user activity in the iframe.

I heard that browser implement features to suspend tabs which should basically mean that it pauses JavaScript. This can cause problem in data relevance because if inactive-timeout is set to 15 minutes and learnng-started is set to date-now and browser suspends the tab, JS stops. So inactive timeout will not trigger. Whenever user comes back to the tab it is showing wrong time.

Is there a way to prevent browser from suspending tabs (sleeping tabs) or some other possible solutions?

I tried searching for the internet for the specification of the sleeping tabs feature but with no success. I also tried some testing but also with no success.

I am trying to download the youtube video using Node.js and ytdl-core package. I followed the documentation of ytdl-core.

ytdl('http://www.youtube.com/watch?v=aqz-KE-bpKQ')
  .pipe(fs.createWriteStream('video.mp4'));

This works fine but if you want to download the video in high quality you must download download and audio files separately and merge them using ffmpeg. I am unable to download video only using custom function with “choosing a video format“.

I have an endpoint with /download that execute download() function in controller. This function executes two following functions, getVideoInfo() and downloadVideo().

getVideoInfo() should create getInfo.json and videoFormat.json files in /public directory.
downloadVideo() should download the video file in /public directory.

It creates the files successfully but it downloads the video file with 0 bytes.

const fs = require("fs")
const path = require("path")
const ytdl = require("ytdl-core")
const cmd = require("node-cmd")
const axios = require("axios")

async function download(req, res) {
  const url = "http://www.youtube.com/watch?v=aqz-KE-bpKQ"
  const videoPath = "public/video_only.mp4"

  try {
    const videoFormat = await getVideoInfo(url)
    await downloadVideo(url, videoFormat, videoPath)

    console.log('Video is downloaded.')
  } catch (error) {
    console.error("Error in download function:", error);
    res.status(500).send("Internal Server Error");
  }
}

async function getVideoInfo(url) {
  const info = await ytdl.getInfo(url)
  console.log("Title: " + info.videoDetails.title)

  // Save info to a JSON file
  fs.writeFileSync("public/getInfo.json", JSON.stringify(info, null, 2))

  const videoFormat = ytdl.chooseFormat(info.formats, { quality: "137" })

  // Save videoFormat to a JSON file
  fs.writeFileSync("public/videoFormat.json", JSON.stringify(videoFormat, null, 2))

  return videoFormat
}

async function downloadVideo(url, videoFormat, videoPath) {
  try {
      if (!videoFormat) {
        reject(new Error("No suitable format found."))
        return
      }

      ytdl(url, { format: videoFormat }).pipe(fs.createWriteStream(videoPath))
  } catch (error) {
    throw new Error("Error downloading video: " + error.message)
  }
}

module.exports = {
  download,
}

So i am trying to do something like this CV profile pic in React: https://youtu.be/VjiWpGR82t0?si=rU-pQCcjJlpzBteA. When i try to put and image it spin also but i want only the border to spin how to make it. And when it deform to show a little bit of the image like in the video. Now it is 1sec so it spin a lot faster but i will change it.
This is my App.js:

`function App() {
  return (
    <div className="circle rotating"><div className="circle2"></div></div>
  );
}

export default App;`

And this is my index.css:

body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8));
    color: #fff;
  }

  .circle{
    width: 200px;
    height: 200px;
    border-top-left-radius : 48%;
    border-top-right-radius : 48%;
    border-bottom-left-radius : 48%;
    border-bottom-right-radius : 48%;
    background: #27a9e1;
    position: absolute;
  }
  
  .circle2{
    width: 200px;
    height: 200px;
    border-top-left-radius : 50%;
    border-top-right-radius : 50%;
    border-bottom-left-radius : 50%;
    border-bottom-right-radius : 65%;
    background: #27a9e1;
    position: absolute;
  }
  
  @keyframes rotating {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotating {
    animation: rotating 1s linear infinite;
}
```

I am trying to get a RegExp which works in an online tool here to work in Javascript.

The working online RegExp can be found here: https://regex101.com/r/htldlR/2

The Javascript code that runs the same expression below fails

function isInterval(value) {
    const regex = new RegExp(/^(?!.*(second|minute|hour|day|week|month|year).*1)d+s+(?:second|minute|hour|day|week|month|year)s?(?: +d+s+(?:second|minute|hour|day|week|month|year)s?)*/, "gmi");

    console.log("MATCH "+value+" MATCH "+value.match(regex)+ " TEST "+regex.test(value))
    return regex.test(value);
}

const interval = "1 year 6 months 10 days 12 hours 30 minutes 30 seconds"

console.log(isInterval(interval));

The code is on jsfiddle here: https://jsfiddle.net/gp4orvj9/1/

I guess that the problem is something to do with escaping the expression.

I’ve built an Integration between my system to NetSutie using REST API.
Now I’m trying to fulfill an order that is currently pending fulfillment and I get the following error no matter what I try.

{
    "type": "https://www.rfc-editor.org/rfc/rfc9110.html#section-15.5.1",
    "title": "Bad Request",
    "status": 400,
    "o:errorDetails": [
        {
            "detail": "Error while accessing a resource. You must have at least one valid line item for this transaction.",
            "o:errorCode": "USER_ERROR"
        }
    ]
}

Now I double checked all the details inside the Paylaod I send.

{
    "subsidiary": {
        "id": "6"
    },
    "createdFrom": {
        "id": "10478564" //NetSuite Order Internal ID
    },
    "package": {
        "items": [
            {
                "packageTrackingNumber": "6546545646546", //Random Tracking Number
                "packageWeight": 1
            }
        ]
    },
    "shipStatus": {
        "id": "C",
        "refName": "Shipped"
    },
    "item": {
        "items": [
            {
                "orderLine": 1, //Order Line Item
                "quantity": 1,
                "location": {
                    "id": "1" //NetSuite Location ID
                }
            }
        ]
    }
}

Their documantation is so Bad.

I have tried that: https://.suitetalk.api.netsuite.com/services/rest/record/v1/salesOrder//!transform/itemFulfillment

Payload:

{
    "subsidiary": {
        "id": "6"
    },
    "createdFrom": {
        "id": "10478564" //NetSuite Order Internal ID
    },
    "package": {
        "items": [
            {
                "packageTrackingNumber": "6546545646546", //Random Tracking Number
                "packageWeight": 1
            }
        ]
    },
    "shipStatus": {
        "id": "C",
        "refName": "Shipped"
    },
    "item": {
        "items": [
            {
                "orderLine": 1, //Order Line Item
                "quantity": 1,
                "location": {
                    "id": "1" //NetSuite Location ID
                }
            }
        ]
    }
}

I use @okta/okta-auth-js in my React SPA (chrome extension). When u use some methods like authClient.token.getWithoutPrompt(…) i have a problem:

Uncaught (in promise) ReferenceError: process is not defined

I understand that this error occurs because the library wants to access the process but it is part of Nodejs. Is there any way to fix this error, or use something else to avoid the error?

I need get tokens but i cant get it because I have an error.

I have the following site and what I tried: link

I would like to do the following

-add two destinations: Barcelona and Madrid in the same line (table with 2 columns 1 row )

-when I click one of the destinations, the tours for that specific destination should be shown, if I click on the second destination, should close the first destinations tours and show the second clicked destination tours

for example: when I click the Tours for Barcelona should slide down and show the tours for Barcelona, when I click on Madrid, Barcelona tours should hide and show tours from Madrid

Thanks

I tried with elementor toggle,tried with clear:both, but it’s not working correctly and also overflows:

<div class="elementor-toggle" role="tablist">
  <div class="elementor-toggle-item">
    <div id="elementor-tab-title-2221" class="elementor-tab-title elementor-active" data-tab="1" role="tab" aria-controls="elementor-tab-content-2221" aria-expanded="true" tabindex="0" aria-selected="true">
      <span class="elementor-toggle-icon elementor-toggle-icon-left" aria-hidden="true">
        <span class="elementor-toggle-icon-closed">
          <i class="fas fa-caret-right"></i>
        </span>
        <span class="elementor-toggle-icon-opened">
          <i class="elementor-toggle-icon-opened fas fa-caret-up"></i>
        </span>
      </span>
      <div class="ova-toggle-title">
        <span class="ova-icon">
          <i class=""></i>
        </span>
        <a href="" class="elementor-toggle-title"> Barcelona </a>
      </div>
    </div>
    <div id="elementor-tab-content-2221" class="elementor-tab-content elementor-clearfix elementor-active" data-tab="1" role="tabpanel" aria-labelledby="elementor-tab-title-2221" style="display: block;">
      <div id="barcelona_es" class="elementor-section elementor-inner-section elementor-element elementor-element-41a56a8 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="41a56a8" data-element_type="section">
        <div class="elementor-container elementor-column-gap-default">
          <div class="elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-bd273d1" data-id="bd273d1" data-element_type="column">
            <div class="elementor-widget-wrap elementor-element-populated">
              <div class="elementor-element elementor-element-5cc5be6 elementor-widget elementor-widget-heading" data-id="5cc5be6" data-element_type="widget" data-widget_type="heading.default">
                <div class="elementor-widget-container">
                  <h2 class="elementor-heading-title elementor-size-default">Barcelona</h2>
                </div>
              </div>
              <div class="elementor-element elementor-element-58e5197 elementor-widget elementor-widget-ova_destination" data-id="58e5197" data-element_type="widget" data-widget_type="ova_destination.default">
                <div class="elementor-widget-container">
                  <div class="ova-destination">
                    <div class="content content-template3 content-destination" style="position: relative; height: 478.617px;">
                      <div class="grid-sizer"></div>
                      <div class="item-destination item-destination-template3 item-destination-1" style="position: absolute; left: 0%; top: 0px;">
                        <div class="item-wrapper">
                          <!-- Image -->
                          <div class="img">
                            <img decoding="async" class="destination-img" src="https://artistatours.com/wp-content/uploads/2022/07/pexels-enrico-perini-819764-636x636.jpeg" alt="El Tour Más Completo de Barcelona">
                            <div class="mask"></div>
                            <div class="count-tour">
                              <span class="number"> 0 </span> Tours
                            </div>
                          </div>
                          <!-- Info -->
                          <div class="info">
                            <h3 class="name">El Tour Más Completo de Barcelona</h3>
                            <div class="rating">
                              <i class="fas fa-star" aria-hidden="true"></i> 0 Reviews
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="item-destination item-destination-template3 item-destination-2" style="position: absolute; left: 33.3293%; top: 0px;">
                        <div class="item-wrapper">
                          <!-- Image -->
                          <div class="img">
                            <img decoding="async" class="destination-img" src="https://artistatours.com/wp-content/uploads/2022/07/pexels-tom-darby-6516369-636x636.jpeg" alt="Free Tour El Genio de Gaudí y el Modernismo">
                            <div class="mask"></div>
                            <div class="count-tour">
                              <span class="number"> 0 </span> Tours
                            </div>
                          </div>
                          <!-- Info -->
                          <div class="info">
                            <h3 class="name">Free Tour El Genio de Gaudí y el Modernismo</h3>
                            <div class="rating">
                              <i class="fas fa-star" aria-hidden="true"></i> 0 Reviews
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="item-destination item-destination-template3 item-destination-3" style="position: absolute; left: 66.6586%; top: 0px;">
                        <div class="item-wrapper">
                          <!-- Image -->
                          <div class="img">
                            <img decoding="async" class="destination-img" src="https://artistatours.com/wp-content/uploads/2024/01/image00001-636x636.jpeg" alt="Street Art Tour Barcelona">
                            <div class="mask"></div>
                            <div class="count-tour">
                              <span class="number"> 0 </span> Tours
                            </div>
                          </div>
                          <!-- Info -->
                          <div class="info">
                            <h3 class="name">Street Art Tour Barcelona</h3>
                            <div class="rating">
                              <i class="fas fa-star" aria-hidden="true"></i> 0 Reviews
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span style="clear: both;"></span>
    </div>
  </div>
  <div class="elementor-toggle-item">
    <div id="elementor-tab-title-2222" class="elementor-tab-title" data-tab="2" role="tab" aria-controls="elementor-tab-content-2222" aria-expanded="false" tabindex="-1" aria-selected="false">
      <span class="elementor-toggle-icon elementor-toggle-icon-left" aria-hidden="true">
        <span class="elementor-toggle-icon-closed">
          <i class="fas fa-caret-right"></i>
        </span>
        <span class="elementor-toggle-icon-opened">
          <i class="elementor-toggle-icon-opened fas fa-caret-up"></i>
        </span>
      </span>
      <div class="ova-toggle-title">
        <span class="ova-icon">
          <i class=""></i>
        </span>
        <a href="" class="elementor-toggle-title"> Madrid </a>
      </div>
    </div>
    <div id="elementor-tab-content-2222" class="elementor-tab-content elementor-clearfix" data-tab="2" role="tabpanel" aria-labelledby="elementor-tab-title-2222" style="display: none;" hidden="hidden">
      <div id="madrid_es" class="elementor-section elementor-inner-section elementor-element elementor-element-d6b5c33 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="d6b5c33" data-element_type="section">
        <div class="elementor-container elementor-column-gap-default">
          <div class="elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-2742aab" data-id="2742aab" data-element_type="column">
            <div class="elementor-widget-wrap elementor-element-populated">
              <div class="elementor-element elementor-element-4e223a8 elementor-widget elementor-widget-heading" data-id="4e223a8" data-element_type="widget" data-widget_type="heading.default">
                <div class="elementor-widget-container">
                  <h2 class="elementor-heading-title elementor-size-default">Madrid</h2>
                </div>
              </div>
              <div class="elementor-element elementor-element-dddf990 elementor-widget elementor-widget-ova_destination" data-id="dddf990" data-element_type="widget" data-widget_type="ova_destination.default">
                <div class="elementor-widget-container">
                  <div class="ova-destination">
                    <div class="content content-template3 content-destination" style="position: relative; height: 0px;">
                      <div class="grid-sizer"></div>
                      <div class="item-destination item-destination-template3 item-destination-1" style="left: 0%; top: 0px; position: absolute;">
                        <div class="item-wrapper">
                          <!-- Image -->
                          <div class="img">
                            <img decoding="async" class="destination-img" src="https://artistatours.com/wp-content/uploads/2024/01/madrid-385104_1280-636x636.jpg" alt="¡Madrid al Completo!(Con actores)">
                          </div>
                          <!-- Info -->
                          <div class="info">
                            <h3 class="name">¡Madrid al Completo!(Con actores)</h3>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span style="clear: both;"></span>
    </div>
  </div>
</div>

I am using next.js for my frontend and express app for backend restapi. I have a problem with put/post requests. When i try to make them on machines other thane the one with node and next server turned on they throw “Same origin policy error”. Get request works fine. I’ve already set app.use(cors) in server file.
server.js

const cors = require("cors");

let app = express();

const corsOptions = {
  origin: 'example.com',
  credentials: true,
}

app.use(cors(corsOptions));

api request

const res = await fetch(
        `http://localhost:5000/api/put}`,
        {
          method: "PUT",
          headers: {
            "Content-type": "application/x-www-form-urlencoded;charset=UTF-8",
          },
          credentials: 'include',
          body: formBody,
        }
      );
      if (!res.ok) {
        throw new Error("Failed to update ticket");
      }

I am trying to sort arrays in MongoDB shell.

This seems to be the only syntax available to use.

db.products.updateOne({"name": "ben"}, {$push: {"hobbies": {$each: [], $sort: -1}}})

My question is that, is there no other way to do this – in MongoDB, do I have to use th $push operator – as I am not doing a push operation.

When sending an Ajax-post request it yields 400 Bad Request because of the ACF-formatting, I guess. See code example below. There is no problem when updating an ACF text-field or other simple type.

The ACF field-names are all correct.

How should the acf-repeater formatting look like?

updateModel(e) {
    var thisModel = $(e.target).closest("li");
    var ourUpdatedPost = {
      title: "test",
      acf: {
        // repeater acf field name
        model_price_size_and_image: [
          {
            // subfield-names + value
            model_repeater_code: "123",
            model_repeater_price: "400",
            model_repeater_image: "1212",
          },
          {
            model_repeater_code: "321",
            model_repeater_price: "600",
            model_repeater_image: "1213",
          },
        ],
      },
    };
    $.ajax({
      beforeSend: (xhr) => {
        xhr.setRequestHeader("X-WP-Nonce", myData.nonce);
      },
      url:
        myData.root_url +
        "/wp-json/wp/v2/model/" +
        thisModel.data("id"),
      type: "POST",
      data: ourUpdatedPost,
      error: (response) => {
        console.log("Sorry");
        console.log(response);
      },
      success: (response) => {
        this.makeModelReadOnly(thisModel);
        console.log("Congrats update");
        console.log(response);
      },
    });
  }
}

I am currently working on automating tests for a web application, and I’ve encountered an issue with clipboard pasting using Selenium WebDriver. The scenario involves a copy button that, when clicked, copies text to the clipboard.And what I need is to check if the copied text is correct and I don’t want to use the external modules for the same. I’ve implemented a solution that works well on Windows Chrome and MacOS Chrome, but I’m facing difficulties with MacOS Safari.

I’ve implemented a JavaScript-based solution to retrieve copied text from the clipboard. The code, outlined in the original post, successfully works on Windows Chrome and Mac Chrome. However, when tested on Mac Safari, the clipboard pasting does not function as intended. I suspect that there might be browser-specific nuances or differences in implementation between Chrome and Safari.

def retrieve_copied_text(self):
    """ 
    Retrieve the copied text from the clipboard using JavaScript.
    """
    script = """
    var textarea = document.createElement('div');
    textarea.contentEditable = true;
    textarea.id = 'myTextarea';  
    document.body.appendChild(textarea);
    textarea.focus();
    return textarea;
    """
    textarea = self.driver.execute_script(script)
    target_element = self.driver.find_element(By.ID, 'myTextarea')
    actions = webdriver.ActionChains(self.driver)
    cmd_ctrl = Keys.COMMAND if platform.system().lower() == 'darwin' else Keys.CONTROL
    actions.move_to_element(target_element).click(target_element).key_down(cmd_ctrl).key_down("v").key_up("v").key_up(cmd_ctrl).perform()
    pasted_content = target_element.text
    self.driver.execute_script("arguments[0].remove();", textarea)
    return pasted_content

Has anyone faced a similar problem with clipboard pasting in Safari on Mac using Selenium WebDriver? If so, could you please provide insights or a solution to make this work consistently across different browsers and operating systems? I would appreciate any help or suggestions.