Category: javascript

O! I created an account here because I need some help with something I’ve been having issues while finishing a proyect for one of my subjects in my Professional Institute. (English is not my first language, but I hope my issue is clear)
When I try to “Test Web Service” in the one I’m developing I get this message:

Error from “Test Web Service”

I found someone with a similar issue that I have but they use GlassFish, but Netbeans doesn’t let me install GlassFish (I was going to originally use it but I got this problem)

I’ve tried:

• Reinstalling everything
• Using Apache Netbeans and Tomcat’s latest versions respectively
• Reinstalling XAMPP with the other apps
• Reinstalling JKD 8 with the other apps
• Creating different users in tomcat-users.xml
• Installing Tomcat through .zip and Windows Installer
• Cleaning everything the programs leave behind before reinstalling

I’ve tried some solutions I found in Youtube and in this forum/other forums but I can’t find any answers, I would be really grateful if someone can help me, thanks!

node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module 'C:Userstest001Downloadsbilling-webnodejs-workspace...'
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)      
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

**i didnt realise when i was doing my project, it suddenly pops out yesterday. what can i do to solve this problem

(node:4956) Warning: Accessing non-existent property ‘response’ of module exports inside circular dependency
(Use node --trace-warnings ... to show where the warning was created)

i try to follow the instructions by typing node –trace-warnings … it shows another error**

enter image description here
When I use transformControl move the line, in order to keep the two points and lines move together, I have modified the two point geometry.attributes.position, but the next two points can’t be picked up

Hopefully I can pick up two points

whenever I refresh my page the fetched content I’ve loaded decides to disappear, it will load the first time but every time after that it will go. I have another component that has almost the same code and that one works fine so I’m not entirely sure why it doesn’t with this component.

the feeling I have is in my standings.svelte component I a flatMap function which is the main key difference compared to my other components.

This is my standings.svelte component

<script>
import {leagueStandings} from "../../stores/league-standings-stores"

const tablePositions = $leagueStandings.flatMap(({ standings: { data } }) => data);

</script>

<div class="bg-[#1C1C25] p-8 rounded-lg box-border w-fit">
    

    {#each tablePositions as tablePosition}
            <div class="standings-table flex gap-9 mb-2 pb-4 pt-3 border-b border-[#303041]">
                <div class="team-details flex gap-4 w-full" id="td">
                    <p class="w-[18px]">{tablePosition.position}</p>
                    <img src="{tablePosition.team.data.logo_path}" alt="" class="w-[1.5em] object-scale-down">
                    <p class="">{tablePosition.team_name}</p>
                </div>

                <div class="team-stats flex gap-5 text-left child:w-5 child:text-center w-full">
                    <p>{tablePosition.overall.games_played}</p>
                    <p>{tablePosition.overall.won}</p>
                    <p>{tablePosition.overall.draw}</p>
                    <p>{tablePosition.overall.lost}</p>
                    <p>{tablePosition.overall.goals_scored}</p>
                    <p>{tablePosition.overall.goals_against}</p>
                    <p>{tablePosition.total.goal_difference}</p>
                    <p>{tablePosition.overall.points}</p>
                    <p class="!w-[78px] !text-left">{tablePosition.recent_form}</p>
                </div>
            </div>
    {/each}
</div>

Here is my svelte store

import { writable } from "svelte/store";

export const leagueStandings = writable([]);

const fetchStandings = async () => {
    const url = `https://soccer.sportmonks.com/api/v2.0/standings/season/19734?api_token=API_KEY`;
    const res = await fetch(url);
    const data = await res.json();
    leagueStandings.set(data.data);

}
fetchStandings();

is there a way to call a function in a spawned child process, a powershell script, from the parent node js script?

node script:

const cp = require("child_process");
const psData = cp.spawn
("powershell -executionpolicy bypass  ./powershell-script.ps1", [], {
    shell: "powershell.exe",
});

powershell script:

function psDoSomething{
    # do something
}

I have encountered very weird behavior using angular model when user selects from an option. I will provide screenshots + code snippets. In summary, I am getting undefined for property that is populated. Model object returns expected string but if I directly call the property, it returns undefined.

Object that contains all properties, followed by direct call:

<ng-template>
   <label class="col-sm-4 col-form-label">Source Name :</label>
   <div class="col-sm-2">
      <select [(ngModel)]="opcoReference.opcoRef.tntSourceName" class="form-control form-control-sm">
         <option *ngFor="let object of opcoReference.origSourceName" [ngValue]="object.code">{{object.desc}}</option>
      </select>
   </div>
</ng-template>

ANY HELP IS GREATLY APPRECIATED!

I have a script for google sheets in Apps Script that takes values from four columns and turns them into arrays for apps script to use. This code has lists of names with peoples names repeating in some of the four columns. I am trying to take each unique name and rearrange them in a specific order, essentially a priority list based on which columns they are listed in, via code. However, no code or anything similar i have used has prevented duplicate names from appearing in the outputted names list.
`

function priority(preset, speech_one, speech_two, speech_three) { //the function, each argument is 
                                             //an array for each different columns in google sheets
  var output = [];            //the array i am attempting to output with the priority list of names

for (let i = 0; i <= speech_three.length; i++) {        // iterates through all listed items in the 
                                                        //first array
    if(!output.includes(speech_three[speech_three.length - i])){ //this is the problem code, it 
                                                          should check to see if the name that it 
                                                          has iterated to has already appeared, and                    
                                                          should only add the name if it has not 
                                                          already appeared in the output list

      output.unshift(speech_three[speech_three.length - i]); //Then it adds the item to the top of               
                                                               the priority list, or the front of 
                                                               the output array, which does work

    }  
}


for (let i = 0; i <= speech_two.length; i++) {               // same code as above but for the second column
    if(!output.includes(speech_two[speech_two.length - i])){

      output.unshift(speech_two[speech_two.length - i]);

    }
}

//Third and fourth columns not included as they are similar to the first and second and would make //this more difficult to read than it already is.

  return output; //Returns the output priority list back to google sheets, which also works
}

`

Everything in this script works well except for not including duplicate names, i have no idea as to why this isnt working so if anyone sees an issue with my code please let me know. Thanks in advance

I have tried several different variations of the if statement to prevent duplicates, such as using indexOf and filtering. I expect to get a list of names that is pulled from other arrays that has no duplicate names.

I have a site where the h1 tag and an image load in when I scroll to them. I have the css set to load an animation on the tags when they load, so I really don’t want them to load before they are visible.

I have it working perfectly on desktop/laptop, but on mobile the elements are just loaded automatically with everything else, and the animations don’t have a chance to work. The console logs that I call show that the window.scrollY is only returning “0”.

import React, { useEffect, useState } from 'react';
import Headshot from '../../../assets/images/about/Headshot';

const About = () => {
    const [isVisible, setIsVisible] = useState(true);

    useEffect(() => {
        document.addEventListener("touchmove", listenToScroll);
        window.addEventListener("scroll", listenToScroll);
        return () => {
            document.addEventListener("touchmove", listenToScroll);
            window.removeEventListener("scroll", listenToScroll);
        }
    }, [])


    const listenToScroll = () => {
        const homeHeight = document.getElementById('Home').clientHeight;
        const folioHeight = document.getElementById('Portfolio').clientHeight;
        const skillsHeight = document.getElementById('Skills').clientHeight;
        let heightToShow;
        let vh = window.innerHeight;
        if (homeHeight > vh + 100) {
            heightToShow = homeHeight - vh + folioHeight + skillsHeight;
        } else {
            heightToShow = 100 + folioHeight + skillsHeight;
        }
        const winScroll = window.scrollY;  
        console.log("winScroll: " + winScroll);
        console.log("heightToShow: "+ heightToShow);
        console.log("wS > hTS: " + (winScroll > heightToShow));

        if (winScroll > heightToShow) {
            isVisible && setIsVisible(true);
        } else {
            setIsVisible(false);
        }
    };

    return ( 
        <>
            <div className='container aboutContainer' id="About">
                { isVisible ? (
                    <>
                    <h1 className="aboutH1">This is Me</h1>
                    <div className="headshot">
                            <Headshot />
                            <img 
                                src="/assets/images/about/headshot.webp" 
                                alt="" 
                                id="headshotImg"
                            />
                    </div>
                </>
                ) : ""}
            </div>
        </>
    );
}

export default About

If there’s a simpler solution, I am certainly open to it, but please don’t just tell me “use this library, and put the tags in. It’ll take care of it.”
The point of this exercise is that I am trying to learn how to do it, so that I can tell if a library is a good choice for myself later.

When the user clicks a checkbox, the value will be sent to a javascript function that will take the value and check if has any occurrence in the database asynchronously, but I don’t know if it is possible in Django, I have seen serializers, but I don’t think it will work because it’s not only catching data from the database, but making a query. There is a way of doing this?

requisite = requisite.objects.filter(requisite__discipline__id=33) 

the code above will retrieve the data I want, but I need to get this number from the code below

<input class="form-check-input" type="checkbox" value="{{ discipline.id }}" id="flexCheckDefault{{ discipline.name }}" onclick="checkRequisite(this.defaultValue)">

I’m new using react-native and I’m using “react-native-geolocation-service” to get access to users’ location in my app, but I’m facing a problem. If the user refuses the request once, how can I request it again?

This is my script:

import { PermissionsAndroid } from 'react-native';

export const checkPermission = async () => {
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
      {
        title: 'Title test',
        message:
          'test message...',
        buttonNeutral: 'Ask Me Later',
        buttonNegative: 'Cancel',
        buttonPositive: 'OK',
      },
    );
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log('You can use the location');
    } else {
      checkPermission();
    }
  } catch (err) {
    console.warn(err);
  }
};

Thanks for any help!

I would like to get the data from session variable (req.user.username) then use it for posting. Here is my code:

app.get('/', async (req, res) => {
  console.log(req.user.username) // working just fine
});
app.post('/upload', async (req, res) => {
  const uploaderName = req.user.username // I'm getting undefined
  const upload = await database.query('INSERT INTO user WHERE username=$1', [uploaderName])

  console.log(uploaderName);
})

The goal of my code is to create a resume builder using HTML, CSS and JavaScript. Once the user “clicks” create resume, a new window should open with the content enter styled in a resume format of my choosing. I cannot use HTML to style the resume.

The issue I am having is my styling will not populate in an on-the-fly created with JavaScript. At this point, I have only tried to center the first name (I am testing to see if my code is correct). I am not receiving any errors, however, nothing is changing. I am not sure if it is because I am only doing the first name and I need to format the other content, or if I am actually coding something wrong.

I have created the HTML for the users to enter their information and the JavaScript to populate the information. No errors!

I added a function to center align the firstName. No errors! However, nothing happens!?

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>WEB-115 Final Project</title>
        <style>
            body {
                background-color: peru;
            }

            h1 {
                text-align: center;
                padding: 60px;
                background: forestgreen;
                font-size: 30px;
            }
        </style>

    </head>

    <body>

        <h1>Build Your Resume</h1>

        <form>
            <div id="myinfo">
            <h2>Personal Information:</h2>
            <label>Enter your first name:</label><br>
            <input type="text" id="firstName"><br><br>
            <label>Enter your last name:</label><br>
            <input type="text" id="lastName"><br><br>
            <label>Enter your preferred name:</label><br>
            <input type="text" id="preName"><br><br>
            <label>Enter your email address:</label><br>
            <input type="text" id="email"><br><br>
            <label>Enter your phone number:</label><br>
            <input type="text" id="number"><br><br>
            <label>Enter your state:</label><br>
            <input type="text" id="state"><br><br>
            <label>Enter your city:</label><br>
            <input type="text" id="city"><br><br>
            <label>Enter your zipcode:</label><br>
            <input type="text" id="zip"><br><br>
            <p>About Me</p>
            <textarea rows="15" cols="33" id="aboutMe">Tell us about the position you are looking for!</textarea><br><br>
            </div>

            <div id="myEdu">
            <h2>Enter Educational History:</h2>
            <label>Start Date:</label>
            <input type="date" id="eduStart"><br><br>
            <label>End Date:</label>
            <input type="date" id="eduEnd"><br><br>
            <label>Name of school:</label><br>
            <input type="text" id="school"><br><br>
            <label>Degree type:</label><br>
            <input type="text" id="degree"><br><br>
            <label>Field of study:</label><br>
            <input type="text" id="major"><br><br>
            </div>
            
            <div id="myJob">
            <h2>Enter job information:</h2>
            <label>Start Date:</label>
            <input type="date" id="jobStart"><br><br>
            <label>End Date:</label>
            <input type="date" id="jobEnd"><br><br>
            
            
            <p>Position Details:</p>
            <textarea rows="5" cols="33" id="details">Click Here!</textarea><br><br>
            </div>

            <div id="extra">
            <h2>Please Enter Your Skills:</h2>
            <textarea rows="15" cols="33" id="skills">Click Here!</textarea><br><br>

            <h2>Links:</h2>

            <p>Please provide links to any websites or blogs.</p>
            <textarea rows="15" cols="33" id="links">Click Here!</textarea><br><br>
            </div>

            <input type="button" id="btnSubmit" value="Create Resume">

        </form>

        <script src="projectJS.js"></script>
    </body>
</html>

JavaScript:

/*style*/
function myFunction () {
    let fName = document.getElementById("firstName");
    fName.style.textAlign = "center";
}
/*button*/
document.getElementById("btnSubmit").addEventListener('click',myWindow)
    /*function to create resume*/
    function myWindow()
    {
        /*get HTML first name*/
        fName = document.getElementById("firstName").value;
        /*get HTML last name*/
        lName = document.getElementById("lastName").value;
        /*get HTML preferred name*/
        pName = document.getElementById("preName").value;
        /*get HTML email address*/
        eAddress = document.getElementById("email").value;
        /*get HTML phone number*/
        phoneNum = document.getElementById("number").value;
        /*get HTML state*/
        stateAdd = document.getElementById("state").value;
        /*get HTML city*/
        cityAdd = document.getElementById("city").value;
        /*get HTML zip code*/
        zipCode = document.getElementById("zip").value;
        /*get HTML about me*/
        about = document.getElementById("aboutMe").value;
        /*get HTML Edu start date*/
        schoolStart = document.getElementById("eduStart").value;
        /*get HTML Edu end date*/
        schoolEnd = document.getElementById("eduEnd").value;
        /*get HTML School*/
        schoolName = document.getElementById("school").value;
        /*get HTML degree type*/
        degreeType = document.getElementById("degree").value;
        /*get HTML major*/
        fieldStudy = document.getElementById("major").value;
        /*get HTML job start date*/
        jStart = document.getElementById("jobStart").value;
        /*get HTML job end date*/
        jEnd = document.getElementById("jobEnd").value;
        /*get HTML job details*/
        jobDetails = document.getElementById("details").value;
        /*get HTML skills*/
        mySkills = document.getElementById("skills").value;
         /*get HTML links*/
        webPage = document.getElementById("links").value;
        myText = ("<html>n<head>n<title>WEB-115 Final Project</title>n</head>n<body>");
        myText += (fName);
        myText += (lName);
        myText += (pName);
        myText += (eAddress);
        myText += (phoneNum);
        myText += (stateAdd);
        myText += (cityAdd);
        myText += (zipCode);
        myText += (about);
        myText += (schoolStart);
        myText += (schoolEnd);
        myText += (schoolName);
        myText += (degreeType);
        myText += (fieldStudy);
        myText += (jStart);
        myText += (jEnd);
        myText += (jobDetails);
        myText += (mySkills);
        myText += (webPage);
        myText += ("</body>n</html>");
    
        flyWindow = window.open('about:blank','myPop','width=400,height=200,left=200,top=200');
        flyWindow.document.write(myText);
    }

I am using Emailjs to handle my email deliveribility but I have an issue when it comes to recatcha verification.

The HTML form works well without the verification but once I activate the recaptcha in emailjs, I will no more get the notification in my email when the form is filled. Emailjs doc says:

“To add CAPTCHA support:

1. Create reCaptcha(opens new window) account or login to the existing account.

2. Register a new site and add your site domain to the list of domains. If you want to test the template in JSFiddle, please also add jsfiddle.net to the list.

3. Follow the “client-side integration” instructions as specified in the reCaptcha dashboard. If you are using the send method, please pass the reCaptcha token in the g-recaptcha-response property.

4. Open your template in the EmailJS template editor, go to Settings tab, and check Enable reCAPTCHA V2 verification checkbox.

5. Specify the secret key obtained from reCaptcha dashboard.

After the above steps have been completed it won’t be possible to send out an email based on this template without solving a CAPTCHA test first. No additional changes are required – we will automatically send the solved CAPTCHA result along with the send email request.”

---

The issue is, I am just a beginner in javascript and I don’t seem to understand how to pass the recaptcha token.

My codes are below.

The form

<head>
  <script src="https://www.google.com/recaptcha/api.js"></script>
  
  <!--recaptcha-->
  <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js">
</script>

<!--emailjs-->
<script type="text/javascript">
   (function(){
      emailjs.init("EMAILJS_KEY");
   })();
</script>
</head>

<div class="form-container">
            <h2>Contact Me</h2>
            <p>Feel free to contact me and I will get back to you as soon as possible.</p>
            <div class="row">
              <div class="col-lg-6">
            <form  method="POST" id="shev-form">
                <input type="text" name="name" id="name_id" placeholder="Name" required>
                <input type="email" name="email" id="email_id" placeholder="Email" required>
                <input type="text" name="subject" id="subject_id" placeholder="Subject" required>
                <textarea name="message" cols="30" rows="5" id="message_id" placeholder="Message" required></textarea>
                   <div class="g-recaptcha" data-sitekey="MY_SITE_KEY"></div>
                <input type="submit" value="Submit" id="submit_id" onclick="sendMail()">
            </form>
            </div>

The javascript:

function sendMail() {
  var params = {
    name: document.getElementById("name_id").value,
    email: document.getElementById("email_id").value,
    subject: document.getElementById("subject_id").value,
    message: document.getElementById("message_id").value,
    
  };

  const serviceID = "service_ID";
  const templateID = "template_ID";

    emailjs.send(serviceID, templateID, params)
    .then(res=>{
        document.getElementById("name_id").value = "";
        document.getElementById("email_id").value = "";
        document.getElementById("subject_id").value = "";
        document.getElementById("message_id").value = "";
        console.log(res);
        alert("Your message sent successfully!!")

    })
    .catch(err=>console.log(err));

}

If the recaptcha is not sending a valid response to emailjs, the email will not be submitted.

Kindly help.

Thanks.

I’m creating a chess website using React and SocketIO where two people can connect and play with each other. I created all of the movement logic and everything was working fine. You could play the game as black and white from the same computer. When I added SocketIO, the board stopped updating properly. When I move a piece, it sends the new board data to the server, and then to the other user in the room. It sends the data properly, then runs the canMove function, which is what I used to update the visual board. The canMove function is still running, and running with the correct/updated data, but the board doesn’t update.

All of the important code happens in Board.js and server.js

The codeSandbox is: https://codesandbox.io/p/github/Vastagon/online-chess/draft/happy-smoke?file=%2Fclient%2Fsrc%2Fcomponents%2FBoard.js. You can use the npm run dev command/task to update the board whenever you want to make a change.

I had created this userscript to display the full path of both CSS and Xpath selectors. But I can’t figure out what the linter want to be valid (was valid before) for my functions to be exported in the DOM.

// ==UserScript==
// @name         retrieveCssOrXpathSelectorFromTextOrNode
// @namespace    gilles<dot>quenot<at>sputnick<dot>fr
// @version      0.2
// @description  retrieve CSS or Xpath Selector from text or node for chrome dev tools
// @author       Gilles Quenot
// @include      https://*
// @include      http://*
// @include      file://*
// @exclude      https://mail.google.com/*
// @grant        none
// ==/UserScript==

var xpathNamespaceResolver = {
    svg: 'http://www.w3.org/2000/svg',
    mathml: 'http://www.w3.org/1998/Math/MathML'
};

getElementByXPath = function getElementByXPath(expression) {
    var a = document.evaluate(expression, document.body, xpathNamespaceResolver, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
    if (a.snapshotLength > 0) {
        return a.snapshotItem(0);
    }
};


x = function(arg) {
    console.log("CSSn" + retrieveCssOrXpathSelectorFromTextOrNode(arg, 'css'));
    console.log("XPathn" + retrieveCssOrXpathSelectorFromTextOrNode(arg, 'xpath'));
    retrieveCssOrXpathSelectorFromTextOrNode = function(arg, type) {
        var root = [], node;
        nodeType = type.toLowerCase();
        function retrieveNodeNameAndAttributes(node) {
            var output = '';
            try {
                var nodeName = node.nodeName.toLowerCase();
            } catch(e) {
                console.error('ERROR no matching node');
                return;
            }
            if (node.hasAttributes()) {
                var attrs = node.attributes;
                for (var i = 0; i < attrs.length; i++) {
                    if (nodeType === 'xpath') {
                        if (attrs[i].value) {
                            output += '[@' + attrs[i].name + "='" + attrs[i].value + "']";
                        }
                        else {
                            output += '[@' + attrs[i].name + ']';
                        }
                    }
                    else if (nodeType === 'css') {
                        if (attrs[i].value) {
                            if (attrs[i].name === 'id') {
                                if (/:/.test(attrs[i].value)) {
                                    output += "[id='" + attrs[i].value + "']"; // new Ex: [id="foo:bar"]
                                }
                                else {
                                    output += "#" + attrs[i].value;
                                }
                            } else if (attrs[i].name === 'class') {
                                var classes = attrs[i].value.split(/s+b/).join('.');
                                output += '.' + classes;
                            } else {
                                output += "[" + attrs[i].name + "='" + attrs[i].value + "']";
                            }
                        }
                        else {
                            output += "[" + attrs[i].name + "]";
                        }
                    }
                }
            }

            var txt = '';
            if (nodeName === 'a' && nodeType === 'xpath') {
                txt = "[text()='" + node.innerText + "']";
            }

            root.push({ 'name': nodeName, 'attrs': output, txt });

            if (nodeName === 'body') return;
            else retrieveNodeNameAndAttributes(node.parentNode); // recursive function
        }

        if (typeof arg === 'string') { // text from within the page
            var selector = '//*[text()[contains(.,"' + arg + '")]]';
            node = getElementByXPath(selector);
        } else if (typeof arg === 'object') { // node argument, let's do some 'duck typing'
            if (arg && arg.nodeType) {
                node = arg;
            }
            else {
                console.error("ERROR expected node, get object");
                return;
            }
        } else {
            console.error("ERROR expected node or string argumument");
            return;
        }

        retrieveNodeNameAndAttributes(node);

        var output = '';
        if (nodeType === 'css') {
            output = root.reverse().map(elt => elt.name + elt.attrs ).join(' > ');
        }
        else if (nodeType === 'xpath') {
            output = '//' + root.reverse().map(elt => elt.name + elt.txt + elt.attrs ).join('/');
        }
        else {
            console.error('ERROR unknown type ' + type);
        }

        return output;
        //console.log(output);

    };
};