Category: javascript

I have an ajax inquiry using input values to concatenate a URL string for verification from a .php file as follows:

$.ajax({
    url: 'nameCheck.php?name=Bob&pin=2112',
    success: function (response) {
        console.log(response);
success=(response.name);
        alert(success);
    }
});

The .php file checks a database for a row with matching values thus:

$name=$_GET['name'];
$pin=$_GET['pin'];
header('Content-type:application/javascript');
$messages = array(
 "name"=>$name,
 "pin"=>$pin
);
$messages = json_encode($messages);

$result = $conn->query("SELECT id FROM clients WHERE name = '$name' AND pin = '$pin'");
if ($result->num_rows == 0) {
// row not found, do stuff...
echo "Access declined. Name or Pin mismatch for ".$name;
} else {
// row found, do other stuff...
header('Content-type: application/json');
echo json_encode(["name" => $messages]);
exit;
}

When the value is returned to the file with the javascript code it looks like this:

{"name":"Bob","pin":"2112"}

My intent is to redirect to another page using the verified input string, but the result certainly won’t work in a URL string. I need to replace characters in this string so that it looks like this:

name=Bob&pin=2112

After this has been accomplished I can concatenate strings to the actual URL the code will redirect to. Since it’s a local file, the string will only need to be:

verifyInput.php?name=Bob&pin=2112

Any help would be appreciated.

this is my first time asking a question on StackOverflow. I’m new to JS and Firebase and I’m currently following a React course, there is a part in which I have to implement Firebase to my “To-do App”. But I get this error:

ERROR
_firebase__WEBPACK_IMPORTED_MODULE_1__.default.collection is not a function
TypeError: _firebase__WEBPACK_IMPORTED_MODULE_1__.default.collection is not a function
    at Add (http://localhost:3000/static/js/bundle.js:51:55)
    ...

This is my firebase.js:

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  ...
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export default db;

And the initial use of db is in my App.js in the Add function in which I’m trying to add to-dos to Firestore.

import React, { useState } from 'react';
import db from './firebase';
import { FieldValue } from 'firebase/firestore'; // Importa FieldValue desde 'firebase/firestore', no es necesario importar 'firebase/app'
import './App.css';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import Paper from '@mui/material/Paper';
import AddBoxOutlinedIcon from '@mui/icons-material/AddBoxOutlined';
import UpdateIcon from '@mui/icons-material/Update';
import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';

function App() {

  const [todos, setTodos] = useState([])
  const [text, setText] = useState('')
  var today = new Date()
  var dateTime = today.getDate() + '-' + (today.getMonth() + 1) + '-' + today.getFullYear() + '    ' + today.getHours() + ':' + today.getMinutes() + ':' + today.getSeconds()

  const Add = (e) => {
    e.preventDefault()
    db.collection('TodoApp').add({
      TODO: text,
      TIME: dateTime,
      SERVERTIMESTAMP: FieldValue.serverTimestamp()
    })
      .then(() => {
        setText('')
        alert('Todo added successfully')
      })
      .catch((error) => {
        alert('Error adding todo', error)
      })
  }

I’ve tried to look for similar errors but I can’t find a solution yet.

I can post more of the code if needed. Any help would be greatly appreciated.

After 23 errors the script freezes in the catch block using repairjson module.
Is there a way to clear a cache and reset a limitation somewhere? I tried setting the variable to null but it keeps freezing at that point. The script does not behave the same way on different machines; nodejs does not freeze on my test environment, set up similarly to production.

Here is the code:

const { Client } = require('pg');
const { jsonrepair } = require('jsonrepair')

// Database connection settings
const dbSettings = {
  user: 'postgres',
  password: pw,
  host: 'localhost',
  database: 'db',
  port: 5432, 
};

// Create a new PostgreSQL client
const client = new Client(dbSettings);

async function main() {
  try {
    await client.connect();

    // Fetch rows with broken JSON from the database
    const query = "SELECT jsonresponse FROM brokenjson";
    const result = await client.query(query);
    const rows = result.rows;

    // Iterate through rows, repair JSON, and update data
    for (const row of rows) {
      const { obit_sqn, response } = row;

      try {
        const repairedJSON = jsonrepair(response); // Parse the repaired JSON
        console.log(repairedJSON);
        console.log(`${obit_sqn}`);
      } catch (error) {
        console.log(`Error: ${error.message}`);
      }
    }
  } catch (error) {
    
  } finally {
    await client.end();
  }
}

main();

In my code I’m adding inside all ‘.image-list span’ element p. That’s straight after page loading. On site when you scroll on page adding new ‘.image-list span’ elements. I’m using setInterval function. Every 5 seconds checking elements and if one doesn’t have p then p added. After 3 hours of different trying I don’t make it. In my case only first ‘.image-list span’ working right. Another elements adding new p every 5 sec.
I create p element and added it to body for ‘if (links[i].contains(elementx))’. Previously I use another methods but only that works at least on one element. How to resolve this ?

const para = document.createElement("p");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.body.appendChild(para);
var links = document.querySelectorAll(".image-list span");
var elementx = document.getElementsByTagName("p")[0];
for (i = 0; i < links.length; i++) {
  if (links[i].contains(elementx)) {} else {
    var element = document.createElement("p");
    element.appendChild(document.createTextNode('HHHHHHHH'));
    links[i].insertAdjacentElement('afterbegin', element);
  }

I am trying to display my gists on my website by allowing the user to flip through them using a left and right arrow button. However when the button is clicked it does not change the gist displayed on my website.

This is the code I have in my JavaScript file.

let leftArrowProgram = document.getElementById('left-arrow-program');
let rightArrowProgram = document.getElementById('right-arrow-program');

let programs = ['https://gist.github.com/laurenneoliver/fad062ae77940c38ee82322f0abc63af.js','https://gist.github.com/laurenneoliver/ec55ffa1919e4b5aa92e329dd89a9578.js']

let programTag = document.getElementById('gist-script-tag');

function nextProgram() {
    if (i >= programs.length - 1) {
        return false;
    }
    i++;
    programTag.setAttribute('src', programs[i]);
}
function previousProgram() {
    if (i <= 0) {
        return false;
    }
    i--;
    programTag.setAttribute('src', programs[i]);
} 

rightArrowProgram.onclick = nextProgram;
leftArrowProgram.onclick = previousProgram;

The trip ID should derive its value from the combination of the first three letters of “A/C,” the first three letters of “Captain,” the first three letters of “First Officer,” and the date in the date field.

The resulting ID should resemble something like “STAMK1RH1200923.”

THE TRIP ID SHOULD BE FILLED IN UPON THE BLUR OF THE FIRST OFFICER.

I tried to create a function that gets these values.

function getId(){
  var a = document.getElementById('ac').value
  var a = document.getElementById('captain').value
  var d = document.getElementById('thedate').value
  document.getElementById('tripid').value=a.value+b.value;
}

I need to add an Blank filter in my angularjs filter option. Please suggest how can I add the blank filter to filter the empty cell/fields.
I have tried the below and tried browsing. But nothing worked out as of now. I need to apply the blanks filter for the below field.

{
    headerName: "Dealer Name",
    field: "dealerName",
    tooltipField: 'dealerName',
    filter: 'text',
    menuTabs: ['filterMenuTab'],
    filterParams: {
        suppressAndOrCondition: true,
    },
    width: 175
},

When a label element contains button and span children (all siblings), clicking the span unexpectedly also clicks the first button.

For example, here’s a label that has 2 buttons and 2 spans as direct children, each of which has a single click event that displays an alert:

btn1.addEventListener('click', function() { alert('btn1')})
span1.addEventListener('click', function() { alert('span1')})
btn2.addEventListener('click', function() { alert('btn2')})
span2.addEventListener('click', function() { alert('span2')})

<label>
  <button id="btn1">Button1</button>
  <span id = "span1">Span1</span>
  <button id="btn2">Button2</button>
  <span id = "span2">Span2</span>
</label>

https://jsfiddle.net/uwp8b1o2/

Clicking on any button triggers that button’s click event only (as expected). However:

1. Clicking on the first span also triggers the first button’s click event
2. Clicking on the second span also triggers the click event of the first button (but not the second button or other span)
3. Changing the parent to “span” or “div” gets rid of the unexpected behavior– it only seems to happen when the parent is a label

Tried on:

• Chrome 116.0.5845.140
• Safari 15.6.1

Online documentation of the label element says nothing about its child event propogation differing from that of other elements https://www.w3schools.com/jsref/dom_obj_label.asp

What the heck is going on?

all day I have tried just about everything underneath the sun to get my endpoints to work. I am using React and python, and have incorporated a multitude of flask frameworks to assist in my project. Every time I make a request, I am greeted with the following error:

RegistrationForm.jsx:25 POST http://localhost:3000/register 404 (Not Found)

I have tried enabling CORS app wide through my main.py file but I still receive the error. I have tried hosting on the same port but receive the error again. I have tried using the proxy on the front end but was met with even more errors there. I’m at a complete wit’s end at this point and if anyone could help me I would be so thankful. I have been running the react app through http://localhost:3000 and Flask has been running off http://127.0.0.1:5000.

The three main files of this in question are as follows, main.py;

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from config import Config
from flask_login import LoginManager
from models.users import User

app = Flask(__name__)
app.config.from_object(Config)

db = SQLAlchemy(app)

login_manager = LoginManager()
login_manager.init_app(app)
login_manager.login_view = 'login'

@login_manager.user_loader
def load_user(user_id):
    return User.query.get(int(user_id))

if __name__ == '__main__':
    app.run()

Then I have my routes as such in another file (Have tried moving the routes to the main file, but still no help.)

from flask import request, render_template, redirect, url_for, jsonify
from flask_login import login_user, logout_user, login_required
from werkzeug.security import generate_password_hash, check_password_hash
from models import User
from main import db, app 

@app.route('/register', methods=['POST'])
def register():
    print("Received registration request")
    data = request.json
    username = data['username']
    password = data['password']
    first_name = data['first_name']
    last_name = data['last_name']
    telephone = data.get('telephone')
    address = data.get('address')
    city = data.get('city')
    postal_code = data.get('postal_code')
    country = data.get('country')

    hashed_password = generate_password_hash(password, method='sha256')
    
    new_user = User(
        username=username,
        first_name=first_name,
        last_name=last_name,
        telephone=telephone,
        address=address,
        city=city,
        postal_code=postal_code,
        country=country,
        hashed_password=hashed_password,
        salt=None 
    )
    
    db.session.add(new_user)
    db.session.commit()
    return jsonify(message='Registration successful')

Then finally where the endpoint is getting called is here;

import React, { useState } from 'react';
import Layout from '../../LayoutComp/Layout';
import { connect } from 'react-redux';

function RegistrationForm() {

    const [formData, setFormData] = useState({
        username: '',
        password: '',
        // Add more fields as needed
    });

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData({
            ...formData,
            [name]: value,
        });
    };

    const handleSubmit = async (e) => {
        e.preventDefault();

        try {
            const response = await fetch('/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(formData),
            });

            if (response.ok) {
               

                console.log('Registration successful');
            } else {
                // Registration failed, handle errors
                console.error('Registration failed');
                console.error('Response Status:', response.status);
                console.error('Response Text:', await response.text());
            }
        } catch (error) {
            console.error('Error:', error);
        }
    };

return (

If anyone could even point me in the right direction it would help so much. I don’t know how much longer I can bang my head against this wall

I’m sorry if the title is confusing or misleading. I’ll change it if you think of a better one but I think that’s the culprit. I’m trying to create a .png image from a charts.js chart.

Here is the codce snippet in question

const DSampleChart = () => {
  let ref = useRef(null);

  const downloadImage = useCallback(() => {
    const link = document.createElement("a");
    link.download = "chart.png";
    link.href = ref.current.toBase64Image();
    link.click();
  }, []);

  return (
    <div>
      <button type="button" onClick={downloadImage}>
        Download
      </button>
      <div>
        <WbrChart ref={ref} data={chartonedata} />
      </div>
    </div>
  );
};

It’s complaining about the toBase645Image() but I think that’s because the ref.current is empty. And teh ref is empty because it’s referenced in a function and apparently, you can’t use ref in a function?

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

But I’m not familiar with forwardRef and ended up messing it up more the more I touched it

Here is a sandbox for you to play with. And thanks in advanced

I tried to handle redirect after payment is completed.
Thought once the payment is completed successfully, it should redirect to the one I set up in Adyen.
The configuration I set as below but I’m not sure why it doesn’t no anything after completion.
result value returns resultCode as Authorised
Can someone help me if I missed anything or misconfigured?

const configuration = {
        environment: 'test', // Change to 'live' for the live environment.
        clientKey: 'test_...',
        locale: "en-CA",
        session: {
            id: 'adyenSession-id',
            sessionData: 'adyenSession-sessionData'
        },
        onPaymentCompleted: (result, component) => {
            console.info(result, component);
        },
        onError: (error, component) => {
            console.error(error.name, error.message, error.stack, component);
        },
        paymentMethodsConfiguration: {
            card: {
                hasHolderName: true,
                holderNameRequired: true,
                billingAddressRequired: true
            }
        }
    };

    (async () => {
        const checkout = await AdyenCheckout(configuration);
        const dropinComponent = checkout.create('dropin').mount('#dropin-container');
    })();

Thank you.

the cookies i am sending from my backend to my frontend aren’t stored since i am using CORS. Can someone probably tell me what i need to configure exactly? The solutions i got from other threads aren’t working!

I am sending credentials: “include” in the fetch options, i set the origin and credentials in CORS and for the cookie a chose the options httpOnly, sameSite none and secure.
Can someone help me?

Frontend code:

const  handleLoginRequest = () => {
    var requestData = {
        username: username, 
        password: password
      }
    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: "include",
        body: JSON.stringify(requestData)
    };
    fetch("https://emptychat-backend.onrender.com/login", requestOptions)
    .then(response => {
      if (response.ok) {
        response.json()
        .then(data => {
          auth.signin(data);
          navigate("/home")
      });
      } else {
        response.text()
        .then(data => {
          setToastProps({header: "Oops. Etwas ist schiefgelaufen!", body: data})
          setShowToast(true);
        })
      }     
  })};

Backend code:

app.use(express.json())
app.use(cookieParser())
app.use(cors({
    origin: 'https://bidimdepru.de',
    credentials: true
}));
// Login
app.post(`/login`, async (req, res) => {
  try {
    // Eingaben extrahieren
    const { username, password } = req.body;
    // Eingaben validieren
    if (!(username && password)) {
      return res.status(400).send("Alle Eingaben werden benötigt!");
    }
    // Validieren, ob User existiert
    const user = await User.findOne({ username });
    if (user && (await bcrypt.compare(password, user.password))) {
      // Token erstellen
      const token = jwt.sign(
        { user },
        "my_secret_key",
        {
          expiresIn: "2h",
        }
      );
      res.cookie("token", token, {
        httpOnly: true,
        sameSite: 'none',
        secure: true,
      })
      const parseUser = {
        _id: user._id,
        name: user.name,
        email: user.email,
        username: user.username,
        isAdmin: false,
      };

      return res.status(200).json({auth: true, user: parseUser});
    } else return res.status(400).send("Username/Passwort-Kombination stimmt nicht überein.");
  } catch (err) {
    console.log(err);
  }
});

Responseheader fetch():

HTTP/3 200 OK
date: Wed, 20 Sep 2023 18:01:59 GMT
content-type: application/json; charset=utf-8
cf-ray: 809bfa0e1a1e9134-FRA
cf-cache-status: DYNAMIC
access-control-allow-origin: https://bidimdepru.de
etag: W/"7b-Nu6ENMtN5krrnmAfkNEMIOdPsmQ"
set-cookie: token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7Il9pZCI6IjY1MDhhODEzNWJjZWI5ZDY2YTkxNzExMCIsIm5hbWUiOiJxZHF3ZCIsImVtYWlsIjoicWRxd2RxdyIsInVzZXJuYW1lIjoiQmlkaW0iLCJwYXNzd29yZCI6IiQyYiQxMCQucGFIcWw0TVlCTHlQNS5Nd2wyOTUuRzR3TcwTGVyUGZIY1dUM3lUYWtjaSIsImlzQWRtaW4iOmZhbHNlLCJfX3YiOjB9LCJpYXQiOjE2OTUyMzI5MTksImV4cCI6MTY5NTI0MDExOX0.zx7vFbj70pI9w5ZC0n7e_Qcu5DePkLaUMkz_-L7JGx4; Path=/; HttpOnly; Secure; SameSite=None
vary: Accept-Encoding
access-control-allow-credentials: true
x-powered-by: Express
x-render-origin-server: Render
server: cloudflare
content-encoding: br
alt-svc: h3=":443"; ma=86400

Requestheader fetch():

POST /login HTTP/3
Host: emptychat-backend.onrender.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/117.0
Accept: */*
Accept-Language: de,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate, br
Referer: https://bidimdepru.de/
Content-Type: application/json
Content-Length: 39
Origin: https://bidimdepru.de
Alt-Used: emptychat-backend.onrender.com
Connection: keep-alive
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
TE: trailers

I’m working with spatie/Browsershot to fill a web form. I’m able to get past the first page:

Browsershot::url('https://www.homedepotrebates11percent.com/#/home')
        ->newHeadless()
        ->setNodeBinary('/usr/bin/node')
        ->setNpmBinary('/usr/bin/npm')
        ->setChromePath('/usr/bin/chromium-browser')
        ->waitUntilNetworkIdle()
        ->type('#purchaseDateOnlyText', '09/19/2023)
        ->click('#home-offer-purchasedate-continue2')
        ->delay(1000);

The second page has, what looks like a radio group, and I need to select a specific one before continuing. The code for one of the selects:

<div class="panel panel-default ng-scope sel" ng-repeat="promo in promoSelectCtrl.promotions" ng-click="promoSelectCtrl.select($index)" ng-class="{sel: $index == promoSelectCtrl.selected}" style="">
    <div class="select-text panel-heading">
        <span class="fa fa-check-circle" ng-class="($index == promoSelectCtrl.selected) ? 'fa-check-circle' : 'fa-circle-thin'" aria-hidden="true" style="">
        </span><div id="selectRebate" translate="content.SELECT_SELECT_REBATE_TEXT" class="ng-scope">SELECT THIS REBATE</div></div><div class="panel-body promo-descr">
            <div class="row"><div class="col-md-12">
                <!-- ngIf: !promoSelectCtrl.isDisplayCampaignWebDescription -->
                <p ng-if="!promoSelectCtrl.isDisplayCampaignWebDescription" id="11% Rebate - Valid Only on Purchase Dates 08/28/2023 - 09/24/2023" class="ng-scope">
                    <strong translate="content.PC2_23_16661_NAME" translate-default="11% Rebate - Valid Only on Purchase Dates 08/28/2023 - 09/24/2023" class="ng-scope">
                        11% Rebate - Valid Only on Purchase Dates 08/28/2023 - 09/24/2023
                    </strong>
                </p>
                <!-- end ngIf: !promoSelectCtrl.isDisplayCampaignWebDescription -->
                <!-- ngIf: promoSelectCtrl.isDisplayCampaignWebDescription --><!-- ngIf: !hidePurchaseDates -->
                <p ng-if="!hidePurchaseDates" class="ng-binding ng-scope">Purchase Dates: 08/28/2023 - 09/24/2023</p>
                <!-- end ngIf: !hidePurchaseDates --><!-- ngIf: submitby --><!-- ngRepeat: (key, value) in promo.additionalData -->
            </div>
        </div>
    </div>
</div>

To reproduce:
https://www.homedepotrebates11percent.com/#/home
Date = 09/19/2023
Continue
list of the radio group should be shown on page.

Any idea how I can click on one of these radio buttons(that are not really radio buttons?).

Thanks! Patryk

I’m working on a React application, and I have a CSV file that contains data in a structured format. I want to extract specific columns from this CSV file and display them in a table on my React app. Here’s what the CSV data looks like:

1. Summary,,,,,, Meeting title,TestMeeting,,,,, Attended participants,3,,,,, Start time,"9/18/23, 4:15:08 PM",,,,, End time,"9/18/23, 4:17:41 PM",,,,, Meeting duration,2m 33s,,,,, Average attendance time,2m 9s,,,,, ,,,,,, 2. Participants,,,,,, Name,First Join,Last Leave,In-Meeting Duration,Email,Participant ID (UPN),Role "sdadadi, dsada","9/18/23, 4:15:17 PM","9/18/23, 4:17:38 PM",2m 20s,[email protected],[email protected],Organizer "SSAS, Udfsdf","9/18/23, 4:15:27 PM","9/18/23, 4:17:41 PM",2m 13s,[email protected],[email protected],Presenter "dsfsdsf, fsdfsf","9/18/23, 4:15:45 PM","9/18/23, 4:17:38 PM",1m 53s,[email protected],[email protected],Presenter ,,,,,, .... ....

I specifically want to extract the “Name” and “Email” columns and display them in a React table. How can I achieve this using React and JavaScript?

I’ve already tried using papaparse and changing the array values and aplying filters, but I’m facing issues with this. Any help or guidance on how to correctly parse and display this data in React would be greatly appreciated!

code:

import Papa from 'papaparse';
import React, { useEffect, useState } from 'react';

function Attendance() {
  const [columnArray, setColumn] = useState([]);
  const [data, setData] = useState([]);
  const [empty, setEmpty] = useState(false);

  const handleFile = (event) => {
    const file = event.target.files[0];

    Papa.parse(file, {
      header: true,
      skipEmptyLines: true,
      complete: function (result) {
        const columns = Object.keys(result.data[0]);
        console.log(Object.values(result.data));
        setData(result.data);
        setColumn(columns);
        setEmpty(true);
      },
    });
  };

  return (
    <div className='container my-3'>
      <div className='row'>
        <div className='col-md-12 text-center text-info bg-dark'>
          Attendance report upload
        </div>
        <div className='input-group my-3'>
          <input
            type='file'
            className='form-control'
            id='inputGroupFile04'
            aria-describedby='inputGroupFileAddon04'
            aria-label='Upload'
            accept='.csv.txt, .csv'
            onChange={handleFile}
          />
          <button
            className='btn btn-outline-secondary'
            type='button'
            id='inputGroupFileAddon04'
          >
            Upload
          </button>
        </div>
        {empty && (
          <table className='table table-hover'>
            <thead>
              <tr>
                {columnArray.map((col, i) => (
                  <th key={i}>{col}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {data.map((row, rowIndex) => (
                <tr key={rowIndex}>
                  {columnArray.map((col, colIndex) => (
                    <td key={colIndex}>{row[col]}</td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
       );
     }

export default Attendance;```

we have requirement where we need to connect our html client to connect to different websockets(all on wss) but with different domain to get high frequency data like stock streaming data.
some domains might allow throttling and some domain might not.
i would need some guidelines/best practices around this. specially like what security protocol do i have to implement and such… i am worried about security since we will be going to different domains from browser directly.there is a reason why CORS is there and all rest api should go through same domain.. but why thats not true for websockets?