Category: javascript

WebSocket connection to ‘ws://localhost:3000/socket.io/?EIO=4&transport=websocket&sid=k1TmDCaN_RuvTzzVAAAC’ failed: Invalid frame header doOpen @ websocket.js:43 Show 1 more frame Show less

i am expecting why it is not connected two video call

I am creating a matching game and have a grid that has its opacity changed from 0 to 1 when the play button is clicked. I have it change through a keyframe animation and can’t figure out why the class is not being detected or altered when the button is clicked. Can someone skim through the code and see what I did wrong. I’ve read through this code 100 times and don’t see the issue. Also any suggestions or tips on previous code would be greatly appreciated, I am always down to learn something new. The snow works fine and could probably be made easier and shorter, however I don’t know how to add a second js file when inserting code. If you would like to see the snow.js file please leave a comment.

function runTitle(){
    const title = document.getElementById("header");
    title.style.animationPlayState = "running";
}

function runPlayBut(){
    const playBut = document.querySelector(".playButton");
    const grid = document.querySelector(".grid");
    playBut.style.animationPlayState = "paused, running";
    playBut.style.animationIterationCount = "unset";
    playBut.setAttribute("disabled")
    playBut.style.zIndex = "0";
    grid.style.animationPlayState = "running";
}

body {
    margin: 0;
    background: linear-gradient(white, skyblue);
    background-attachment: fixed;
}

#header {
    top: 80px;
    position: absolute;
    text-align: center;
    font-family: sans-serif;
    font-size: 100px;
    font-weight: 900;
    color: white;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0.8px;
    text-shadow: 0px 0px 10px black;
    width: 99.5vw;
    height: 5vh;
    z-index: 999;
    animation: exit 1.5s ease-in-out forwards;
    animation-play-state: paused;
}

@keyframes exit {
    0% {
        top: 80px;
    }
    20% {
        top: 110px;
    }
    100% {
        top: -200px;
    }
}

/*-----Snow-----*/

.snowfall {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.snow {
    background-color: snow;
    box-shadow: 0px 0px 10px snow;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    animation: fall 9s linear infinite;
    position: absolute;
    top: -40px;
    left: 10%;
    z-index: 1;
}

.snow:nth-child(1) {
    animation-duration: 6s;
    position: absolute;
    top: -40px;
    left: 20%;
    opacity: 0.2;
}

.snow:nth-child(2) {
    animation-duration: 8s;
    position: absolute;
    top: -40px;
    left: 30%;
    height: 15px;
    width: 15px;
}

.snow:nth-child(3) {
    animation-duration: 12s;
    position: absolute;
    top: -40px;
    left: 43%;
    height: 7px;
    width: 7px;
    opacity: 0.4;
}

.snow:nth-child(4) {
    animation-duration: 7s;
    position: absolute;
    top: -40px;
    left: 50%;
    height: 25px;
    width: 25px;
}

.snow:nth-child(5) {
    animation-duration: 7.5s;
    position: absolute;
    top: -40px;
    left: 38%;
    height: 40px;
    width: 40px;
}

.snow:nth-child(6) {
    animation-duration: 5.8s;
    position: absolute;
    top: -40px;
    left: 84%;
    height: 13px;
    width: 13px;
}

.snow:nth-child(7) {
    animation-duration: 10.4s;
    position: absolute;
    top: -40px;
    left: 70%;
    height: 4px;
    width: 4px;
}

.snow:nth-child(8) {
    animation-duration: 6.4s;
    position: absolute;
    top: -40px;
    left: 90%;
    height: 34px;
    width: 34px;
    opacity: 0.7;
}

.snow:nth-child(9) {
    animation-duration: 7.2s;
    position: absolute;
    top: -40px;
    left: 7%;
    height: 17px;
    width: 17px;
}

.snow:nth-child(10) {
    animation-duration: 8.8s;
    position: absolute;
    top: -40px;
    left: 24%;
}

.snow:nth-child(11) {
    animation-duration: 11.2s;
    position: absolute;
    top: -40px;
    left: 56%;
}

.snow:nth-child(12) {
    animation-duration: 7.9s;
    position: absolute;
    top: -40px;
    left: 89%;
    height: 34px;
    width: 34px;
    opacity: 0.4;
}

.snow:nth-child(13) {
    animation-duration: 9.7s;
    position: absolute;
    top: -40px;
    left: 47%;
    opacity: 0.8;
}

.snow:nth-child(14) {
    animation-duration: 6.7s;
    position: absolute;
    top: -40px;
    left: 2%;
    opacity: 0.9;
}

.snow:nth-child(15) {
    animation-duration: 8s;
    position: absolute;
    top: -40px;
    left: 75%;
}

.snow:nth-child(16) {
    animation-duration: 6.4s;
    position: absolute;
    top: -40px;
    left: 97%;
    opacity: 0.6;
}

@keyframes fall{
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(110vh);
    }
}

/*-------PlayButton------*/

.playButton {
    font-weight: 300;
    position: absolute;
    background-color: white;
    box-shadow: 0px 0px 20px rgb(240, 240, 240);
    width: 300px;
    height: 150px;
    border: 1px solid grey;
    border-radius: 30px;
    margin-top: 140px;
    left: 41.5%;
    z-index: 3;
    font-family: sans-serif;
    font-size: 40px;
    animation-name: float, disappear;
    animation-duration: 4s, 1s;
    animation-timing-function: ease-in-out, linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-play-state: running, paused;
}

.playButton:hover {
    transform: scale(1.03);
    background-color: rgb(250, 250, 250);
    animation-play-state: paused;
}

@keyframes float {
    0% {
        margin-top: 140px;
    }
    50% {
        margin-top: 190px;
    }
    100% {
        margin-top: 140px;
    }
}

@keyframes disappear {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/*-----Grid-----*/

.grid {
    position: relative;
    margin: 250px auto;
    display: flex;
    width: 700px;
    height: 500px;
    flex-wrap: wrap;
    justify-content: space-around;
    z-index: 2;
    opacity: 0;
    animation: appear 1s linear forwards;
    animation-delay: 1s;
    animation-play-state: paused;
}

.gridBut {
    height: 150px;
    width: 150px;
    background-color: white;
    border: 0.5px solid black;
    border-radius: 20px;
}

.gridBut:hover {
    background-color: rgb(240, 240, 240);
}

@keyframes appear {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="stylesheet.css">
        <title>Matching Game Project</title>
    </head>
    <body id="body">
        <header id="header">Matching Game</header>
        <div class="snowfall">
            <div class="snow"></div>
            <div class="snow"></div>
            <div class="snow"></div>
            <div class="snow"></div>
            <div class="snow"></div>
            <div class="snow"></div>
            <div class="snow"></div>
            <div class="snow"></div>
            <div class="snow"></div>
            <div class="snow"></div>
            <div class="snow"></div>
            <div class="snow"></div>
            <div class="snow"></div>
            <div class="snow"></div>
            <div class="snow"></div>
            <div class="snow"></div>
            <div class="snow"></div>
        </div>
        <script src="snow.js"></script>
        <div>
            <button class="playButton" type="button" onclick="runTitle(), runPlayBut()">Play</button>
        </div>
        <div class="grid">
            <button class="gridBut"></button>
            <button class="gridBut"></button>
            <button class="gridBut"></button>
            <button class="gridBut"></button>
            <button class="gridBut"></button>
            <button class="gridBut"></button>
            <button class="gridBut"></button>
            <button class="gridBut"></button>
            <button class="gridBut"></button>
            <button class="gridBut"></button>
            <button class="gridBut"></button>
            <button class="gridBut"></button>
        </div>
        <script src="playbutton.js"></script>
    </body>
</html>

During deploying my next.js app I am facing following #fillNegs in the tailwind node_modules folder. I am using node.js version 12.22.0 and next.js version 11. and Tailwind version is 2.0.2

module.image.null_resource.push (local-exec): #15 147.3
module.image.null_resource.push (local-exec): #15 147.3 ./src/ProductDisplay/index.module.css.webpack[javascript/auto]!=!./node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[3].oneOf[2].use[1]!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[3].oneOf[2].use[2]!./src/ProductDisplay/index.module.css
module.image.null_resource.push (local-exec): #15 147.3 /usr/src/app/node_modules/tailwindcss/node_modules/minimatch/dist/cjs/ast.js:86
module.image.null_resource.push (local-exec): #15 147.3     #fillNegs() {
module.image.null_resource.push (local-exec): #15 147.3              ^
module.image.null_resource.push (local-exec): #15 147.3
module.image.null_resource.push (local-exec): #15 147.3 SyntaxError: Unexpected token '('
module.image.null_resource.push (local-exec): #15 147.3
module.image.null_resource.push (local-exec): #15 147.3
module.image.null_resource.push (local-exec): #15 147.3 > Build error occurred
module.image.null_resource.push (local-exec): #15 147.3 Error: > Build failed because of webpack errors
module.image.null_resource.push (local-exec): #15 147.3     at /usr/src/app/node_modules/next/dist/build/index.js:397:19
module.image.null_resource.push (local-exec): #15 147.3     at async Span.traceAsyncFn (/usr/src/app/node_modules/next/dist/telemetry/trace/trace.js:60:20)

so the flow is i have a multi step form in which it validate each step perfectly and then go to the next step but in last step there is a verification on the sim that the number must be registered on your national identity number if it does not verify it redirects the user to the first screen in which it get the value of cellNo from the input field when i update the number and then go to next step it calls the update api

if (isSimNotVerfied) {
  props.updatePhoneNumber({
    applicationId: applicationId,
    phone: applicants[0].cellNo,
    phoneCountryCode: "92",
    mobileOperator: applicants[0].mobileOperator.value,
  });

so it will call this api without otp and it only calls when isSimNotVerfied == true and it becomes true when simVerification failed in the last step so what i passed in the phone field applicants[0].cellNo is my state field which I’m updating and then it saves the updated value in the state and call the api

and then when i enter otp it again call this api and pass otp as well

  const handleOtpChange = (value) => {
  if (value.length == 4) {
  if (isSimNotVerfied) {
    props.updatePhoneNumber({
      applicationId: applicationId,
      phone: state.applicantList[0].cellNo,
      phoneCountryCode: "92",
      otp: value,
    });
  } else {
    props.verifyCustomerInfoOtp({
      applicationId: applicationId,
      otp: value,
    });
  }
}
setState({ ...state, mobileOtp: value });
};

now it call the api with the otp value and but the issue is this api does not call because in my UI it get the cell Number from the application object but in that object phone number does not change and it is a get endpoint it

 <Authentication
          redirectTo={redirectTo}
          resendOtp={resendOtp}
          execStatusSentEmailConfirmation={execStatusSentEmailConfirmation}
          execStatusGetApplicationStatus={execStatusGetApplicationStatus}
          validationCheck={validationCheck}
          execStatusGetConfigurations={execStatusGetConfigurations}
          execStatusAddBasicCustomerInfo={execStatusAddBasicCustomerInfo}
          handleChange={handleChange}
          handleAccountChange={handleAccountChange}
          proceedToNextStep={proceedToNextStep}
          handleBasicInfoSubmit={handleBasicInfoSubmit}
          handleOtpChange={handleOtpChange}
          resetStateOtp={resetStateOtp}
          closeProceedDialog={closeProceedDialog}
          handleSubmit={handleSubmit}
          {...props}
          {...state.applicantList[0]}
          {...state}
          // {...state.applicantList[parseInt(stepNumber) - 1]}
          goBack={goBack}
          numberOfApplicants={state.numberOfApplicants}
          validationResult={state.validationResultBasicDetail}
          // {...state.applicantList[currentActiveStep]}
        />

this is my authentication component this is called after the phone number update

import { Typography } from '@mui/material'
import React, { useEffect } from 'react'
import OtpInput from "react-otp-input";
import { IsMobileWidth, IsZoom150 } from 'components/common/util/util'
import { useState } from 'react';
import EmailVerification from './email.verification/email.verification';
import ResendOtp from 'components/common/resend.otp/resend.otp'


export default function Authentication(props) {
const mobileWidth = IsMobileWidth()
const zoom150 = IsZoom150()

const { mobileOtp, otpSuccess, account, cellNo,resendAppId,resendType,email } = props

    if(cellNo === '') {
    props.history.push("/dob")
}

useEffect(() => {
     return () => {
        props.resetStateOtp()
     }
},[])

return (
    <React.Fragment>
        {
            otpSuccess  ?
                <EmailVerification
                    {...props}
                    
                /> :
                <div className='w-100 d-flex justify-content-center align-items-center pt-5'>
                    <div className='d-flex flex-column justify-content-center align-items-center'>
                        <div>
                            <Typography className='fw-bolder' color="primary">Verify your mobile number</Typography>
                        </div>
                        <div className='pt-2 fw-bolder pt-2'>
                            <Typography>Please enter the OTP we sent to +92 {cellNo}
                            </Typography>
                        </div>
                        <div className='pt-2'>
                            <OtpInput
                                isInputSecure={false}
                                // isDisabled={execStatus.status === "PENDING" ? true : false}
                                shouldAutoFocus={true}
                                isInputNum={true}
                                onChange={props.handleOtpChange}
                                // numInputs={length}
                                value={mobileOtp}
                                resetStateOtp = {props.resetStateOtp}
                                separator={<span>&nbsp;&nbsp;&nbsp;&nbsp;</span>}
                                inputStyle={{
                                    width: mobileWidth || zoom150 ? 40 : 40,
                                    height: mobileWidth || zoom150 ? 40 : 40,
                                    backgroundColor: "#EDEDEC",
                                    border: "none",
                                    borderRadius: 10,

                                    // fontFamily: state.visibility ? "password" : "text",
                                }}
                                focusStyle={{
                                    borderRadius: 10,
                                    backgroundColor: "#ffffff",
                                    outline: "none",
                                    boxShadow:
                                        "0px 3px 5px -1px rgba(0,0,0,0.2), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12)",
                                }}
                            />
                        </div>

                        <ResendOtp
                            applicationId={props.basicInfoSignUpResponse && props.basicInfoSignUpResponse.get("applicationId")}
                            type="SIGNUP" />
                    </div>
                </div>
        }
    </React.Fragment>
)

}

this is my authentication component is there any way i can get the updated value in a separate variable and pass that variable in the authentication component and then print it but it only works if the isSimNotVerified true then i pass the variable otherwise use the state variable how can i do that?

I designed a website using HTML/CSS and JS, up to now I just using visual studio live server but when I copy whole folder and paste it in Xampp and run it in same browser it have lots of bugs.

this is visual studio live server

and this is same folder and files running in localhost

I tried many ways:
change address of files
clear browser cache
uninstall and reinstall the latest version of xampp

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>eLearning | Welcome</title>
    <link rel="stylesheet" href="/vendor/swiperjs/css/swiper-bundle.min.css" />
    <link rel="stylesheet" href="style/swiper.css" />
    <link rel="stylesheet" href="style/grid.css" />
    <link rel="stylesheet" href="style/index.css" />
    <link rel="stylesheet" href="style/responsive.css" />
  </head>
  <body>
</body>
</html>

I want to know if there is any method or trick to be able to have the data before a for to be able to iterate and change some functions within it, if it can be done with another for or how it can be done

try to do several for and save the data in a vector to later be able to use, but I guess it is not the best way

I get payload from php variable and pass it to javascript json

I want to convert this javascript code

createOrder: (data, actions) => {
return actions.order.create({
    "purchase_units": [{
        "custom_id": "DP12345",
        "description": "Demo Product",
        "amount": {
            "currency_code": "USD",
            "value": 7,
            "breakdown": {
                "item_total": {
                    "currency_code": "USD",
                    "value": 7                        }
            }
        },
        "items": [
            {
                "name": "Demo Product",
                "description": "Demo Product",
                "unit_amount": {
                    "currency_code": "USD",
                    "value": 7                        },
                "quantity": "1","category": "DIGITAL_GOODS"
            },
        ]
    }]
});
}

to

<?php
$payload='{ "purchase_units": [{ "custom_id": "DP12345", "description": "Demo Product", "amount": { "currency_code": "USD", "value": 7, "breakdown": { "item_total": { "currency_code": "USD", "value": 7                        } } }, "items": [ { "name": "Demo Product", "description": "Demo Product", "unit_amount": { "currency_code": "USD", "value": 7                        }, "quantity": "1","category": "DIGITAL_GOODS" }, ] }] }';
?>

var paypalPayload = "<?=$payload?>";
createOrder:(data, actions) => {return actions.order.create(paypalPayload);}

paypal button appear but checkout window crashed ..

I’m trying to understand why I can’t properly run a bash script file that pairs to an android device with ADB from a Node.js program. If I call the bash script the same way that in my nodejs program it works. It does not work from my Node.js code.

The bash file:

#!/bin/bash
/path/to/platform-tools/adb pair $1:$2 <<EOF
$3
EOF

My node.js code:

import {spawn} from "child_process";
function run (command:string) {
    return new Promise((res,rej) => {
        const s = command.split(/s+/);
        const comm = spawn(s[0],s.slice(1));
        comm.stdout.on("data",(d) => console.log(d.toString());
        comm.stderr.on("data",(d) => console.log(d.toString());
        comm.on("error",(e) => rej(e));
        comm.on("close",(c) => c === 0?res(c):rej(c)); 
    })
}

await run("bashfile.sh 192.168.3.2 60882 414567");

The output when running from Node.js:

Enter pairing code:
error: protocol fault (couldn't read status message): Success

[UnhandledPromiseRejection]....

But when I run it from my terminal (bash bashfile.sh 192.168.3.2 60882 414567) I get the next output and It works:

Enter pairing code: Succesfully connected to 192.168.3.2:60882...

I have tried with spawn and with execFile from child_process, and both don’t work.

so i’m currently developping a website, and i need at a certain point to search for an user, and be able to modify certain infos.

here my issue is that after searching for this user, the ‘infos’ div appears but with no info whatsoever.

here’s the code and the phpmyadmin screen of both of the databases :

<?php
// Démarrer la session
session_start();

// Vérifier si l'utilisateur est connecté et s'il s'agit de l'utilisateur "celine" ou d'un administrateur
if (!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true || ($_SESSION["identifiant"] !== "Céline" && $_SESSION["role"] !== "admin")) {
    // Rediriger l'utilisateur vers la page de connexion
    header("location: default.php");
    exit;
}

// Inclure la bibliothèque PHP QR Code
include './phpqrcode/qrlib.php';

// Connexion à la base de données
$mysqli = new mysqli("127.0.0.1:3306", "u116511098_Admin", "J6&+MRHj7E:c", "u116511098_BDD_bal");

// Vérification de la connexion
if ($mysqli->connect_error) {
    die("Erreur de connexion à la base de données: " . $mysqli->connect_error);
}

// Initialisation des variables
$display_infos = "none"; // Par défaut, le div "infos" est caché

// Traitement de la validation du paiement
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST["valider_paiement"])) {
    // Récupération des données du formulaire
    $idpaye = intval($_POST["idpaye"]);
    $id_utilisateur = $_POST["id_utilisateur"];
    $type_paiement = $_POST["type_paiement"];
    $email = $_POST["email"];

    // Requête SQL pour mettre à jour le paiement de l'utilisateur
    $sql_update_paiement = "UPDATE paiement SET paye = 1, type_paye = '$type_paiement' WHERE id = $idpaye";
    if ($mysqli->query($sql_update_paiement) === true) {

        // Générer un token aléatoire
        $token = bin2hex(random_bytes(16)); // 16 caractères hexadécimaux (8 bytes)
        // Requête SQL pour mettre à jour le token du QR code dans la base de données
        $sql_update_qr= "UPDATE paiement SET token_qr_code = '$id_utilisateur$token' WHERE id = $idpaye";
        if ($mysqli->query($sql_update_qr) === true) {
            // Générer l'URL avec le token
            $url_with_token = "https://bal2024.arc421.fr/qr_code.php?token=$id_utilisateur$token";

            // Générer le QR code
            $qr_code_file = "./qrcodes/qr_code_$id_utilisateur.png"; // Nom du fichier QR code
            QRcode::png($url_with_token, $qr_code_file);

            // Texte de l'e-mail au format HTML
            $message = '<html>
            <head>
                <title>Confirmation de votre paiement</title>
            </head>
            <body>
                <h2>Bienvenue ' . $prenom . ' ' . $nom . ',</h2>
                <p>Merci pour votre paiement. Voici le QR code à présenter à l'entrée :</p>
                <img src="cid:qrcode">
            </body>
            </html>';

            // Objet de l'e-mail
            $subject = "Confirmation de votre paiement";

            // Adresse e-mail de l'expéditeur
            $from = "[email protected]";

            // Headers de l'e-mail
            $headers = "From: $fromrn";
            $headers .= "Reply-To: $fromrn";
            $headers .= "Content-Type: multipart/mixed; boundary="PHP-mixed-".md5(time()).""rn";

            // Corps du message
            $body = "--PHP-mixed-".md5(time())."rn";
            $body .= "Content-Type: multipart/alternative; boundary="PHP-alt-".md5(time()).""rnrn";

            // Texte au format HTML
            $body .= "--PHP-alt-".md5(time())."rn";
            $body .= "Content-Type: text/html; charset="iso-8859-1"rn";
            $body .= "Content-Transfer-Encoding: 7bitrn";
            $body .= "rn";
            $body .= "$messagern";
            $body .= "rn";

            // Pièce jointe (le QR code)
            $file = fopen($qr_code_file, "rb");
            $data = fread($file, filesize($qr_code_file));
            fclose($file);
            $data = chunk_split(base64_encode($data));

            $body .= "--PHP-mixed-".md5(time())."rn";
            $body .= "Content-Type: image/png; name="qr_code.png"rn";
            $body .= "Content-Transfer-Encoding: base64rn";
            $body .= "Content-ID: <qrcode>rn";
            $body .= "Content-Disposition: inlinern";
            $body .= "rn";
            $body .= $data;
            $body .= "rn";

            // Envoi de l'e-mail
            if (mail($email, $subject, $body, $headers)) {
            echo "L'e-mail a été envoyé avec succès.";
            } else {
            echo "Erreur lors de l'envoi de l'e-mail.";
            }
        } else {
            echo "Erreur lors de la mise à jour du token du QR code: " . $mysqli->error;
        }
    } else {
        echo "Erreur lors de la validation du paiement: " . $mysqli->error;
    }
}

// Traitement de la recherche de l'utilisateur
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST["rechercher_utilisateur"])) {
    // Récupération des données du formulaire
    $nom_recherche = $_POST["nom_recherche"];
    $prenom_recherche = $_POST["prenom_recherche"];
    $classe_recherche = $_POST["classe_recherche"];

    $nom_recherche = strtoupper($nom_recherche);
    $prenom_recherche = strtoupper($prenom_recherche);

    // Requête SQL pour rechercher l'utilisateur
    $sql_recherche_utilisateur = "SELECT inscrits.nom, inscrits.prenom, inscrits.classe, inscrits.email, inscrits.photo, paiement.paye, inscrits.idpaye, paiement.type_paye, inscrits.idutil
                                  FROM inscrits
                                  LEFT JOIN paiement ON inscrits.idpaye = paiement.id
                                  WHERE inscrits.nom = '$nom_recherche' AND inscrits.prenom = '$prenom_recherche' AND inscrits.classe = '$classe_recherche'";

    $result_recherche_utilisateur = $mysqli->query($sql_recherche_utilisateur);

    if ($result_recherche_utilisateur->num_rows == 1) {
        $row = $result_recherche_utilisateur->fetch_assoc();
        $nom = $row["nom"];
        $prenom = $row["prenom"];
        $classe = $row["classe"];
        $email = $row["email"];
        $photo = $row["photo"];
        $paye = $row["paye"];
        $type_paye = $row["type_paye"];
        $id_utilisateur = $row["idutil"];
        $idpaye = $row['idpaye'];
    } else {
        echo "Aucun utilisateur trouvé avec ces informations.";
    }
}


?>

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Validation du Paiement</title>

    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <link rel="stylesheet" type="text/css" href="./css/validation_paiement.css" />
    <script>
        function afficherinfos() {
                event.preventDefault();
                var infos = document.getElementById("infos");
                infos.style.display = "flex";
                var retour = document.getElementById("retour");
                retour.style.display = "flex";
                var rechercher = document.getElementById("rechercher");
                rechercher.style.display = "none";
                var deconnexion = document.getElementById("deconnexion");
                deconnexion.style.display = "none";
            }

        function cacherinfos() {
                event.preventDefault();
                var infos = document.getElementById("infos");
                infos.style.display = "none";
                var retour = document.getElementById("retour");
                retour.style.display = "none";
                var rechercher = document.getElementById("rechercher");
                rechercher.style.display = "flex";
                var deconnexion = document.getElementById("deconnexion");
                deconnexion.style.display = "flex";
            }
    </script>
</head>
<body>
    <div class="container">
        <div class='option_bar'>
            <a id='deconnexion' href="logout.php">Déconnexion</a>
            <a id='retour' href="validation_paiement.php">Retour</a>
        </div>
        <div class='sous_container'>
            <div id='rechercher'>
                <h2>Validation du Paiement</h2>
                <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" onsubmit='afficherinfos()' >
                    <div>
                        <label for="nom_recherche">Nom:</label>
                        <input type="text" id="nom_recherche" name="nom_recherche" required>
                    </div>
                    <div>
                        <label for="prenom_recherche">Prénom:</label>
                        <input type="text" id="prenom_recherche" name="prenom_recherche" required>
                    </div>
                    <div>
                        <label for="classe_recherche">Classe:</label>
                        <select id="classe_recherche" name="classe_recherche" required>
                            <option value="T1">T1</option>
                            <option value="T2">T2</option>
                            <option value="T3">T3</option>
                            <option value="T4">T4</option>
                            <option value="T5">T5</option>
                            <option value="T6">T6</option>
                            <option value="T7">T7</option>
                            <option value="STMG1">STMG1</option>
                            <option value="STMG2">STMG2</option>
                            <option value="ST2S">ST2S</option>
                        </select>
                    </div>
                    <button type="submit" name="rechercher_utilisateur">Rechercher</button>
                </form>
            </div>
            <div id="infos" >
                    <h3>Informations de l'Utilisateur</h3>
                    <p><strong>ID Utilisateur:</strong> <?php echo $id_utilisateur; ?></p>
                    <p><strong>Nom:</strong> <?php echo $nom; ?></p>
                    <p><strong>Prénom:</strong> <?php echo $prenom; ?></p>
                    <p><strong>Classe:</strong> <?php echo $classe; ?></p>
                    <p><strong>Email:</strong> <?php echo $email; ?></p>
                    <div id='photo'>
                        <?php if ($photo) : ?>
                            <img id='photo' src="<?php echo $photo; ?>" alt="Photo de profil">
                        <?php else : ?>
                            <p>Aucune photo disponible.</p>
                        <?php endif; ?>
                    
                        <form method="get" action="modifier_photo.php">
                            <input type="hidden" name="id_utilisateur" value="<?php echo $id_utilisateur; ?>">
                            <button type="submit">Modifier la photo</button>
                        </form>
                    </div>
                    <h3>Validation du Paiement</h3>
                    <form onsubmit='cacherinfos()' method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" >
                        <input type="hidden" name="idpaye" value="<?php echo $idpaye; ?>">
                        <input type="hidden" name="email" value="<?php echo $email; ?>">
                        <input type="hidden" name="id_utilisateur" value="<?php echo $id_utilisateur; ?>">
                        <div>
                            <label for="type_paiement">Type de Paiement:</label>
                            <select id="type_paiement" name="type_paiement" required>
                                <option value="cheque">Chèque</option>
                                <option value="espece">Espèces</option>
                            </select>
                        </div>
                        <button type="submit" name="valider_paiement">Valider Paiement</button>
                    </form>
            </div>
        </div>
    </div>
</body>
</html>

<?php
// Fermer la connexion à la base de données
$mysqli->close();
?>

the table named ‘inscrits’ :
inscrits

the table named ‘paiement’ :
paiement

i managed to make it work at a certain point, then it didn’t work after

I’m using the react-native-victory chart for the bar graph I’m using zoom container for scrolling a large data graph when I scroll the graph and apply the filter my data changes and the bar not showing on the graphs, I need to manually scroll and see the graph bar

example code any help and suggestions.
Note: When I apply filter my barChartData state updated.

<VictoryChart
                theme={VictoryTheme.grayscale}
                domainPadding={{ x: 16 }}
                padding={styles.mainChart}
                containerComponent={
                  <VictoryZoomContainer
                    zoomDimension="x"
                    zoomDomain={zoomedXDomain}
                    onZoomDomainChange={handleZoom}
                    allowZoom={false}
                    allowPan
                    responsive={false}
                  />
                }
                domain={entireDomain}
              >
                <VictoryAxis
                  tickValues={totalReferralGraphData?.label}
                  tickFormat={value => {
                    return referralFilterId === Strings.DATE_RANGE
                      ? moment(value, 'MM-DD-YYYY').format('DD MMM')
                      : value;
                  }}
                  fixLabelOverlap={true}
                  style={{
                    tickLabels: styles.label,
                    ticks: styles.label,
                  }}
                />
                <VictoryAxis
                  dependentAxis
                  tickFormat={x => `${x}`}
                  style={{
                    tickLabels: styles.label,
                    ticks: styles.label,
                  }}
                />
                <VictoryBar
                  style={{
                    data: { fill: colors.primaryThemeColor },
                    labels: styles.label,
                  }}
                  data={barChartData}
                  labels={({ datum }) => (datum.y === 0 ? ' ' : isEmptyOrNull(datum.y) ? ' ' : datum.y)}
                  cornerRadius={styles.barRadiusStyle}
                  barWidth={10}
                  labelComponent={<VictoryLabel />}
                  labelPlacement={'parallel'}
                  labelPosition={'centroid'}
                />
              </VictoryChart>

I took this random data to practice filter method but got confused.

let users = [
    {
     firstName:"Rahul",
     lastName:"Khurana",
     age:"25"
    },
    {
     firstName:"Mansi", 
     lastName:"soni", 
     age:"28"
    },
    {
     firstName:"Joe", 
     lastName:"Biden", 
     age:"80"
    },
    {
     firstName:"Deepika", 
     lastName:"Patni", 
     age:"40"
    },
    {
    firstName:"katrina", 
    lastName:"Kaif", 
    age:"39"}
   ]

I used code below to filter first name below age 30.

 const people = users.filter((n) => {
       if (n.age <= 30){
        return n.firstName;
       }
    })
    console.log(people);

But my output in console is

[
  { firstName: 'Rahul', lastName: 'Khurana', age: '25' },
  { firstName: 'Mansi', lastName: 'soni', age: '28' }
]

I want to print only firstName in console. I am new to these methods. Please show what I did wrong with the code.

Thanks!

I try to create ul with 10 items, then pick last item and modify it, can you check my code and make it more “clear”?

const ulList = document.createElement("ul");


const multipleElements = (x) => {
    document.body.append(ulList);
    for (let i = 0; i < x; i++) {
        const liItem = document.createElement("li");
        ulList.append(liItem);
        liItem.textContent = i + 1;
    }
};

multipleElements(10);


ulList.lastElementChild.textContent = "This is last element"

I want to create an org chart with D3, which basically works but instead of having every single person in a separate node, I want to have a “team” node and a list with the members within the node . That actually works, but now the nodes are overlapping visually.

I tried to play around with the nodeHeight, nodeWidth and also .childrenMargin – it seems that it does apply for the nodes above but not for those on the bottom.

Now is there an actually way to achieve this with the nodes dynamically adjusting them selfs? I thought about including collision detection, but that also did not work. It seems, no matter what I try, it only applies for the nodes above. Even if I don’t want to have it dynamically, I don’t get how to adjust the distance for the child nodes so they don’t overlap.

Would be great if someone has an idea! Thank you

<head>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/d3-flextree.js"></script>
</head>

<body>


<button onclick="chart.fit()">Fit to the screen</button>
<button onclick="chart.expandAll().fit()">expandAll</button>
<button onclick="chart.collapseAll().fit()">collapseAll</button>
<button onclick="chart.exportImg()">Export Current</button>
<button onclick="chart.exportImg({full:true})">Export Full</button>
<button onclick="chart.exportSvg()">Export SVG</button>
<button onclick="downloadPdf(chart)">Export PDF</button>

<script src="https://unpkg.com/[email protected]/dist/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>
<script>
  function downloadPdf(chart) {
    chart.exportImg({
      save: false,
      full: true,
      onLoad: (base64) => {
        var pdf = new jspdf.jsPDF("l", "mm", "a2");
        var pdf_width = pdf.internal.pageSize.getWidth();
        var pdf_height = pdf.internal.pageSize.getHeight();
        var img = new Image();
        img.src = base64;
        img.onload = function () {
          pdf.addImage(
            img,
            'JPEG',
            5,
            5,
            595 / 3,
            ((img.height / img.width) * 595) / 3
          );
          pdf.save('chart.pdf');
        };
      },
    });
  }
</script>

<div class="chart-container"></div>

<script>
  var chart = null;
  // This is the data used - https://github.com/bumbeishvili/sample-data/blob/main/data-oracle.csv
  d3.csv(
    //'https://raw.githubusercontent.com/bumbeishvili/sample-data/main/data-oracle.csv'
    'data.csv'
  ).then((data) => {
    chart = new d3.OrgChart()
      .nodeHeight((d) => 85 + 25)
      .nodeWidth((d) => 220 + 2)
      .childrenMargin((d) => 50)
      .compactMarginBetween((d) => 35)
      .compactMarginPair((d) => 30)
      .neighbourMargin((a, b) => 20)
      .nodeContent(function (d, i, arr, state) {
        const color = '#FFFFFF';
        const imageDiffVert = 25 + 2;
        return `
                <div style='width:${d.width} px;height:${d.data.height} px;padding-top:${imageDiffVert - 2}px;padding-left:1px;padding-right:1px'>
                    <div style="font-family: 'Inter', sans-serif;background-color:${color};  margin-left:-1px;width:${d.width - 2}px;height:${d.data.height - imageDiffVert}px;border-radius:10px;border: 1px solid #E4E2E9">
                        <div style="display:flex;justify-content:flex-end;margin-top:5px;margin-right:8px"><br/> 
                        </div>                      
                        <div style="background-color:${color};margin-top:${-imageDiffVert - 20}px;margin-left:${15}px;border-radius:100px;width:50px;height:50px;" ></div>
                        <div style="margin-top:${
                            -imageDiffVert - 20
                        }px;">   <img src=" ${d.data.image}" style="margin-left:${20}px;border-radius:100px;width:40px;height:40px;" /></div>
                        <div style="font-size:15px;color:#08011E;margin-left:20px;margin-top:10px">  ${
                            d.data.name
                        } </div>
                        <div style="color:#716E7B;margin-left:20px;margin-top:3px;font-size:10px;"> ${
                            d.data.position
                        } </div>

                    </div>
                </div>
                            `;
      })
      .container('.chart-container')
      .data(data)
      .render();
  });
</script>
</body>

Here’s the script I am using for my data tables. Basically on mobile or smaller screen every row childs which are columns are hidden by default with +,- button to expand and see them. I can toggle this to expand and hide function on every row. I want to keep this functionality and make all rows expanded by default not hidden.

Here is the screenshot of datatable and the problem I want to solve

How they look by default as I want them to be expanded by default

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css"
    href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css">
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>


 $(document).ready(function () {
$('#table_id').DataTable({
  "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
  "pageLength": 10,
  "info": false,
  "autoWidth": false,
  "responsive": true,
  language: {
    'paginate': {
      'previous': '<span class="prev-icon"><i class="bi bi-chevron-left"></i></span>',
      'next': '<span class="next-icon"><i class="bi bi-chevron-right"></i></span>'
    }
  }
}).colums.adjust().responsive.recalc();

});

hi i have set full calendar on my symfony project, i have import package with npm and set my calendar like this :

import { Calendar } from '@fullcalendar/core'
import multiMonthPlugin from '@fullcalendar/multimonth'
import interactionPlugin from '@fullcalendar/interaction' 

document.addEventListener('DOMContentLoaded', function () {
    let calendarEl = document?.getElementById('calendar');

    const calendar = new Calendar(calendarEl, {
        plugins: [interactionPlugin, multiMonthPlugin],
        timeZone: 'UTC',
        initialView: 'multiMonthFourMonth',
        editable: true,
        selectable: true,
        views: {
            multiMonthFourMonth: {
                type: 'multiMonth',
                duration: { months: 2 }
            }
        }
    })
    calendar.setOption('locale', 'fr');
    calendar.render();
});

i want made a click for made my start date and click for my end date like this :

enter image description here

how i can do this ?

and i want export all datas clicked on my input form thx all !

search on docs but i found nohting ><