Category: javascript

I have a hierarchy of HTML elements as follows:

  <div id="outer-container" class="container">
    This text is in the outer container.
    <div id="inner-container" class="container">
      This text is in the inner container.
      <div id="inner-button1-container" class="container">
        This is inner button 1 container.
        <button id="inner-button1" class="button">Inner Button 1</button>
      </div>
      <div id="inner-button2-container" class="container">
        This is inner button 2 container.
        <button id="inner-button2" class="button">Inner Button 2</button>
      </div>
      This text is just before the inner container is ending.
    </div>
    This text is again in the outer container.
  </div>

I want that when a left mouse click happen in an element in this hierarchy, the background colour of only that specific element should get changed. I want to use a different background colour for each of these elements. I have multiple CSS classes to change the background colour as follows:

.dark-green-background {
  background-color: #006614;
}

.light-green-background {
  background-color: #00941e;
}

.dark-blue-background {
  background-color: #1a1ac1;
}

.light-blue-background {
  background-color: #5757ff;
}

.dark-red-background {
  background-color: #9b0303;
}

.light-red-background {
  background-color: #db2424;
}

.dark-yellow-background {
  background-color: #5e5e17;
}

.light-yellow-background {
  background-color: #939325;
}

.dark-orange-background {
  background-color: #ae7d24;
}

.light-orange-background {
  background-color: #eaaa34;
}

.dark-purple-background {
  background-color: #4d0f4d;
}

.light-purple-background {
  background-color: #9c219c;
}

.white-font {
  color: white;
}

.black-font {
  color: black;
}

I am trying to add these css classes dynamically to these HTML elements using JavaScript event handling. Below is my JavaScript code.

const outerContainer = document.getElementById("outer-container");
const innerContainer = document.getElementById("inner-container");
const innerButton1Container = document.getElementById("inner-button-1-container");
const innerButton1 = document.getElementById("inner-button1");
const innerButton2Container = document.getElementById("inner-button2-container");
const innerButton2 = document.getElementById("inner-button2");
const resultBoxResult = document.getElementById("result");

const mouseDownHandler = (targetElementId, classToAdd) => {
  resultBoxResult.innerText = `Left Press Down happened in ${targetElementId}.`;
  document.getElementById(targetElementId).classList.add(classToAdd);
  document.getElementById(targetElementId).classList.add(classToAdd, "white-font");
}

outerContainer.addEventListener('mousedown', (event) => {
  let classToAdd = "dark-green-background";
  mouseDownHandler(event.target.id, classToAdd);
  event.stopPropagation();
}, false);

innerContainer.addEventListener('mousedown', (event) => {
  let classToAdd = "dark-red-background";
  mouseDownHandler(event.target.id, classToAdd);
  event.stopPropagation();
}, false);

When I am executing this code and performing a Left Mouse click on the element with id “outer-container”, the dark-green background colour is getting implemented to not only this element with id “outer-container”, but also to its child elements. Similarly if I left-click on element with id “inner-container”, its red-background colour is getting implemented to it as well as to its children elements. Whereas I want that the background colour should get applied only to the element which received the left-click event, neither to any of its children nor to any of its parents.

I have tried using event.stopPropagation to stop bubbling / capturing events. But the problem still persists. Please suggest what am I doing wrong here and how can I achieve what I am intending to?

my python function is invoked from the async fetch function like below:

 const [response,
        dailyTradeResponse,
        getRSIGaugeChartResponse ] = await Promise.all([
            fetch("/callback/getStock?data=" + Stock + "&period=" + Period + "&interval=" + Interval + "&chartselected=" + Chartselected),
            fetch("/callback/getDailyTradeInfo?data=" + Stock + "&period=" + Period + "&interval=" + Interval ),
            fetch("/callback/getRSIGaugeChart?data=" + Stock),
            fetch("/callback/getCompanyBalanceSheet?data=" + Stock)
 ]);

the python function /callback/getRSIGaugeChart needs to return 2 objects: one is a RSIGaugeChart another one is PandaDataFrame, “df_BUY_Opportunity”. Code like below:

        print(df.to_string())
        df_BUY = df.loc[df['Signle'] == 'BUY']
        df_BUY_Opportunity = df_BUY.drop(['Close', 'Volume'], axis=1)

        def update_chart(trace, points, selector):
            index = points.point_inds[0]
            trace.value = df['RSI'][index]
            fig.layout.annotations[0].text = df['Status'][index]

        fig.update_geos(projection_type="natural earth")
        rsiGaugeChartJson = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)

        return (rsiGaugeChartJson, df_BUY_Opportunity)

My question is:
how do i send two objects back to response of the async fetch function fetch(“/callback/getRSIGaugeChart?data=” + Stock)

Can any Python guru give me some advice? giving me an example is much appreciated.

I have a div which I want to increase the height of that only from bottom side by keeping the top fixed. It means I want to be increase the height only from bottom (top should not be moving…it should be fixed). When I am changing the height of the div it will be increasing from both side(I want to increase only from bottom).
Can anyone help?

function myVisit() {
  var x = document.getElementById("add_site_type_vcls");
  var i = x.selectedIndex;
  var popOver = document.querySelector('.popup__overlay');
  if (i == 1) {
    document.querySelector(".surf__by").style.display = 'flex';
    document.querySelector('.inp__single').style.display = 'block';
    // document.querySelector(".surf__by").style.opacity = '1';
    document.querySelector(".par__adv").style.display = 'none';
    document.querySelector(".any__clk").style.display = 'none';
    document.querySelector(".sea__eng").style.display = 'none';
    document.querySelector(".url__btn").style.display = 'block';
    document.getElementById("exe_1").style.display = 'none';
    document.getElementById("exe_0").style.display = 'block';
    document.getElementById("exe_2").style.display = 'none';
    document.getElementById("exe_3").style.display = 'none';
    document.getElementById('textlist').style.display = 'none';
    document.querySelector('.uparrow').style.display = 'none';
    // popOver.style.height = '630px';
    // popOver.style.top = fixed;
    // console.log(newHeight);
    increaseHeightFromBottom(300);
  } else if (i == 2) {
    document.querySelector(".surf__by").style.display = 'none';
    document.querySelector('.inp__single').style.display = 'block';
    document.querySelector(".par__adv").style.display = 'flex';
    // document.querySelector(".par__adv").style.opacity = '1';
    document.querySelector(".any__clk").style.display = 'none';
    document.querySelector(".sea__eng").style.display = 'none';
    document.querySelector(".url__btn").style.display = 'block';
    document.getElementById("exe_1").style.display = 'none';
    document.getElementById("exe_0").style.display = 'block';
    document.getElementById("exe_2").style.display = 'none';
    document.getElementById("exe_3").style.display = 'none';
    document.getElementById('textlist').style.display = 'none';
    document.querySelector('.uparrow').style.display = 'none';
    // popOver.style.height = '740px';
    // popOver.style.top = fixed;
    increaseHeightFromBottom(400);
  } else if (i == 3) {
    document.querySelector(".surf__by").style.display = 'none';
    document.querySelector('.inp__single').style.display = 'block';
    document.querySelector(".par__adv").style.display = 'none';
    document.querySelector(".any__clk").style.display = 'flex';
    // document.querySelector(".any__clk").style.opacity = '1';
    document.querySelector(".sea__eng").style.display = 'none';
    document.querySelector(".url__btn").style.display = 'block';
    document.getElementById("exe_1").style.display = 'none';
    document.getElementById("exe_0").style.display = 'block';
    document.getElementById("exe_2").style.display = 'none';
    document.getElementById("exe_3").style.display = 'none';
    document.getElementById('textlist').style.display = 'none';
    document.querySelector('.uparrow').style.display = 'none';
    // popOver.style.height = '1325px';
    // popOver.style.top = fixed;
    increaseHeightFromBottom(500);
  }
}

.container__main .contents .popup__overlay {
  width: 1100px;
  /* max-height: 95%; */
  min-height: 100%;
  max-width: 95%;
  background: rgb(190, 186, 186);
  position: absolute;
  top: -250%;
  left: 40%;
  transform: translate(-40%, -50%);
  border-radius: 11px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  /* z-index: 1002; */
  /* display: none; */
  transition: top 0.6s;
}

<div class="popup__overlay">
  <select class="form-select" name="type" id="add_site_type_vcls" onchange="myVisit()">
    <option value="paid" data-tk="paid">
      Visiting of 1 website page 2nd
    </option>
    <option value="paid_inner" data-tk="paid">
      Surfing by internal pages
    </option>
    <option value="paid_adv" data-tk="paid">
      Clicks on advertising on the website
    </option>
  </select>

  <div class="last__cat" id="lc_in_vis">
    <div>
      <label for="language" class="title" id="exe_0">Visits:</label>
      <label for="language" class="title" id="exe_1">Execution:</label>
      <label for="language" class="title" id="exe_2">Bookmarks:</label>
      <label for="language" class="title" id="exe_3">Actions:</label>
      <input class="form-control" type="text" placeholder="0">
    </div>
    <div class="pd__visit">
      <label for="language" class="title">YE</label>
      <select name="language" id="" class="form-control">
        <option value="day">Per day</option>
        <option value="week">Per week</option>
        <option value="month">Per month</option>
      </select>
    </div>
    <div class="dstr__visit">
      <label for="language" class="title">Distribute:</label>
      <select class="form-control">
        <option value="nat">Naturally</option>
        <option value="even">Evenly</option>
        <option value="odd">Only 8 to 19</option>
      </select>
    </div>
    <div class="vra__pac">
      <label for="language" class="title">Variations(+/-):</label>
      <div class="var__visit">
        <input class="form-control" type="number" placeholder="0">
        <select class="form-control">
          <option value="day">Percent</option>
          <option value="week">Visit</option>
        </select>
      </div>
    </div>
  </div>
</div>

manifest.js

{
    "manifest_version": 3,
    "version": "1.0",
    "name": "Gramotey",
    "content_scripts":[
        {
         "matches":["<all_urls>"],
         "js":["main.js"]
        }
    ],
    "background":
    {
    "service_worker": "background.js"
    },
    "commands": {
        "search_with_gramota": {
          "suggested_key": {
            "default": "Alt+Shift+5",
            "mac": "Command+Shift+5"
          },
          "description": "Общий поиск на грамоте"
        }
      },
      "permissions": ["scripting", "activeTab", "tabs"],
      "host_permissions": ["<all_urls>"]
}

background.js

chrome.commands.onCommand.addListener((command) =>
{
    if (command == "search_with_gramota")
    {
        chrome.tabs.query({ currentWindow: true, active: true }, function (tab) {
            chrome.scripting.executeScript(
                {
                target: {tabId: tab[0].id},
                function: () => {
                    function makeUrl(){
                    var sUrl = "https://gramota.ru/poisk?query="
                    var selected = getSelection().toString()
                    sUrl =  sUrl + selected
                    return sUrl
                    }
                        chrome.tabs.create({url: makeUrl()});
                },

            });   
        });
    };
});

Any time I try to execute the shortcut only the following message appears in the console
enter image description here

I expect this script to open a new tab with url including currently selected text.

I am trying to get OneSiginal Player ID using the following JavaScript code, unfortunately, I am getting the following error.

Here is the code I am using to get the player ID.

<script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
<script>
  //window.OneSignalDeferred = window.OneSignalDeferred || [];
  OneSignal.push(function(OneSignal) {
    OneSignal.init({
      appId: "MY PLAYER ID",
    });

  OneSignal.getIds(function(ids) {
    console.log("OneSignal User ID:", ids.userId);
  });
});
</script>

Output:

Uncaught TypeError: OneSignal.getIds is not a function

Since my Magento has many selection fields like 20 for some attributes like color, I only want to display 7 and have the rest expand using an expand button.

Is there this function in Magento or an extension that can do this task?

It should look something like this picture here.

Would you like to have a button like this, or does this function not exist? Does it have to be done with Java Script? If so, where and how?

Google refresh my page after each use of my functions. After conducting debugging tests, I’ve observed that Google adds an invisible script to my index.html file.

I’m currently facing difficulties in understanding why this is happening and how to resolve it.
Because I don’t have to refresh my page, everything has to be dynamic.

This is what causes the refresh :
socket.onmessage = function (msg) { if (msg.data == 'reload') window.location.reload(); else if (msg.data == 'refreshcss') refreshCSS(); };

I set event.preventDefault() but it doesn’t do anything. I always get refreshes at the end of the execution of my functions.Here’s one of my functions, which allows me to delete an image :

 function deletePhoto(photoId) {
    const authToken = localStorage.getItem('userToken')

    if (!authToken) {
      console.error("Token d'authentification manquant")
      alert('Vous devez être connecté pour effectuer cette action.')
      return Promise.reject(new Error("Token d'authentification manquant"))
    }

    const headers = new Headers({
      Authorization: `Bearer ${authToken}`,
      'Content-Type': 'application/json',
    })

    return fetch(`http://localhost:5678/api/works/${photoId}`, {
      method: 'DELETE',
      headers: headers,
    })
      .then((response) => {
        if (response.ok) {
          // Si la suppression est réussie, retourner une promesse résolue
          console.log(`Photo avec l'ID ${photoId} supprimée avec succès.`)
          return Promise.resolve()
        } else if (response.status === 401) {
          console.error('Non autorisé à supprimer la photo')
          alert("Vous n'êtes pas autorisé à effectuer cette action.")
          return Promise.reject(new Error('Non autorisé à supprimer la photo'))
        } else {
          return response.json().then((data) => {
            throw new Error(data.message)
          })
        }
      })
      .catch((error) => {
        console.error('Erreur lors de la suppression de la photo:', error)
        alert('Erreur lors de la suppression de la photo : ' + error.message)
        return Promise.reject(error)
      })
  }

<script>
    // <![CDATA[  <-- For SVG support
    if ('WebSocket' in window) {
        (function () {
            function refreshCSS() {
                var sheets = [].slice.call(document.getElementsByTagName("link"));
                var head = document.getElementsByTagName("head")[0];
                for (var i = 0; i < sheets.length; ++i) {
                    var elem = sheets[i];
                    var parent = elem.parentElement || head;
                    parent.removeChild(elem);
                    var rel = elem.rel;
                    if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
                        var url = elem.href.replace(/(&|?)_cacheOverride=d+/, '');
                        elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
                    }
                    parent.appendChild(elem);
                }
            }
            var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
            var address = protocol + window.location.host + window.location.pathname + '/ws';
            var socket = new WebSocket(address);
            socket.onmessage = function (msg) {
                if (msg.data == 'reload') window.location.reload();
                else if (msg.data == 'refreshcss') refreshCSS();
            };
            if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
                console.log('Live reload enabled.');
                sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
            }
        })();
    }
    else {
        console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
    }
    // ]]>
</script>

I want to get the file/image uploaded in the input. I am getting the file/image in the handleFileChange function, but not able to get it in the onSubmit function. My goal is to get the file/image when Save button is clicked on the frontend, and the file/image is sent to the node.js backend where it will store it to mongoDB.
GitHub link: https://github.com/prateekkumaroriginal/course-selling-app-react-express

import React, { useState } from 'react'
import { useForm } from 'react-hook-form'

const UploadImage = ({ course }) => {
    const [image, setImage] = useState(course.imageLink)
    const form = useForm();

    const { handleSubmit, reset, setValue } = form;
    const { isValid, isSubmitting } = form.formState;

    const onSubmit = () => {
        console.log("Hello");
        const file = form.getValues('imageLink');
        console.log(file);
    }

    const handleFileChange = (e) => {
        try {
            const file = e.target.files[0];
            console.log(file);
            setValue('imageLink', file)
            setImage(URL.createObjectURL(file));
        } catch (error) {
            console.log(error);
        }
    };

    return (
        <div className='p-10'>
            <form onSubmit={handleSubmit(onSubmit)}>
                <input
                    className='p-1 shadow-lg appearance-none rounded w-full'
                    disabled={isSubmitting}
                    {...form.register('imageLink')}
                    type="file"
                    onChange={handleFileChange}
                    id="image"
                />
                <button
                    type='submit'
                    disabled={isSubmitting}
                    className='px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-md'>
                    Save
                </button>
            </form>
            <img src={image} alt="h2" />
        </div>
    )
}

export default UploadImage

fs.readFile(‘./db.json’, function(err, data) {
let json = JSON.parse(data);

                for (const i of json) {
                    if(i.filter == undefined) {
                        return;
                    } else {
                        exec('python', ['main.py', ${i.filter}, ${i.channel}, ${i.price}, ]);
                        console.log('started')
                    }
                }
            })

setInterval(() => {
searchDb();
}, 1000)`

I have a django app of musical show tickets that a QR code is generated and saved on the database after every sale of a ticket. Now I’m trying to create a page that will read these QR codes to verify if it exists on the database.

HTML:

<h1>QR code reader</h1>
<video name="qr-video" id="qr-video" width="100%" height="100%" autoplay></video>

<script>
    const video = document.getElementById('qr-video');

    navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
        .then((stream) => {
            video.srcObject = stream;
            return new Promise((resolve) => {
                video.onloadedmetadata = () => {
                    resolve();
                };
            });
        })
        .then(() => {
            video.play();
            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            setInterval(() => {
                context.drawImage(video, 0, 0, canvas.width, canvas.height);
                const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
                const code = jsQR(imageData.data, imageData.width, imageData.height);
                if (code) {
                    alert('QR code read: ' + code.data);
                    sendQRcode(code.data);
                }
            }, 1000);
        })
        .catch((error) => {
            console.error('Error trying to access camera: ', error);
        });

    function sendQRcode(code) {
        alert('QR code sent')
        const url = 'https://ac7-1bd37c9a12e8.herokuapp.com/show/scanner/';
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCookie('csrftoken')
            },
            body: JSON.stringify({ code: code}),
        })
        .then((response) => {
            response.text().then((text) => {
                alert('Response from server:', text);
            });
            if (!response.ok) {
                throw new Error('Network response was not ok');
                alert('Response not ok')
            }
            return response.json();
        })

        .then((data) => {
            alert('Response from server: ' + data.message);
        })
        .catch((error) => {
            alert('Error on the AJAX request:', error);
        });
    }

    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
</script>

Views.py

@csrf_exempt
def scanner(request):
    if request.method == 'POST':
        data = json.loads(request.body.decode('utf-8'))
        qr_code_data = data.get('code')

        if qr_code_data:
            try:
                payment = UserPayment.objects.get(stripe_checkout_id=qr_code_data)
                message = 'Valid QR code!'
            except UserPayment.DoesNotExist:
                message = 'Invalid QR code!'
        else:
            message = 'QR code data don't exist.'

        return JsonResponse({'message': message})
    else:
        return render(request, 'scanner.html')

models.py:

class UserPayment(models.Model):
    app_user = models.ForeignKey(User, on_delete=models.CASCADE)
    payment_bool = models.BooleanField(default=False)
    stripe_checkout_id = models.CharField(max_length=500)
    qr_code = models.ImageField(upload_to='qr_codes', null=True, blank=True)

When I read the QR code on the phone, It shows an alert saying: “QR code read”, “QR code sent”, “Error on the AJAX request” e “Response from server: ” (without the response from server)

Here is the HTML and JS I am working with:

<!DOCTYPE html>
<html class="scroll-smooth scrollpadding">
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>my name</title>
  <link rel="stylesheet" href="styles.css">

</head>

<body>
  <nav class="hidden md:block sticky top-0">
        <div id="primary-navigation" class="flex max-h-20 min-w-screen bg-gray-50/[0.85] shadow text-center"> <!-- ====== Opacity not working!Why? -->
           <a href="#start" class="flex">
             <img class="h-16 m-3" src="./img/logo/benno-logo01d-klein.png" alt="">
            <span class="m-auto text-black-90">MY NAME</span>
           </a>
        <div class="flex-grow"></div>
        <ul class="flex">
            <li>
              <a href="#betriebe" class="flex h-full items-center justify-center md:w-auto md:p-4 lg:w-48 xl:w-64 hover:bg-red-300 m-auto md:text-xl text-black-90 lg:text-2xl">Betriebe</a>
            </li>
            <li>
              <a href="#schulen" class="flex h-full items-center justify-center md:w-auto md:p-4 lg:w-48 xl:w-64 hover:bg-blue-300 m-auto md:text-xl text-black-90 lg:text-2xl">Schulen</a>
            </li>
            <li>
              <a href="#einzelpersonen" class="flex h-full items-center justify-center md:w-auto md:p-4 lg:w-48 xl:w-64 hover:bg-yellow-300 m-auto md:text-xl text-black-90 lg:text-2xl">Einzel&shypersonen</a>
            </li>
            <li>
              <a href="#kontakt" class="flex h-full items-center justify-center md:w-auto md:p-4 lg:w-48 xl:w-64 hover:bg-gray-300 m-auto md:text-xl text-black-90 lg:text-2xl">Kontakt</a>
            </li>
       </ul>
        </div>
    </nav>

    <main>
      <div class="p-4 xl:w-[1200px] mr-auto ml-auto">
    <section id="schulen">
      <div class="">
            <h1>Soziales Lernen & Per&shysönlich&shykeits&shyent&shywicklung</h1>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
      </div>
    </section>
    <section id="betriebe">
      <div>
        <h1>Training & Seminare</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
      </div>
    </section>
    <section id="uebermich">
      <div>
        <h1>Über mich</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
      </div>
    </section>
    <section id="einzelpersonen">
      <div class="">
        <h1>Für Einzel&shypersonen</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
      </div>
    </section>
    <section id="kontakt">
      <div>
          <h1>Kontakt</h1>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor lsit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </p>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </p>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </p>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </p>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </p>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </p>
      </div>
    </section>
    </div>
  </main>
<script type="module" src="navbar.js"></script>
</body>
</html>

navbar.js:

let mainNavLinks = document.querySelectorAll("nav ul li a");
let mainSections = document.querySelectorAll("main section");
const navigationHeight = document.querySelector('#primary-navigation').offsetHeight


let lastId;
let cur = [];

window.addEventListener("scroll", event => {
  let fromTop = window.scrollY + navigationHeight + 10;

  mainNavLinks.forEach(link => {
    let section = document.querySelector(link.hash);

    if (
      section.offsetTop <= fromTop &&
      section.offsetTop + section.offsetHeight > fromTop
    ) {
      link.classList.add("bg-blue-300");
    } else {
      link.classList.remove("bg-blue-300");
    }
  });
});

The script above works fine, but I want to change the background color of the list element to the color of the hover:bg-* (of this list item) if the section is the current one (the picked one within the forEach loop).

Tell the script something like this – but this does not work:

mainNavLinks.forEach(link => {
    let section = document.querySelector(link.hash);
    let bgColor = link.querySelector['class*="hover:bg-"];
…
      link.classList.add(bgColor);
    } else {
      link.classList.remove(bgColor);

I have a date in Javascript in this format 2023-10-27T11:35:13.727 .This date needs to be displayed in format 27.10.2023 13:35:13.

I tried like this :

``date = new Date('2023-10-27T11:35:13.727');
year = date.getFullYear();
month = date.getMonth()+1;
dt = date.getDate();

if (dt < 10) {
  dt = '0' + dt;
}
if (month < 10) {
  month = '0' + month;
}``

console.log(dt+’.’ + month + ‘.’+year);

But this is not working properly. I am also not able to get time in format like this 27.10.2023 13:35:13

I think my scripts aren’t working because of the warning I’m getting in my dev console:
The script from “http://localhost:3000/keyboard/kioskboard-aio-2.3.0.min.js” was loaded, although its MIME type (“text/html”) is not a valid MIME type for JavaScript.
These are my Filepaths:

I feel like i tried everything to fix this but I just can’t figure out why its not working.
Any tips would be helpful.

This is the code I want to execute:

import React, {useEffect, useState} from "react";
import './assets/style.css'
import myData from "./assets/slogans.json";
import { Helmet } from "react-helmet";
import KioskBoard from 'kioskboard';

const SloganEnterScreen = (props) => {
    const [slogan, updateSlogan] = useState("");

    const handleContinue = () => {
        props.onStart()
        props.updateSlogan(slogan)
    };

    const handleChange = (event) => {
        // Update the slogan state as the user types
        updateSlogan(event.target.value);
    };


return(
    <>
        <Helmet>
            <link rel="stylesheet" href="/src/assets/style.css" />
            <script type="text/javascript" src="/keyboard/kioskboard-aio-2.3.0.min.js"></script>
            <script type="text/javascript" src="/main.js"></script>
        </Helmet>
        <meta name="viewport" content="width=device-width" />
        <meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Bildgenerator</title>
        <link rel="stylesheet" href="../assets/style.css" />
        <div id="base">
            <button onClick={props.onExit} className="x-button" />
            <main>
                <div className="page">
                    <div className="title">
                        <strong>Eingabe</strong>
                    </div>
                    <div className="sub-title big-text">
                        Dein kreativer Slogan!
                        <br />
                        &nbsp;
                    </div>
                    <div className="content">
                        <div className="content-full">
                            <div style={{ height: "2em" }} />
                            <div className="row">
                                <input
                                    style={{ width: "85%" }}
                                    type="text"
                                    className="text-input js-kioskboard-input"
                                    data-kioskboard-type="all"
                                    data-kioskboard-placement="bottom"
                                    data-kioskboard-specialcharacters="true"
                                    placeholder="Tippe hier um etwas einzugeben"
                                    onChange={handleChange}
                                />
                                <button onClick={handleContinue} style={{ width: "15%" }}>Fertig</button>
                            </div>
                        </div>
                    </div>
                    <div className="progress">
                        <div />
                        <div />
                        <div />
                        <div className="current" />
                        <div />
                    </div>
                </div>
            </main>
        </div>
    </>

);
};
export default SloganEnterScreen;

I want to import the Kioskboard scripts to use them with my website.
I’m using Reactjs Server with npm start. Would be grateful for any help!

export default function ImageNext({ src, width, height }) {

    const [blurDataURL, setBlurDataURL] = useState('');

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch(src);

                if (!response.ok) {
                    throw new Error(`Failed to fetch image, status: ${response.status}`);
                }

                const buffer = await response.arrayBuffer();
                const { base64 } = await getPlaiceholder(Buffer.from(buffer));
                setBlurDataURL(base64);
            } catch (error) {
                console.error('Error fetching or processing data:', error);
            }
        };

        fetchData();
    }, [src]);

    return (
        <Image
            src={src}
            width={width}
            height={height}
            placeholder='blue'
            blurDataURL={blurDataURL}
        />
    )
}

Hi everyone, I have this code to show images in nextjs. I implemented blurDataURL via this code inside the useEffect. However, I don’t understand why it keeps giving me the error: can’t resolve “child_process”. I thought the problem was the function declared as async, so I changed to useEffect. Would anyone be able to help me?

Dears,
I am new in Flask and I got an issue with sending ajax request as data was sent from Ajax and when I validated it I got ImmutableMultiDict([]) as validation error raised as the input field is empty. I need help to solve this issue.
regards.

here is my code :

@users.route('/updateUserPassword',methods=['POST'])
@login_required
def updateUserPassword() :
    message=''
    status=''
    print(request.form)
    passwordform = changeUserPassword(request.form)
    if passwordform.validate_on_submit() :
        id        = request.form.get('id')
        action    = request.form.get('action')
        password  = request.form.get('password')
        pass_confirm  = request.form.get('pass_confirm')
 
         
    else:   
       # return jsonify({'status':'error',
              #   message:[{passwordform[field].label.text: ', '.join(errors)} for field, errors in passwordform.errors.items()]})
        errors = {}
        for field, field_errors in passwordform.errors.items():
            errors[field] = [str(error) for error in field_errors]
        return jsonify({'error': "error submit data ", 'message': errors})

my js code is :

$("#editUserForm").submit(function(){

var formData = $(this).serialize();
var allData  = formData + "&action=editPass";
$.ajax({
url: "{{ url_for('users.updateUserPassword') }} ",
  type:"POST",
  data: JSON.stringify(allData),
  contentType: 'application/json',

  beforeSend:function(){
  },
  statusCode: {
      404: function() {
          alert( "page not found" );
      },
  },
  success:function(valdata) {
  
      if(valdata['status'] == "success")
      {
          $("#updatePasswordResult").html(valdata['message']);
          setTimeout(function(){$('#changepassword').modal('hide');}, 2000);
      }else{
        var errors = valdata['message'];
                          for (var field in errors) {
                              if (errors.hasOwnProperty(field)) {
                                  var errorMessages = errors[field];
                                  for (var i = 0; i < errorMessages.length; i++) {
                                      $('#updatePasswordResult').append('<p>' + field + ': ' + errorMessages[i] + '</p>');
                                  }
                              }
                            }

        //  $("#updatePasswordResult").html(valdata['message']);
      }
  }
});
return false;
});

validation code is :

class changeUserPassword(FlaskForm):

    password = PasswordField("Password",validators=[DataRequired()])                
    pass_confirm = PasswordField('Confirm Password',validators=[DataRequired(),EqualTo('password',message='Passwords must match!')])
   
    submit = SubmitField('Submit')