Category: javascript

I have a series of PHP API scripts that in almost all cases returns an associative array to the calling app.

PHP:

$returnInfo = array() ;
$returnInfo[] = array("success"=>true,"key1"=>"value1","key2"=>"value2",...) ;

//Then at the end of the API:
sendResponse(200,json_encode($returnInfo)) ;

function sendResponse($status, $body) {
    $status_header = 'HTTP/1.1 ' .$status. ' ' .getStatusCodeMessage($status);
    header($status_header);
    header('Content-type: application/json');
    echo $body;
}

After recently upgrading from PHP 7.3 to 8.2 my app began reporting inconsistent errors when making calls to the PHP API. Most of the time the same API call works just fine, then occasionally it fails. From within the app, the HTTP call checks for response 200 AND if the returned data is an ARRAY or OBJECT. In all failures, my app actually reports 200 Successful response was received. Then, based on if the response.data is an ARRAY or OBJECT then do X or Y.

The app is only occasionally reporting an error when the data is an ARRAY.

function objArray(val,type) {
  //type = 1 = object
  //       2 = array
  if (type == 1) {
    return (!!val) && (val.constructor === Object) ;
  } else if (type == 2) {
    return (!!val) && (val.constructor === Array) ;
  }
}

var baseUrl = "https://api.example.com/apiFile.php" ;
var req = {
  method: 'POST',
  url: baseUrl,
  timeout:httpTimeout,
  headers: headers,
  data: JSON.stringify(dataObj)
}

 return $http(req)
.then(function(response){
  if (response.status == 200 && objArray(response.data,2)) {
     ...
     ... do stuff with response 
     ...
  } else {
    var err = resError(req,response) ;
    err.callBack = "Success" ;
    throw err ;
  }

When app receives data correctly, I then return response.data[0] to the original calling function for the app (and user) to continue on.

But when the throw err ; happens, it calls another api script to send the details of the error to my server. The error captured is (with some other custom messaging):

   status = 200
   statusText = SUCCESS RESPONSE ERROR: OK
   callBack = Success

Because the API is returning a 200 I know the response.status == 200 is true, but then it must mean that objArray(response.data,2) is NOT returning TRUE – causing the else part of the response process to then throw an error.

This only began after upgrading from PHP 7.3 to PHP 8.2. So what has changed…or has gotten more strict and/or less forgiving…in PHP 8.2 that is causing my app to sometimes see the response.data as not an array?

I’m getting these errors when trying to integrate Chakra UI into my React application using Vite.

Uncaught TypeError: sys is undefined
    ChakraProvider provider.js:15

The above error occurred in the <ChakraProvider> component:

ChakraProvider@https://localhost:5173/node_modules/.vite/deps/@chakra-ui_react.js?v=b3e29175:2973:36

This is my App.jsx, error only occurs once I add the ChakraProvider

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { ChakraProvider } from '@chakra-ui/react';
import App from "./App.jsx";
import "./index.css";

createRoot(document.getElementById("root")).render(
  <StrictMode>
      <ChakraProvider>
          <App />
      </ChakraProvider>
  </StrictMode>
);

The rest of my application is just from the Visual Studio React and ASP.NET Core template and behaves without any issues.

I’m quite confused about the behavior of useRouter() in Next.js, specifically with the push and replace methods.

My goal is to update the URL parameters as soon as my input changes.

To achieve this, I revisited the Next.js docs and found an example for setting new searchParams using the useRouter hook like this:

router.push('/?counter=10', undefined, { shallow: true })

The key part here is the shallow option, as I wanted to avoid a full page reload. However, I soon realized that this option has been removed in the Next.js App Router, without any clear replacement. So, I was back to square one without a solution.

Afterward, I came across a section in the Next.js docs that provided an example for updating searchParams like this:

router.push(pathname + '?' + createQueryString('sort', 'asc'))

However, after implementing this, I found several articles and sources saying it’s not recommended to use router for changing URL parameters, as it can trigger a refetch and cause a full reload of the page. You can see this mentioned in the Next.js docs and also in various articles.

Here’s where things got strange: Although the Next.js docs say router.push will cause refetching and reloading, I didn’t observe any of that in my logs. I used a useEffect without a dependency array to check if my Navlinks component would rerender when another component (with the input) was using router.push, but it didn’t:

useEffect(() => {
  console.log("rerender Navlinks");
});

It seemed to work, but the updates to the URL bar were laggy and slow when updating the search parameters. So, even though I couldn’t confirm a full reload, there was definitely something odd happening, which I couldn’t pinpoint.

As an alternative, I tried:

window.history.replaceState(null, "", pathname + '?' + createQueryString('sort', 'asc'));

Interestingly, this was much more responsive in the URL bar and didn’t feel as sluggish. It worked fine, but I don’t understand why this method performs better than router.replace. I couldn’t figure out why router.replace was slower.

Of course, I could have simplified things by using Nuqs, but constantly adding new packages to solve problems doesn’t help in the long run and could slow down the app by increasing bundle size. I wanted to debug this to better understand the root issue, but I’m still unsure why router.replace and router.push felt laggy in the URL bar, even though the input itself was always responsive.

Does anyone have insights on why this is happening or can share best practices for handling this?

Here’s the code for reference:

"use client";

import { useCallback, useEffect, useState } from "react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { Input } from "@/components/ui/input";

export default function Search() {
  const [entries, setEntries] = useState([]);

  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const search = searchParams.get("search") || "";

  const [searchText, setSearchText] = useState(search);

  useEffect(() => {
    console.log("rerender");
  });

  // Get a new searchParams string by merging the current
  // searchParams with a provided key/value pair
  const createQueryString = useCallback(
    (name: string, value: string) => {
      const params = new URLSearchParams(searchParams.toString());
      params.set(name, value);

      return params.toString();
    },
    [searchParams]
  );

  const handleInputChange = (word: string) => {
    const newPath = pathname + "?" + createQueryString("search", word);
    // Next js router
    router.replace(
      newPath,
      undefined
      // { shallow: true,} // This is no longer supported
    );
    // Vanilla JS history API
    window.history.replaceState(null, "", newPath);
    setSearchText(word);
  };

  // API Call on search
  useEffect(() => {
    const awaitFunc = async (value: string) => {
      const data: any = await apiFunction(value);
      if (!data) {
        setEntries([]);
        return;
      }
      setEntries(data);
    };

    if (search) {
      awaitFunc(search);
    } else {
      setEntries([]);
    }
  }, [search]);

  return (
    <div>
      <Input
        value={searchText}
        onChange={(e) => handleInputChange(e.target.value)}
      />
      {JSON.stringify(entries)}
    </div>
  );
}

Wondering how to make this work.

A particular IP address is associated with a particular function. (Note: In this example, I am using short people names instead of IP addresses, but the idea is the same.)

How can I pass the keyname(*) to the called function?

const $ = document.querySelector.bind(document);
const obj = {bob:sayname, ann:sayname, ed:sayhi};

$('input').addEventListener('keyup', readme);
function readme(e){
    console.log(e.target.value);
    if ( e.target.value in obj){
    console.log('got here...');
    obj[e.target.value].call(e.target.value); //<== I want to do THIS
    obj[e.target.value].call('Fred'); //<== but this doesn't work either
  }
}
function sayname(usr){
    console.log(usr);
    console.log('Name: ', usr);
}
function sayhi(usr){
    console.log(usr);
    alert('hi, ' + usr);
}

<input type="text">

(*) Which would be the IP address (being passed to the function) — or, in this example, the human name (Bob, Ann, Ed). Basically, in the func I wish to use that IP address, so I need to pass it into the func.

I have this code that draws an elliptical cylinder, and want to remove the background part and only keep the front half of the elliptical cylinder.. How to go about?

setupEllipticShape() {
    
    // depths
    const yRadiusTop = 0.5; 
    const yRadiusBottom = 0.5;

    // 1.6
    const xRadiusTop = this.BOX_DIMENSIONS.value.topWidth; 
    // 1.2
    const xRadiusBottom = this.BOX_DIMENSIONS.value.bottomWidth;
    // 5.0
    const height = this.BOX_DIMENSIONS.value.height;

    console.log(xRadiusTop)
    console.log(xRadiusBottom)
    console.log(height)

    // Create the top ellipse
    const topEllipse = new THREE.EllipseCurve(0, 0, xRadiusTop, yRadiusTop, 0, 2 * Math.PI, false, 0);
    const topPoints = topEllipse.getPoints(50);

    // Create the bottom ellipse
    const bottomEllipse = new THREE.EllipseCurve(0, 0, xRadiusBottom, yRadiusBottom, 0, 2 * Math.PI, false, 0);
    const bottomPoints = bottomEllipse.getPoints(50);

    // Create vertices for the sides, by connecting top and bottom points
    const vertices = [];
    const uv = []; // UV coordinates for texture mapping
    const segments = topPoints.length;

    for (let i = 0; i < segments; i++) {
        const topPoint = topPoints[i];
        const bottomPoint = bottomPoints[i];

        // Top vertex (mapped to UV Y = 0)
        vertices.push(topPoint.x, height / 2, topPoint.y);
        uv.push(1 - (i / segments), 0); // Inverted X for top

        // Bottom vertex (mapped to UV Y = 1)
        vertices.push(bottomPoint.x, -height / 2, bottomPoint.y);
        uv.push(1 - (i / segments), 1); // Inverted X for bottom
    }

    // Create the faces (triangle indices) by connecting vertices between the top and bottom ellipses
    const indices = [];
    for (let i = 0; i < segments; i++) {
        const topIndex = i * 2;
        const bottomIndex = i * 2 + 1;

        const nextTopIndex = ((i + 1) % segments) * 2;
        const nextBottomIndex = ((i + 1) % segments) * 2 + 1;

        // Triangle 1
        indices.push(topIndex, bottomIndex, nextBottomIndex);

        // Triangle 2
        indices.push(topIndex, nextBottomIndex, nextTopIndex);
    }

    // Create the geometry
    const geometry = new THREE.BufferGeometry();
    geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
    geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uv, 2)); // Set UV coordinates for texture mapping
    geometry.setIndex(indices);

    // Compute normals for proper lighting
    geometry.computeVertexNormals();

    const textureInfo = this.drawConfig.texture;
    let textureImage;

    if(textureInfo.type == 'image') {
        textureImage = this.#texture_loader.load(textureInfo.value);
        textureImage.anisotropy = this.#renderer.capabilities.getMaxAnisotropy();
        textureImage.offset.x = 0;
        textureImage.flipY = false;
    }
    
    // Default to a green filled mesh
    const material = new THREE.MeshStandardMaterial( 
        textureInfo.type == 'color' ? { color: textureInfo.value }:
        textureInfo.type == 'image'? { map: textureImage, side: THREE.DoubleSide }: 
        { color: 0x00ff00 }
    );
    
    this.#shape = new THREE.Mesh(geometry, material);
    this.#shape.opacity = 0.9;

    this.#shape.position.x = this.BOX_DIMENSIONS.value.centerX;
    this.#shape.position.y = this.BOX_DIMENSIONS.value.centerY;

    this.#shape.rotation.x = this.ROTATION.value?.x ?? 0.21;
    this.#shape.rotation.y = this.ROTATION.value?.y ?? 6.9;

    this.#scene.add(this.#shape);
}

Here’s an image showing how the model is displayed:

I wanna simply remove that flat 2D surface in the back of the cylinder? any ideas?

Thank you

I tried using ajax method but I don’t really understand ajax All I want is to get the data from the local storage in my JavaScript file to my PHP file so that I can compare the value to what the value from my database is giving me please help me

javascript code

let pid = localStorage.getItem("pid");
$.ajax({
  type: 'POST',
  url: 'addcomments.php',
  data: pid,
  
});

php code

<?php
if (isset($_POST["com-btn"])) {
$mess = $_POST["comments"];
$postid = $_POST['pid'];
echo "Received PID: $postid";
}
?>

I am working on an assessment web app and I need a way to tell if a student/user tries or is currently sharing the tab with an ongoing assessment or is sharing the screen.

This is to prevent cheating, and I know platforms like Netflix and some other online exam web apps can blackout or notify the page of a screen share or screen record.

I have not been able to find a solution, and I don’t know if I’m not searching correctly.

P.S. We already have checks for fullscreen, tab switch and window blur, but on the off chance that the screen is shared before beginning the assessment, it’s important to know.

Thank you for your help.

I installed typescript and the packages needed:

> npm i babylon
> npm i @babel/core
> npm i @babel/node

file main.ts starts with:

import * as babylon from 'babylon'
import { NodePath } from '@babel/node'

Compiling result:

error TS2307: Cannot find module '@babel/node' or its corresponding type declarations.

I tried to change .tsconfig json

{
   ...,
   "skipLibCheck": true
}

and also added ‘babel-load package (found in Internet)
but tsc still reports this error

I’m making weather forecasting app using JavaScript fetch api. I want to recieve data from processFormat function and use that data in showResults function, but can’t, because for some reason showResults function is being executed earlier than processFormat function

const processFormat = async (range) => {
    let getCityUrl = `http://api.openweathermap.org/geo/1.0/direct?q=${city}&limit=${limit}&appid=${apiKey}`;
    //resultStates.length = 0; 
    fetch(getCityUrl)
    .then((response) => {
        return response.json();
    })
    .then((data) => {
        data.forEach((item) => {
            console.log(item);
            resultStates.push(item.state);
            resultObj[item.state] = {
                'lat': item['lat'],
                'lon': item['lon']
            };
        });
    })
    .catch(rejected => {
        console.log(rejected);
    })
    console.log(resultObj);
};
//...
const showResults = async (range) => {
    await processFormat(range);
    for (let i=0; i<Object.keys(resultObj).length; i++) {
        resultStates.push(Object.keys(resultObj)[i]);
    }
    console.log(`resultStates: ${resultStates}`)
    if (resultStates.length === 0) {
        resultSection.textContent = `Failed to find your city: ${city}. Try another city`;
        setTimeout(() => {
            resultSection.textContent = '';
            clickedSearch = 0;
        }, 5000);
    }
    else {
        //...
    }
};

I tried putting await processFormat(range); in the first line of processFormat function, it didn’t help. I see that the object and the array in output are empty. Why?

I have a problem.I would like to create a flashcard. First I see a word in a certain language and when I press on it, the card should turn round and the word in the other language should be visible.
Everything works so far. But what doesn’t work is my animation. How can I make it so that when I press on the card, it turns round like in reality?

I have the classes .flashcard-front,.flashcard-back classes. However, it does not work.
What do I have to change to make it work?

import React, { useState } from 'react';
import { FaSyncAlt, FaHeart, FaVolumeUp } from 'react-icons/fa';
import { GB, RU } from 'country-flag-icons/react/3x2';

const Flashcard = ({ words }) => {
    const [numWords, setNumWords] = useState('all');
    const [direction, setDirection] = useState('random');
    const [currentWordIndex, setCurrentWordIndex] = useState(0);
    const [flipped, setFlipped] = useState(false);

    words = [
        { en: 'apple', ru: 'яблоко', stress: 'я́блоко', image: 'https://via.placeholder.com/150' },
        { en: 'car', ru: 'машина', stress: 'маши́на', image: 'https://via.placeholder.com/150' },
    ];

    const filteredWords = words.slice(0, numWords === 'all' ? words.length : parseInt(numWords));

    const handleFlip = () => setFlipped(!flipped);

    const getDirection = () => {
        if (direction === 'random') {
            return Math.random() > 0.5 ? 'enToRu' : 'ruToEn';
        }
        return direction;
    };

    const currentDirection = getDirection();
    const currentWord = filteredWords[currentWordIndex];
    const displayWord = flipped
        ? currentDirection === 'enToRu'
            ? currentWord.ru
            : currentWord.en
        : currentDirection === 'enToRu'
            ? currentWord.en
            : currentWord.ru;

    const handleNext = () => {
        setCurrentWordIndex((prevIndex) => (prevIndex + 1) % filteredWords.length);
        setFlipped(false);
    };

    return (
        <div className="p-4 bg-[#F9FBFF] h-screen flex flex-col items-center">
            {/* Step 1: How many words */}
            <h1 className="text-xl font-bold mb-4">How many words do you want to train?</h1>
            <div className="flex space-x-4 mb-6">
                <button
                    onClick={() => setNumWords('all')}
                    className={`px-4 py-2 rounded ${numWords === 'all' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
                >
                    All Words
                </button>
                <button
                    onClick={() => setNumWords('10')}
                    className={`px-4 py-2 rounded ${numWords === '10' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
                >
                    10 Words
                </button>
                <button
                    onClick={() => setNumWords('5')}
                    className={`px-4 py-2 rounded ${numWords === '5' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
                >
                    5 Words
                </button>
            </div>

            {/* Step 2: Choose direction */}
            <h1 className="text-xl font-bold mb-4">Choose translation direction</h1>
            <div className="flex space-x-4 mb-6">
                <button
                    onClick={() => setDirection('enToRu')}
                    className={`px-4 py-2 rounded ${direction === 'enToRu' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
                >
                    <GB className="flag-round w-6 h-6" /> → <RU className="flag-round w-6 h-6" />
                </button>
                <button
                    onClick={() => setDirection('ruToEn')}
                    className={`px-4 py-2 rounded ${direction === 'ruToEn' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
                >
                    <RU className="flag-round w-6 h-6" /> → <GB className="flag-round w-6 h-6" />
                </button>
                <button
                    onClick={() => setDirection('random')}
                    className={`px-4 py-2 rounded ${direction === 'random' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
                >
                    <RU className="flag-round w-6 h-6" /> ↔ <GB className="flag-round w-6 h-6" />
                    Random
                </button>
            </div>

            {/* Flashcard */}
            <div
                className={`relative mr-4 ml-4 bg-white w-80 h-[550px] rounded-lg shadow-lg p-4 cursor-pointer flashcard ${flipped ? 'flipped' : ''}`}
                onClick={handleFlip}
                style={{ perspective: '1000px' }}
            >
                
                <div className="absolute inset-0">
                    <div className="absolute w-full h-full flex flex-col justify-between items-center p-4">
                        {/* Top Icons */}
                        
                        <div className="flex justify-between items-center w-full flashcard-inner">
                            <div>
                                {!flipped ? (
                                    currentDirection === 'enToRu' ? (
                                        <GB className="flag-round w-6 h-6" />
                                    ) : (
                                        <RU className="flag-round w-6 h-6" />
                                    )
                                ) : currentDirection === 'enToRu' ? (
                                    <RU className="flag-round w-6 h-6" />
                                ) : (
                                    <GB className="flag-round w-6 h-6" />
                                )}
                            </div>
                            <div className="flex space-x-2 text-gray-400">
                                <FaVolumeUp className="w-5 h-5 cursor-pointer" />
                                <FaHeart className="w-5 h-5 cursor-pointer" />
                            </div>
                        </div>

                        {/* Word Display */}
                        <div className="flex flex-col items-center justify-center flex-grow">
                            <h1 className="text-3xl font-bold mb-2">{displayWord}</h1>
                            {/* Subtitle (if in Russian) */}
                            {flipped && currentDirection === 'enToRu' && (
                                <p className="text-gray-500 text-lg">{currentWord.stress}</p>
                            )}

                            {/* Image */}
                            <img
                                src={currentWord.image}
                                alt={currentWord.en}
                                className="w-24 h-24 object-contain mt-4"
                            />
                        </div>

                        {/* Flip Icon */}
                        <div className="text-gray-400 absolute bottom-4 right-4">
                            <FaSyncAlt className="w-6 h-6 cursor-pointer" />
                        </div>
                    </div>
                </div>
            </div>

            {/* Step 4: Next Button */}
            <button
                onClick={handleNext}
                className="mt-6 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
            >
                Next
            </button>
        </div>
    );
};

export default Flashcard;

.flashcard {
    width: 250px;
    height: 150px;
    perspective: 1000px; /* Needed to enable 3D effect */
}

.flashcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d; /* Ensures the 3D flip effect */
}

.flipped .flashcard-inner {
    transform: rotateY(180deg); /* Rotation angle when flipped */
}

.flashcard-front,
.flashcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.flashcard-back {
    transform: rotateY(180deg); /* Back side is rotated */
    background-color: #ffffff;
}

.flag-round {
    border-radius: 50%;
    width: 24px;
    height: 24px;
}

I have this method in my controller in Business Applications Studio SAPUI5 but it doesn’t work as expected (I want the file to be attached to the invoice with the provided Objectkey which works perfectly fine with the second function, but when executing the first function, the file will be uploaded and sent to the backend, but i‘m unable to open it (further information below)). I don‘t get any error message when executing the first function, the upload process is successfull, i just can‘t open the file afterwards.

onFileSelected: function (oEvent) {
  var oFile = oEvent.getParameter("files")[0];
  if (oFile) {
    var reader = new FileReader();
    reader.onload = function (e) {
      var binaryContent = e.target.result;            
      var oModel = this.getView().getModel();
                            
      oModel.refreshSecurityToken(function (data, response) {
        var sToken = response.headers['x-csrf-token'];
        var sObjectKey = "Placeholder";
        var sObjectType = "BUS2081";
        var sFileName = oFile.name;
        var sSlug = btoa(sFileName);
        var sContentType = oFile.type;
                
        // Binary content as payload
        var oPayload = binaryContent;
                
        oModel.create("/OriginalContentSet", oPayload, {
          headers: {
            "x-csrf-token": sToken,
            "Slug": sSlug,
            "Objectkey": sObjectKey,
            "Objecttype": sObjectType,
          },
          success: function (data) {
            MessageToast.show("Success");
          },
          error: function (oError) {
            MessageToast.show("Error");
          }
        });
      }.bind(this), function () {
        MessageToast.show("Error with the CSRF Token");
      });
    }.bind(this);
    reader.readAsArrayBuffer(oFile); // Read file as binary ArrayBuffer (no Base64 encoding)
  } else {
    MessageToast.show("No file selected");
  }
}

I am a 100% sure, that the variables like Slug, Contenttype, token etc. are correct (I´ve replaced some variables with a Placeholder, but that doesn’t matter, I just did this for this questions because of privacy reasons). I also have another method, that works perfectly fine, but in that method I’ve used Ajax instead of oModel.create. Now I want to do the same, but with oModel.create, but it doesn’t work. The file is uploaded correctly, but when trying to open it it tells me that this file can’t be opened and that “It may be damaged or in a format that Preview does not recognize.” … I don’t get an error during the upload process (sometimes I get “no handler for data”, but I only got that when trying out different solutions…with the provided code I don’t get any error). I want the file to be attached to the invoice with the provided Objectkey, which works with both methods, but only the Ajax method also allows me to open the file after uploading it. here’s the working method with Ajax as comparison:

onFileSelected: function (oEvent) {
  var oFile = oEvent.getParameter("files")[0];
  if (oFile) {
    var reader = new FileReader();
    reader.onload = function (e) {
      var binaryContent = e.target.result;            
      var oModel = this.getView().getModel();
                            
      oModel.refreshSecurityToken(function (data, response) {
        var sToken = response.headers['x-csrf-token'];
        var sObjectKey = "Placeholder";
        var sObjectType = "BUS2081";
        var sFileName = oFile.name;
        var sSlug = btoa(sFileName);
        var sContentType = oFile.type;
                
        $.ajax({
          url: "placeholder/OriginalContentSet",
          type: "POST",
          data: binaryContent,
          processData: false, 
          contentType: sContentType,
          headers: {
            "x-csrf-token": sToken,
            "Slug": sSlug,
            "Objectkey": sObjectKey,
            "Objecttype": sObjectType
          },
          success: function (data) {
            MessageToast.show("Success");
          },
          error: function (oError) {
            MessageToast.show("Error");
          }
        });
      }.bind(this), function () {
        MessageToast.show("Error.");
      });
    }.bind(this);
    reader.readAsArrayBuffer(oFile); // Read file as binary ArrayBuffer (no Base64 encoding)
  } else {
    MessageToast.show("No file selected");
  }
}

I’ve tried changing the code a little bit, like creating a payload object with also the filename and content type in it instead of just saving the binary content into the payload variable, as well as moving variables from the payload object inside the header and the other way round, but the result is always the same.

I try to create my own calculator in HTML , CSS and JavaScript.

General everything working fine in operations but as usuall there is always but…

calculator allowed user to do multiple operations one next to another instead of replaced previous operation like (45++++++—–) , also DEL buttom not really work as i expected .

DEL should deleted last character from calculator but instead of this just appear information DEL on input .

can someone please help me find issue and why is not work ?

i think issue can be in array from key which i used in code but how to fix it ?

additional option if someon is able to support me is … how to implament in this calculator also option to allowed user used both buttom and also keyboard to taped in this calculator numbers/ operations and when user press enter make this equal to result and result to appear in input?
i try do deal with this but i dont have idea even how to do this.

can someone please give me example and small tutorial how to do this few thinks ?

i read few advertising and previous question, also i try implamented this in my issue but this simply not want to cooperate in my case .

i would really appreciate if someon can help me . i am on my beginning travel with JavaScript and i still leari from scratch .

To prevent multiple operations one next to another i create variable lastValue

 let lastValue = display.innerHTML.substring(display.innerHTML.length,
      display.innerHTML.length-1)

for correct functionality Del i done this code :

 else if (e.target.innerHTML === "DEL"){
      result.innerHTML = result.innerHTML.substring(0, result.innerHTML.length-1);

but from some point is not work as it should .

my all code is :
html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Essential Calculator</title>
    <link rel="stylesheet" href="styles.css" />
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
      rel="stylesheet"
    />
    <script src="./script.js" defer></script>
  </head>
  
  <body>
    
    <div class="siteBody">
    <div class="calculator">
      
      <input id="display" type="text" onkeydown="return /[0-9+*-/=]/i.test(event.key)">>
      <div class="keys">
        <button class="key key_operation">+</button>
        <button class="key key_operation">-</button>
        <button class="key key_operation">*</button>
        <button class="key key_operation">/</button>
        <button class="key key_number">1</button>
        <button class="key key_number">2</button>
        <button class="key key_number">3</button>
        <button class="key key_operation">**</button>
        <button class="key key_number">4</button>
        <button class="key key_number">5</button>
        <button class="key key_number">6</button>
        <button class="key key_operation">.</button>
        <button class="key key_number">7</button>
        <button class="key key_number">8</button>
        <button class="key key_number">9</button>
        <button class="clear key_operation">C</button>
        <button class="del  key key_operation">DEL</button>
        <button class="key key_number">0</button>
        <button class="result key key_operation">=</button>
      </div>
    </div>
  </div>
  </body>
</html>

JavaScript code possible this is the issue :

let display = document.getElementById("display");
let key = document.querySelectorAll("button");
let result = "";

let clear = document.getElementsByClassName("clear");
let arr = Array.from(key);

arr.forEach((button) => {
  button.addEventListener("click", (i) => {
    let lastValue = display.innerHTML.substring(display.innerHTML.length,
      display.innerHTML.length-1)
    if (i.target.innerHTML == "=") {
      result = eval(result);
      display.value = result;
    } else if (i.target.innerHTML == "C") {
      (result = ""), (display.value = result);
    } else if(result += i.target.innerHTML) {display.value = result;}

    else if (e.target.innerHTML === "DEL"){
      result.innerHTML = result.innerHTML.substring(0, result.innerHTML.length-1);/*here after this code last digit character shouls be removed from calculation */
  if (result.innerHTML.length==0 ){result.innerHTML= "";/*hera when press del and nothing else left , should appear 0 */

  }
  }
  else {
    if (!isNaN(lastValue)){
    result.innerHTML += e.target.innerHTML;/*this code should replaced previous operation and not allowe tape by user multiple operators like ++++ */
}}

  });
});

css

body {
  margin: 0px;
  padding: 0px;
  display: block;
  
  }



.siteBody{
  display: flex;
  align-items: center;
  justify-content: center;
}

.calculator {
  font-family: "Times New Roman", Times, serif, "Trebuchet MS",
  "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
  border-radius: 20px;
  overflow: hidden;
  max-width: 500px;
  min-height: 400px;
 
}
.keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height:600px;
  gap: 10px;
  padding: 25px;

}

.result {
  width:100%;
  height: 100%;
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 4;
  grid-row-end: 6;
  border-radius: 15%;
}

.del {
  font-size: 25px;
  overflow:hidden;
}

.clear{

  border-radius: 20%;
}

#display {
width: 100%;
margin-right: 10px;
padding: 30px;
color: rgb(2, 2, 2);
background-color: rgb(197, 207, 207);
opacity: 0.5;
font-size: 5rem;
text-align: left;
border: none;
}

button {
width: 100px;
height: 100px;
gap: 10px;
font-size: 3rem;
cursor: pointer;
border-radius: 25%;
font-weight: bold;
font-style: italic;
color: antiquewhite;
background-color: rgb(37, 37, 51);
}

button:hover {
  background-color: #6d5a40;
}

button:active {
  background-color: rgb(35, 35, 54);
}

.key_operation {
  background-color: rgb(196, 140, 35);
}

I have a component that I want to create a slot for v-combobox because I want to show the dropdown items as a custom style section ,

      <v-combobox
            v-model="select"
            v-model:search="search"
            :items='companyList'
            item-title='company_name'
            item-value='id'
            density="compact"
            label="start chat with related companies"
            variant="outlined"
            bg-color='navbar'
            hide-details
            single-line
            @input="startConversation"
          >
            <template #item="{ index, props, item }">
              <v-list-item v-bind="props" :key="index" @click="createRoom(item)">
                <div class='flex flex-col gap-y-1'>
                  <!-- Company Name -->
                  <span>{{ item.company_name }}</span>

                  <!-- Staff Names (Name and Last Name) -->
                  <div v-if="item.staff && item.staff.length">
          <span v-for="(staffMember, i) in item.staff" :key="i">
            {{ staffMember.name }} {{ staffMember.last_name }}
          </span>
                  </div>
                  <!-- Fallback if no staff -->
                  <div v-else>
                    <span>No staff available</span>
                  </div>
                </div>
              </v-list-item>
            </template>
          </v-combobox>

I want to show slots as a custom template in dropdown when I’m searching in v-combobox, My data is like :

[
    {
        "id": 2,
        "company_name": "company name",
        "staff": [
            {
                "id": 1,
                "name": "name1",
                "last_name": "lastname1",
                "email": "[email protected]",
                "avatar": "https://test.com",
                "position": "ceo",
                "languages": [],
                "phone_number": ""
            },
            {
                "id": 2,
                "name": "name2",
                "last_name": "lastname2",
                "email": "[email protected]",
                "avatar": "https://test.com",
                "position": "ceo",
                "languages": [],
                "phone_number": ""
            },
            {
                "id": 3,
                "name": "name3",
                "last_name": "lastname3",
                "email": "[email protected]",
                "avatar": "https://test.com",
                "position": "ceo",
                "languages": [],
                "phone_number": ""
            }
        ],
        "logo": "logo address"
    }
]

How can I show a slot for each one of this company name in dropdown like this?

imagine this in dropdown:

company name is similar for each lane and also the avatar but the staff name and last name should be different under each line ,
I used my code and I just see the company name only how can I render the staff names and last names too ?

I have a table including some parameters that their values will be completed in 23 days.
I need a line chart for the values of row3(Comp Temp) and row6(Air Meas).

My problem is that everything is good but if I insert values for row4, the chart of row 3 will messed up and if I insert values for row 7, it will happen to chart of row6!!

I tried this script at the Extensions of Google sheet:

function createCompTempLineChart(sheet) {
  // Define the range for Comp Temp (Row 3), starting at Column B (Column 2)
  var startColumn = 2; // Column B
  var lastColumn = sheet.getLastColumn(); // Find the last column with data

  // Set empty or zero values in other rows to prevent chart from considering them
  for (var col = startColumn; col <= lastColumn; col++) {
    sheet.getRange(4, col).setValue(''); // Empty Row 4
    sheet.getRange(5, col).setValue(''); // Empty Row 5
    // You can set additional rows to '' or 0 if needed to ensure no data influences the chart
  }

  // Explicitly restrict the range to Row 3 only (ignore other rows)
  var compTempRange = sheet.getRange(3, startColumn, 1, lastColumn - startColumn + 1); // Only Row 3

  // Create or update the Comp Temp chart
  var chart = sheet.newChart()
    .setChartType(Charts.ChartType.LINE) // Set chart type to Line Chart
    .addRange(compTempRange) // Only use Row 3 data
    .setTransposeRowsAndColumns(true) // Treat Row 3 as series
    .setPosition(30, 5, 0, 0) // Adjust position for the chart
    .setOption('title', 'Comp Temp (Row 3)') // Title for the Comp Temp chart
    .build();

  sheet.insertChart(chart); // Insert the Comp Temp chart
}

function createAirMeasLineChart(sheet) {
  // Define the range for Air Meas (Row 6), starting at Column B (Column 2)
  var startColumn = 2; // Column B
  var lastColumn = sheet.getLastColumn(); // Find the last column with data

  // Set empty or zero values in other rows to prevent chart from considering them
  for (var col = startColumn; col <= lastColumn; col++) {
    sheet.getRange(3, col).setValue(''); // Empty Row 3 to prevent influence in this chart
    sheet.getRange(4, col).setValue(''); // Empty Row 4
    sheet.getRange(5, col).setValue(''); // Empty Row 5
    // You can set additional rows to '' or 0 if needed
  }

  // Explicitly restrict the range to Row 6 only (ignore other rows)
  var airMeasRange = sheet.getRange(6, startColumn, 1, lastColumn - startColumn + 1); // Only Row 6

  // Create or update the Air Meas chart
  var chart = sheet.newChart()
    .setChartType(Charts.ChartType.LINE) // Set chart type to Line Chart
    .addRange(airMeasRange) // Only use Row 6 data
    .setTransposeRowsAndColumns(true) // Treat Row 6 as series
    .setPosition(50, 5, 0, 0) // Adjust position for the chart
    .setOption('title', 'Air Meas (Row 6)') // Title for the Air Meas chart
    .build();

  sheet.insertChart(chart); // Insert the Air Meas chart
}

Within my solution, I have two different templates set up for my table, one for non-mobile (standard table view) and one for mobile (grid view). Within this table and available on both view types, I have a Q-Input field for users to use Quasars Date-Time input. The issue is, when attempting to use the Date-Time input on a mobile device, both Apple and Android, none of the logic I have in place works. Though, on my non-mobile view, using it on a desktop, all works as expected. I am even having instances of my other inputs completely breaking when using the application on a mobile device. Could someone skim through my code and see where I’m making a mistake? Thinking it may be an issue with using #items=”props” for the cards and #body=”props”.

<q-card-section>
          <q-table
            bordered
            title=""
            :rows="rackPrices"
            :columns="columns"
            class="text-center"
            dense
            :row-key="(row: any, index: any) => getRowKey(row, index)"
            :grid="$q.screen.lt.md"
            :rows-per-page-options="[5, 10, 15, 0]"
          >
            <template #header="props">
              <q-tr :props="props">
                <q-th auto-width />
                <q-th v-for="col in props.cols" :key="col.name" :props="props">
                  {{ col.label }}
                </q-th>
              </q-tr>
            </template>

            <template #item="props">
              <!-- mobile cards -->
              <div
                class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
              >
                <q-card :class="props.selected ? 'bg-grey-2' : ''">
                  <q-list dense>
                    <q-btn
                      size="sm"
                      color="primary"
                      round
                      dense
                      class="q-ma-md"
                      :icon="props.expand ? 'remove' : 'add'"
                      @click="toggleExpand(props)"
                    />
                    <q-item>
                      <q-item-section>
                        <q-item-label class="text-left"
                          ></q-item-label
                        >
                      </q-item-section>
                      <q-item-section side>
                        <q-item-label caption>{{
                          props.row.
                        }}</q-item-label>
                      </q-item-section>
                    </q-item>

                    <q-item>
                      <q-item-section>
                        <q-item-label class="text-left"
                          >Product Description</q-item-label
                        >
                      </q-item-section>
                      <q-item-section side>
                        <q-item-label caption>{{
                          props.row.productDescription
                        }}</q-item-label>
                      </q-item-section>
                    </q-item>

                    <q-item>
                      <q-item-section>
                        <q-item-label class="text-left"
                          >Current Effective Date</q-item-label
                        >
                      </q-item-section>
                      <q-item-section side>
                        <q-item-label caption>{{
                          formatDisplayDateTime(props.row.currentEffectiveDate)
                        }}</q-item-label>
                      </q-item-section>
                    </q-item>

                    <q-item>
                      <q-item-section>
                        <q-item-label class="text-left"
                          >Current Price</q-item-label
                        >
                      </q-item-section>
                      <q-item-section side>
                        <q-item-label caption>{{
                          props.row.currentEffectivePrice
                        }}</q-item-label>
                      </q-item-section>
                    </q-item>

                    <q-item>
                      <q-item-section>
                        <q-input
                          v-model.number="props.row.adjustment"
                          label="Adjustment"
                          input-class="text-center"
                          dense
                          borderless
                          :input="
                            handleAdjustmentChange(
                              props.row,
                              props.row.adjustment
                            )
                          "
                          @keydown="onKeyDownAllowDecimalInput"
                          @blur="ensureNonEmpty(props.row, 'adjustment')"
                          @focus="storeOriginalValue(props.row, 'adjustment')"
                        />
                      </q-item-section>
                    </q-item>

                    <q-item>
                      <q-item-section>
                        <q-input
                          v-model.number="props.row.price"
                          label="Next Price"
                          input-class="text-center"
                          dense
                          borderless
                          :input="handlePriceChange(props.row, props.row.price)"
                          @keydown="onKeyDownAllowDecimalInput"
                          @blur="ensureNonEmpty(props.row, 'price')"
                          @focus="storeOriginalValue(props.row, 'price')"
                        />
                      </q-item-section>
                    </q-item>

                    <q-item>
                      <q-item-section>
                        <q-input
                          v-model="props.row.date"
                          label="Next Effective Date"
                          filled
                          dense
                          :rules="dateRules"
                          :value="props.row.date"
                        >
                          <template v-slot:prepend>
                            <q-icon name="event" class="cursor-pointer">
                              <q-popup-proxy
                                cover
                                transition-show="scale"
                                transition-hide="scale"
                              >
                                <q-date
                                  v-model="props.row.date"
                                  mask="MM-DD-YYYY h:mm A"
                                >
                                  <q-btn
                                    v-close-popup
                                    label="Close"
                                    color="blue"
                                    flat
                                  />
                                </q-date>
                              </q-popup-proxy>
                            </q-icon>
                          </template>
                          <template v-slot:append>
                            <q-icon name="access_time" class="cursor-pointer">
                              <q-popup-proxy
                                cover
                                transition-show="scale"
                                transition-hide="scale"
                              >
                                <q-time
                                  v-model="props.row.date"
                                  format12h
                                  mask="MM-DD-YYYY h:mm A"
                                >
                                  <div class="row items-center justify-end">
                                    <q-btn
                                      v-close-popup
                                      label="Close"
                                      color="blue"
                                      flat
                                    />
                                  </div>
                                </q-time>
                              </q-popup-proxy>
                            </q-icon>
                          </template>
                        </q-input>
                      </q-item-section>
                    </q-item>
                  </q-list>

                  <q-list dense class="q-pa-xs q-mb-md">
                    <q-card v-show="props.expand" class="q-ma-md q-mb-lg">
                      <q-card-section class="text-center text-h6">
                        
                      </q-card-section>
                      <q-list dense separator bordered>
                        <q-item
                          v-for="(row, index) in priceHistoryMap[
                            `${props.row.bolCode}-${props.row.}`
                          ] || []"
                          :key="getHistoryRowKey(row, index)"
                        >
                          <q-item-section>
                            <q-item-label class="q-mt-md text-left">
                              Effective Date
                            </q-item-label>
                            <q-item-label class="q-mt-md text-left">
                              Price
                            </q-item-label>
                            <q-item-label class="q-mt-md text-left">
                              Created On
                            </q-item-label>
                          </q-item-section>
                          <q-item-section side>
                            <q-item-label caption>
                              <q-item-label class="q-mt-md text-right">
                                {{
                                  formatDisplayDateTime(row.effectiveDateTime)
                                }}
                              </q-item-label>
                              <q-item-label class="q-mt-md text-right">
                                {{ formatPrice(row.price) }}
                              </q-item-label>
                              <q-item-label class="q-mt-md text-right">
                                {{ formatDisplayDateTime(row.createDateTime) }}
                              </q-item-label>
                            </q-item-label>
                          </q-item-section>
                        </q-item>
                      </q-list>
                    </q-card>
                  </q-list>
                </q-card>
              </div>
            </template>


<!--Normal Table View -->
            <template #body="props">
              <q-tr :props="props">
                <q-td auto-width>
                  <q-btn
                    size="sm"
                    round
                    dense
                    color="accent"
                    @click="toggleExpand(props)"
                    :icon="props.expand ? 'remove' : 'add'"
                  />
                </q-td>
                <q-td v-for="col in props.cols" :key="col.name" :props="props">
                  <span v-if="col.name === 'currentEffectiveDate'">
                    {{ formatDisplayDateTime(props.row[col.name]) }}
                  </span>
                  <q-input
                    v-if="col.name === 'adjustment'"
                    v-model.number="props.row.adjustment"
                    input-class="text-center"
                    dense
                    borderless
                    :input="
                      handleAdjustmentChange(props.row, props.row.adjustment)
                    "
                    @keydown="onKeyDownAllowDecimalInput"
                    @blur="ensureNonEmpty(props.row, 'adjustment')"
                    @focus="storeOriginalValue(props.row, 'adjustment')"
                  />
                  <q-input
                    v-if="col.name === 'price'"
                    v-model.number="props.row.price"
                    input-class="text-center"
                    dense
                    borderless
                    :input="handlePriceChange(props.row, props.row.price)"
                    @keydown="onKeyDownAllowDecimalInput"
                    @blur="ensureNonEmpty(props.row, 'price')"
                    @focus="storeOriginalValue(props.row, 'price')"
                  />
                  <q-input
                    v-if="col.name === 'date'"
                    v-model="props.row.date"
                    filled
                    dense
                    :rules="dateRules"
                    :value="props.row.date"
                  >
                    <template v-slot:prepend>
                      <q-icon name="event" class="cursor-pointer">
                        <q-popup-proxy
                          cover
                          transition-show="scale"
                          transition-hide="scale"
                        >
                          <q-date
                            v-model="props.row.date"
                            minimal
                            mask="MM-DD-YYYY h:mm A"
                          >
                            <q-btn
                              v-close-popup
                              label="Close"
                              color="blue"
                              flat
                            />
                          </q-date>
                        </q-popup-proxy>
                      </q-icon>
                    </template>
                    <template v-slot:append>
                      <q-icon name="access_time" class="cursor-pointer">
                        <q-popup-proxy
                          cover
                          transition-show="scale"
                          transition-hide="scale"
                        >
                          <q-time
                            v-model="props.row.date"
                            mask="MM-DD-YYYY h:mm A"
                            format12h
                          >
                            <div class="row items-center justify-end">
                              <q-btn
                                v-close-popup
                                label="Close"
                                color="blue"
                                flat
                              />
                            </div>
                          </q-time>
                        </q-popup-proxy>
                      </q-icon>
                    </template>
                  </q-input>

                  <span
                    v-else-if="
                      col.name !== 'adjustment' &&
                      col.name !== 'price' &&
                      col.name !== 'currentEffectiveDate' &&
                      col.name !== 'date'
                    "
                  >
                    {{ props.row[col.name] }}
                  </span>
                </q-td>
              </q-tr>
              <q-tr v-show="props.expand" :props="props">
                <q-td colspan="100%">
                  <div class="text-center">
                    <q-card>
                      <q-table
                        :rows="
                          priceHistoryMap[
                            `${props.row.}-${props.row.}`
                          ] || []
                        "
                        :columns="historyColumns"
                        title="Price Entry History"
                        bordered
                        dense
                        class="text-center"
                        :rows-per-page-options="[5, 0]"
                        :row-key="(row: any, index: any) => getHistoryRowKey(row, index)"
                      >
                        <template v-slot:header="props">
                          <q-tr :props="props">
                            <q-th
                              v-for="col in props.cols"
                              :key="col.name"
                              :props="props"
                            >
                              {{ col.label }}
                            </q-th>
                          </q-tr>
                        </template>

                        <template v-slot:body="props">
                          <q-tr :props="props">
                            <q-td
                              v-for="col in props.cols"
                              :key="col.name"
                              :props="props"
                            >
                              <span
                                v-if="
                                  col.name === 'effectiveDateTime' ||
                                  col.name === 'createDateTime'
                                "
                              >
                                {{ formatDisplayDateTime(props.row[col.name]) }}
                              </span>
                              <span v-else-if="col.name === 'price'">
                                {{ formatPrice(props.row[col.name]) }}
                              </span>
                              <span v-else>
                                {{ props.row[col.name] }}
                              </span>
                            </q-td>
                          </q-tr>
                        </template>
                      </q-table>
                    </q-card>
                  </div>
                </q-td>
              </q-tr>
            </template>
          </q-table>
        </q-card-section>```


I've tried going in and ensuring all my inputs match between normal layout and mobile cards, though issue persists. Additionally, this seems to be a fairly recent issue. Given that our QA tests solution frequently and did not notice any bugs, up until this week.