Category: javascript

I am using PyOtp library to generate 6 digit otp ,the backend I am using is python django and the frontend is react.
My issue is that sometimes(not always) when I generate OTP and click to verify OTP,I enter the correct OTP which is generated but it gives me wrong OTP message and then when I resend OTP,it takes it as correct one.I am not able to figure out that why even after entering the correct OTP ,it is saying me that it is wrong OTP.What could be the issue.I am not using the latest version of PyOTP,could that be an issue or it is something related to time sync.
Kindly help me on this.

Thnakyou

I used the library implemented in API created in python and integrated it in react.

The revised the code from Shawn’s answer to the question below to fill in another hidden field, Bank Fee.

How to find and fill in the hidden currency input field on a Visa exchange rate calculator using Selenium?

The filed I want to fill in.

However, after I revised the figure and performed the click on Calculate Conversion button, I received a ElementNotInteractableException warning.

The warning message

My code:

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.keys import Keys
from time import sleep


driver = webdriver.Chrome()
driver.get('https://usa.visa.com/support/consumer/travel-support/exchange-rate-calculator.html')
wait = WebDriverWait(driver, 30)
accept_button_element = wait.until(EC.element_to_be_clickable((By.XPATH, "//a[text()='Accept']")))
accept_button_element.click()

shadow_root = driver.find_element(By.XPATH, "//dm-calculator").shadow_root

enter_amount = shadow_root.find_element(By.ID, "input_amount_paid")
enter_amount.send_keys("1")

from_dropdown = shadow_root.find_element(By.ID, "autosuggestinput_from")
from_dropdown.click()
shadow_root.find_element(By.ID, "listbox-item-157").click()

to_dropdown = shadow_root.find_element(By.ID, "autosuggestinput_to")
to_dropdown.click()
shadow_root.find_element(By.ID, "listbox-item-0").click()

fee_edit = shadow_root.find_element(By.CLASS_NAME, 'vs-link-cta.vs-calculator-edit-link')
fee_edit.click()

bank_rate = to_dropdown = shadow_root.find_element(By.ID, "input_bank_rate")
bank_rate.send_keys(Keys.CONTROL, 'a')
sleep(2)
bank_rate.send_keys(Keys.BACKSPACE)
bank_rate.send_keys('0')

# clicks on Calculate Conversion button
shadow_root.find_element(By.CLASS_NAME, 'vs-btn.vs-btn-primary').click()

Is there any way to make it work?

I tried to use the mouse action but it didn’t work.

I have made a basic form where is couple of select lists and datepicker field. I’ve made couple of onchange-js in there to update form action url and update value of hidden field called date-end.

My example code: https://jsfiddle.net/5qLxf3b9/

My problem is that onchange-events not working and it not update hidden field called "date-end" value at all. Date-end field value should be updating always when I choose a night-select list some value or I add date-select field (datepicker) a new date. It should update value like this:

Get date from date-select field and plus night-select value = date-end value

E.g. date-select value = 9.6.2023 and night-select value is 2, then date-end value should be 11.6.2023

HTML:

    <form id="search" name="search" method="post" action="hotel1.php" target="_blank">

    <label for="hotel-select"></label>

    <select name="hotel" id="hotel-select">
      <option value="Hotel1">Hotel1</option>
      <option value="Hotel2">Hotel2</option>
    </select>
      
      
    <label for="night-select">
    </label>
      
      
    <select name="nights" id="night-select">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>

    <input type="text" id="date-select" name="startDate" />
    <input value="9.6.2023" id="date-end" name="endDate" type="hidden" />
    </form>

Javascript:

    // Change form action url on change, get value from hotel-select
    document.getElementById('search').hotel.onchange = function() {
    var hotel = this.value;

    if (hotel == "Hotel1") {
        var hotel_url = "hotel1.php"
    } else {
        var hotel_url = "hotel2.php"
    }

       document.getElementById('search').action = hotel_url;
    };


    var dateStartInput = document.getElementById("date-select");
    var nightSelect = document.getElementById("night-select");
    var dateEndInput = document.getElementById("date-end");

    // if night select update hidden date-end field value
    nightSelect.addEventListener("change", function() {
     updateDateEnd();
     //console.log("Done");
    });

    // if date-select (datepicker) update date-end hidden field value
    dateStartInput.addEventListener("change", function() {
     updateDateEnd();
     console.log("Done");
    });

    function updateDateEnd() {
      var selectedDate = dateStartInput.value;
      var nightSelectValue = nightSelect.value;
  
     if (selectedDate && nightSelectValue) {
        var endDate = new Date(selectedDate);
    
        endDate.setDate(endDate.getDate() + parseInt(nightSelectValue, 10));
    
        var formattedEndDate = formatDate(endDate);
        dateEndInput.value = formattedEndDate;
     }
    }


    function formatDate(date) {
      var year = date.getFullYear();
      var month = String(date.getMonth() + 1).padStart(2, "0");
      var day = String(date.getDate()).padStart(2, "0");
      return day + "." + month + "." + year;
    }

we have hosted angular 9 application on IIS . When we browse the application from IIS like below
https://localhost/xaportal
it gives the ” access denied issue -403″

when we try to change the browser URL like https://localhost/xaportal/index.html – it is working fine and load all the components required.

we tried “URL rewriting” concept for angular in web.config. but that doesn’t work. Where we can set the default routing in angular to redirect to index.html.

My nuxt query is returning a block of JSON like this,

{
    "typeHandle": "builderAccordionBlock",
    "data": [
      {
        "title": "Frequently Asked Questions",
        "numberedAccordion": "Grid",
        "accordionBlockBackgroundColour": {
          "class": "block--bg-charcoal",
          "color": [
            "#363636"
          ],
          "label": "Dark Grey",
          "__typename": "accordionBlockBackgroundColour"
        },
        "accordionBlockFullWidth": true,
        "accordionBlockSection": [
          {
            "accordionRowHeader": "Do you offer quotes over the phone?",
            "accordionRowBody": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper tortor sapien, id convallis orci auctor eu. Etiam at risus eu ligula facilisis pellentesque. Aliquam lacinia erat eu sollicitudin aliquam. Donec in convallis ante. Nunc ut vehicula nulla. Nunc vehicula aliquam est ac consectetur. Mauris consectetur lorem eget pulvinar ultrices.</p>",
            "__typename": "accordionBlockSection_accordionRow_BlockType"
          }
         ]
      }
    ]
  }

I do the following in component,

 <div class="accordion__block px-5" :class="accordionBlockBackgroundColour.class">

But get the error,

Cannot read properties of null (reading ‘class’)

I also get the error trying,

<div class="accordion__block px-5" :class="[accordionBlockBackgroundColour.class]">

I have tried computing it,

const backgroundColour = computed(() => { return accordionBlockBackgroundColour.class }

I can see the object is going into the component as a prop I am utterly at a loss why I cannot access it.

If I do,

<div class="accordion__block px-5" :class="[accordionBlockBackgroundColour.class]">

I get

<div class="accordion__block px-5 color label class ___typename">

rendered, something wierd is happening, or I am being totally thick?

I would like to modify the size of the Calendar popup date-time-picker (not the input field)
what kind of syntax should I use in SCSS??

(https://i.stack.imgur.com/HItY1.png)

I have try:

p-calendar {font-size: 0.8rem;} p-calendar .date-picker {height : 200px; }

The code worked when the functions was executed under the same “form” event (for e.g by commenting out signin and logout functions statements when executing register function statement). But when I separate this functions under different form event there is no response.

I have two form with class “signin” and “signout” and a button with class “logout”.
Can someone with experience kindly fix the code cos this is beyond my knowledge. Really appreciate anyone in advance.

 // Import the functions you need from the SDKs you need
 import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-app.js";
 import {
 getAuth,
 createUserWithEmailAndPassword,
signInWithEmailAndPassword,
signOut,
} from "https://www.gstatic.com/firebasejs/9.22.1/firebase-auth.js"; 
import {
getDatabase,
set,
ref,
update, 
} from "https://www.gstatic.com/firebasejs/9.22.1/firebase-database.js";

// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration 
const firebaseConfig = {
apiKey: "AIzaSyBxTyIjvXXCDWNJTI8-sFjJfVP2UJOXdIA",
authDomain: "mbconline-c8ae4.firebaseapp.com",
databaseURL: "https://mbconline-c8ae4-default-rtdb.firebaseio.com",
projectId: "mbconline-c8ae4",
storageBucket: "mbconline-c8ae4.appspot.com",
messagingSenderId: "408267091210",
appId: "1:408267091210:web:c8a1f1eacfd7087b775ef3",
}; 

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth();
const database = getDatabase(app);

onst signIn = document.querySelector(".signin");
const signOut = document.querySelector(".signout");
const logOut = document.querySelector(".logout");

signIn.addEventListener("click", (e) => {
e.preventDefault();
const email = signIn.email.value;
const password = signIn.password.value;

createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
  // Signed in
  const user = userCredential.user;
  // ... user.uid
  set(ref(database, "users/" + user.uid), {
    email: email,
    password: password,
  })
    .then(() => {
      // Data saved successfully!
      alert("User created successfully");
    })
    .catch((error) => {
      // The write failed...
      alert(error);
    });
})
.catch((error) => {
  const errorCode = error.code;
  const errorMessage = error.message;
  // ..
  alert(errorMessage);
});
});

 signOut.addEventListener("click", (e) => {
 e.preventDefault();
const email = signOut.email.value;
const password = signOut.password.value;

 signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
  // Signed in
  const user = userCredential.user;
  // ...
  let lgDate = new Date();
  update(ref(database, "users/" + user.uid), {
    last_login: lgDate,
  })
    .then(() => {
      // Data saved successfully!
      alert("User logged in successfully");
    })
    .catch((error) => {
      // The write failed...
      alert(error);
    });
 })
.catch((error) => {
  const errorCode = error.code;
  const errorMessage = error.message;
  alert(errorMessage);
});
});

logOut.addEventListener("click", (e) => {
e.preventDefault();
signOut(auth)
 .then(() => {
  // Sign-out successful.
  alert("Log out successful");
})
.catch((error) => {
  // An error happened.
  alert("Log out failed" + error);
});
});

I have a string of the following format, how do I convert this string into an array of arrays so I can easily access the items?

data = '[[Bday Party , 2023-05-16], [Bday Party , 2023-05-16], [Bday Party , 2023-05-16], [Bday Party , 2023-05-16], [Bday Party , 2023-05-16], [Bday Party , 2023-05-16]]'

I have tried Array.from(data) but it didn’t work!

TIA

When attempting to determine the length of a JavaScript list, I noticed that it returns the actual length of the list rather than the number of items within the string. Allow me to provide an example. Consider the following list:

<QuerySet [<Genre: Romance>, <Genre: Science Fiction>, <Genre: Fantasy>, <Genre: Mystery>, <Genre: Thriller>, <Genre: Horror>, <Genre: Historical Fiction>, <Genre: Biography>, <Genre: Autobiography>, <Genre: Memoir>, <Genre: Young Adult>, <Genre: Children's>, <Genre: Literary Fiction>, <Genre: Comedy>, <Genre: Business>, <Genre: Travel>, <Genre: Cookbooks>, <Genre: Poetry>, <Genre: Drama>, <Genre: Fairy-tail>]>

In my implementation, I retrieve the list as follows, where ‘genres’ represents the list:

<input type="hidden" id="genres_get" value="{{ genres }}" style="display: none;">

Getting it in Javascript

genres = document.getElementById('genres_get').value;

And trying to print the length

console.log(genres.length)

After executing the code, it incorrectly prints the value 414 instead of the expected length, which is 20.

I am struggling finding the solution in this kind of error “Warning: Undefined array key “CH_essentialN” in C:xampphtdocsEMERGENCYROOMCF4save.php on line 131

Warning: Undefined array key “CH_assymetrical_CE” in C:xampphtdocsEMERGENCYROOMCF4save.php on line 132
” when im sending the form, but the said undefined key is there when i inspect it using chrome Inspect tool. those are hidden input fields generated by this code

“$(function(){

var checkboxes = document.querySelectorAll('input[type="checkbox"]');

checkboxes.forEach(function(checkbox) {
  if (checkbox.id !== 'pssa_others') { // Exclude checkbox with ID 'pss_others'

    var inputField = document.createElement("input");
    inputField.type = "text";
    inputField.name = checkbox.id;
    inputField.value = 0;

    checkbox.insertAdjacentElement('afterend', inputField);
  }
});

});”

This are my html code
”

CHEST/LUNGS

Essentially normal

Asymmetrical chest expansion

”

I tried every thing that i can to solve the problem but i cant solve it anytime soon. What do you is the reason behind this problem?

I want to clear 20 collection from Mongo Db all in one go.Is there any way or through scripts to clear it altogether?

My problem is that I’ve been making a website and I want to change something on mobile. In the header, I have applied Sticky-top class, which covers two small DIV classes which are first and second. And that is perfectly run on a desktop. but I need that when I open that thing on mobile only the First class should stick not the second one. Please help me out of it.

Either my 1 module is not working with any reason (don’t know what is it) or my fetching process of data from json file is not working I don’t know. Help me out to do this.

I have created a background.js file which should read the data from json file and send it to another file where it is going to use.
I have created another file named context.js file which is going to access the specific page to render the data from json file(I think not working properly).

background.js file

chrome.runtime.onConnect.addListener(function (port) {
  if (port.name === "formData") {
    const url = port.sender.url;
    let filePath;

    if (url.includes("https://www.police.rajasthan.gov.in/*")) {
      filePath = "Records.json";
    }else {
      console.log("Error: Unknown URL");
      return;
    }

    fetch(filePath)
      .then((response) => response.json())
      .then((formData) => {
        port.postMessage(formData);
      })
      .catch((error) => {
        console.log("Error in fetching the data:", error);
      });
  }
});

Content.js file
// Connect to the background script
const port = chrome.runtime.connect({ name: "formData" });

// Send a message to request form data
port.postMessage({ action: "getFormData" });

// Listen for messages from the background script
port.onMessage.addListener(function (message) {
  if (message.formData) {
    const ServentUploadForm = document.querySelector("#ContentPlaceHolder1_pnlvisible");
    const ServentID = ServentUploadForm.querySelector("#ContentPlaceHolder1_txtSIDNo");
    const ServentFName = ServentUploadForm.querySelector("#ContentPlaceHolder1_txtSFirstName");
    const ServentLName = ServentUploadForm.querySelector("#ContentPlaceHolder1_txtSLastName");
    const ServentFFName = ServentUploadForm.querySelector("#ContentPlaceHolder1_txtSFirstFName");
    const ServentFLName = ServentUploadForm.querySelector("#ContentPlaceHolder1_txtSLastFName");
    const firstRecord = message.formData[0];
    ServentID.value = firstRecord.id;
    ServentFName.value = firstRecord.SFName;
    ServentLName.value = firstRecord.SLName;
    ServentFFName.value = firstRecord.FFName;
    ServentFLName.value = firstRecord.FLName;
  } else {
    console.log("Error in loading the data");
  }
});

I want to align the image in the center of the screen, while the hamburger and search are on the left most side of the navbar

site-header.tsx

<header className="sticky top-0 z-40 border-b bg-black bg-opacity-40">
      <div className="flex h-16 w-max items-center ">
        <MainNav />
      </div>
</header>

main-nav.tsx

export function MainNav() {
  return (
    <div className="flex flex-wrap items-center justify-center">
      <div className="flex">
        <SideNav />
        <Search href="/" className="cursor-pointer" />
      </div>
      <div className="flex items-center justify-center align-middle flex-grow">
        <Image
          src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Fast_Company_logo.svg/120px-Fast_Company_logo.svg.png?20180515163340"
          alt="Logo"
          width={120}
          height={28}
        />
      </div>
    </div>

I tried aligning items-center, justify-content and flex but I didnt work at all

This example show two output, first output is name because i invoke test function (this.name), second undefine ,why undefine ?

let person={
name:”shubham”,
age:25,
test:function(){
console.log(this.name);
}
}
console.log(person.test());

Output :
shubham,
undefine