Category: javascript

I have a primevue Select that accepts a key value pair for the label/value:

       <FloatLabel variant="on">
          <Select
              id="edit-array"
              v-model="formData.arrayChoice"
              :options="optionsArray"
              optionLabel="label"
              optionValue="value"
              dropdown
              fluid
          />
          <label for="edit-array">Select Option</label>
        </FloatLabel>

// form data that is set on page load from the DB in another spot in the code
const formData = ref({
  arrayChoice: '',
  etc
})

const optionsArray = computed(() => {
  return options.map((op) => ({
        value: op.value,
        label: op.label
      })
  )
})

This properly displays the options when I click the dropdown and it correctly sets the value when the associated label is chosen, however the previously set option isn’t displayed when the form first loads.

formData.arrayChoice is analogous to optionsArray‘s value so I was expecting the label that’s selected to match the one associated with the value but it never does, it’s just a blank dropdown until something is selected. What am I missing?

I did also confirm that formData.arrayChoice is correctly set on page load (as the dropdown value)

I’m using NextJs with shadcn and would like to highlight the active link. My index page contains some divs with anchor tags so there are several routes

• /
• /#section-1
• /#section-2
• …

I created a link component that should check if there is an exact match

"use client";

import clsx from "clsx";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";

interface Props {
    href: string;
    title: string;
}

export default function NavigationLink({ href, title }: Props) {
    const pathname = usePathname();
    const [hash, setHash] = useState("");

    useEffect(() => {
        const updateHash = () => setHash(window.location.hash);
        updateHash();
        window.addEventListener("hashchange", updateHash);
        return () => window.removeEventListener("hashchange", updateHash);
    }, []);

    const [basePath, anchor] = href.split("#");
    const isSamePath = pathname === basePath;
    const isSameAnchor = anchor ? hash === `#${anchor}` : hash === "";
    const isActive = isSamePath && isSameAnchor;

    return (
        <Link
            href={href}
            aria-current={isActive ? "page" : undefined}
            className={clsx(
                "text-sm transition-colors duration-300",
                isActive
                    ? "leading-none font-medium"
                    : "not-hover:text-muted-foreground",
            )}
        >
            {title}
        </Link>
    );
}

Unfortunately this is not 100% correct yet. When visiting the app on /#section-1 the highlighting works. But when starting on / and then navigating to /#section-1 the index route remains highlighted and the section route won’t be highlighted. So I guess there is no trigger for a rerender when the hash changes.

Do you have any ideas how to fix this behaviour?

If there is an already builtin NextJs solution for this please let me know!

I’m working in a large private scope (~1300 lines) that contains many variables and helper functions defined with let.

When I move code around, I sometimes run into errors like:

Cannot access 'x' before initialization

because a function or variable is referenced before it’s declared.

Is there a refactoring command, VSCode feature, or extension that can automatically reorder function/variable declarations according to call order, so these initialization issues are avoided?

I am using the Supabase JavaScript client in a Next.js project. User registration completes successfully, and the new user appears in the auth.users table. However, when I attempt to log in with the same credentials, the API consistently returns the error AuthApiError: Invalid login credentials.

Here is the login code:

const { data, error } = await supabase.auth.signInWithPassword({
  email: "[email protected]",
  password: "MyPassword123"
});

The email and password are copied directly from registration, so I am certain they match. I also confirmed the user record exists in the database. Row Level Security is enabled, but as far as I understand, it should not interfere with authentication.

What additional configuration or common mistakes could cause Supabase to reject correct credentials, and how should I troubleshoot this situation?

After registering a user with email and password, calling auth.signInWithPassword({ email, password }) should create a session and return the user.

create java gui program that accepts sales persons name and two sales amounts only and displays the name and his total sales amount via a message box

identify and expand. it should be detailed step by step. will await a nice answer.this question is been asked in school.

As Primevue.Tooltip is kind of broken I’m trying to implement a simple tooltip component using PrimeVue.Popover.

My problem happens when I set a timer with setTimeout; Popover.prototype.show doesn’t work in the callback function:

const {createApp, ref, nextTick } = Vue;

const App = createApp({
  template: '#app-template',
  components: {
    'p-button': PrimeVue.Button,
    'p-popover': PrimeVue.Popover,
  },
  props: {},
  setup(props) {
    const tooltip = ref();
    const delay = 500; // milliseconds
    let timeoutID = null;

    const closeTooltip = () => {
      if (timeoutID != null) {
        clearTimeout(timeoutID);
        timeoutID = null;
        tooltip.value.hide();
      }
    };
    const openTooltip = (event) => {
      closeTooltip();
      timeoutID = setTimeout(() => tooltip.value.show(event), delay);
    };
    return { tooltip, closeTooltip, openTooltip };
  },
},{ /* App setup props */ });

App.use(PrimeVue.Config, { theme: { preset: PrimeUIX.Themes.Nora } });
App.mount('#app-container');

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/primevue/umd/primevue.min.js"></script>
<script src="https://unpkg.com/@primeuix/themes/umd/Nora.js"></script>

<body style="margin: 1rem; background: #DDD;">

  <div id="app-container"></div>
  
  <template id="app-template">

    <p-button
      @pointerenter="openTooltip"
      @pointerleave="closeTooltip"
    >Hover me 0.5 seconds!</p-button>

    <p-popover ref="tooltip">
      <div style="white-space: preserve nowrap;">Tooltip content</div>
    </p-popover>

  </template>

</body>

When I replace timeoutID = setTimeout(() => tooltip.value.show(event), delay); with:

timeoutID = 1;
tooltip.value.show(event); // or: nextTick(() => tooltip.value.show(event));

Then the tooltip shows, but without any delay; which isn’t what I want to achieve…

What’s happening? How do I fix it?

I’m having trouble integrating a weather API into Appsheets. I want the user to enter their location and then the API returns the weather data. I have a locations table where it is ref in the temperature table to save the user time when typing and avoid errors.

I tried using appscript but I don’t think they are the right way around.

I’m testing JavaScript scoping in Chrome. I expected top-level var and function declarations to show under Global Scope in DevTools, but I can’t see them.

var x = 12;

function xyz() {
  console.log("hello");
}

console.log(x);

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

<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <script src="index.js"></script>
</head>

<body>
  <h1>Hi</h1>
</body>

</html>

What I expect:

Both x and xyz should appear under Sources → Scope → Global Scope.

Because var and top-level functions should become properties of window.

What happens instead:

The script runs correctly (console.log(x) prints 12).

I can access window.x and window.xyz in the console.

But I don’t see them listed under Global Scope in DevTools.

Questions:

Is this a Chrome DevTools issue, or am I checking the wrong place?

Do I need to pause the code or use a local server to see these variables?

Why do they only appear if I explicitly write window.x = 12;?

I created a javascript signage app which includes loading 10 second mp4 videos that run behind a clock. One of 5 videos is randomly selected and played during a cycle. I’ve noticed the videos do not play after a few hours. Does this sound like a memory issue or do I need something in my code?

clocks: function () {
    viewModel.activeTemplate("clock");
    var node = 'slide'; // replace with 'tenMinute' to enable that feature
    //get array of videos for background
    var cArr = viewModel.clockVideos();
    console.log("cArr: ", cArr);
    if (cArr.length >= 1) {
        
        // get a random video
        var cnt = cArr.length;
        var clockCnt = 0;
        var rnum = 0;
        var cVid = "";
        var vol = 0;
        var cnam = "";
        var video = "";
        console.log("cnt: ", cnt);
        rnum = Math.floor(Math.random() * cnt);
        cVid = cArr[rnum];
        console.log("rnum:", rnum);
        console.log("cVid: ", cVid);
        clockCnt = cVid.duration;
        console.log("duration:", clockCnt);
        cnam = cVid.imgName; // get video name
        vol = 1.0;
        video = document.getElementById('clockVid');
        $("#clockVid").prop("volume", vol);
        video.src = ccImagePath + cnam;
        console.log("vsource: ", video.src);
        var fadeClockCountdown = setInterval(function () {
            if (clockCnt <= 4) {
                //console.log("property:", $("#clockVid").prop("volume"));
                vol -= 0.25;
                $("#clockVid").fadeOut(3000);
                $("#clockVid").prop("volume", vol);
            }
            clockCnt -= 1;
            console.log("clockCnt: ", clockCnt);
            if (clockCnt <= 0) {
                clearInterval(fadeClockCountdown);
                viewModel.flagManager(node);
            }
        }, 1000);
    } else {
        console.log("no array");
        viewModel.flagManager(node);
    }
},

”’

I have a dialog box that contains a search box and a list underneath. As you type, the list items are filtered out. Can I add role="combobox" to the input?

With an input combobox, normally, the listbox will dynamically pop up as you type. From the docs: “A combobox is an input widget that has an associated popup”. However, in this UI, the listbox is not a popup, and importantly it’s always visible.

Is this a valid use of ARIA attributes?

<input
  type="search"
  aria-controls="my-list"
  role="combobox"
  aria-autocomplete="list"
  aria-expanded="true" <!-- this feels wrong because it's always true -->
  aria-activedescendant=""
/>
<ul id="my-list" role="listbox" aria-label="Fruits">
  <li role="option">Apple</li>
  <li role="option">Banana</li>
  ...
</ul>

first = prompt()
last = prompt()
age = prompt()
if (first[0] === last[0] && age > 20) {
  console.log('hello')
}

When I use double = it won’t work but when I use three = it will work

I am using Primevue’s Sakai template https://github.com/primefaces/sakai-vue and would like to set what the primary colour of the Aura theme should be before the app is loaded, for example using a value store in a cookie.

I can do this AFTER the app is loaded by leveraging updateColors in https://github.com/primefaces/sakai-vue/blob/master/src/layout/AppConfigurator.vue, but I would rather set those values before the app is loaded. I believe the code should go in https://github.com/primefaces/sakai-vue/blob/master/src/main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

import Aura from '@primeuix/themes/aura';
import PrimeVue from 'primevue/config';
import ConfirmationService from 'primevue/confirmationservice';
import ToastService from 'primevue/toastservice';

import '@/assets/styles.scss';

const app = createApp(App);

app.use(router);
app.use(PrimeVue, {
    theme: {
        preset: Aura,
        options: {
            darkModeSelector: '.app-dark'
        }
    }
});
app.use(ToastService);
app.use(ConfirmationService);

app.mount('#app');

As a simple test, I have tried to add the following present, that I got from https://github.com/primefaces/sakai-vue/blob/master/src/layout/AppConfigurator.vue

const myPreset = {
  semantic: {
    primary: {
      50: "#fff1f2",
      100: "#ffe4e6",
      200: "#fecdd3",
      300: "#fda4af",
      400: "#fb7185",
      500: "#f43f5e",
      600: "#e11d48",
      700: "#be123c",
      800: "#9f1239",
      900: "#881337",
      950: "#4c0519"
    },
    colorScheme: {
      light: {
        primary: {
          color: "{primary.500}",
          contrastColor: "#ffffff",
          hoverColor: "{primary.600}",
          activeColor: "{primary.700}"
        },
        highlight: {
          background: "{primary.50}",
          focusBackground: "{primary.100}",
          color: "{primary.700}",
          focusColor: "{primary.800}"
        }
      },
      dark: {
        primary: {
          color: "{primary.400}",
          contrastColor: "{surface.900}",
          hoverColor: "{primary.300}",
          activeColor: "{primary.200}"
        },
        highlight: {
          background: "color-mix(in srgb, {primary.400}, transparent 84%)",
          focusBackground:
            "color-mix(in srgb, {primary.400}, transparent 76%)",
          color: "rgba(255,255,255,.87)",
          focusColor: "rgba(255,255,255,.87)"
        }
      }
    }
  }
};

and changed the theme

app.use(PrimeVue, {
  theme: {
    preset: myPresent,
    }
  }
});

The accent colour is correctly set but that of other elements, like surfaces or Toast messages, is completely gone.

How can one correctly set the theme colour on app load, as it would happen when clicking on a colour from the theme menu?

Thank you!

I am using CSS-grid responsible layout for web. The layout have three sections leftmenu, content and right.
For those sections I have to use spinners. The spinners width and height need to increased or decreased based on the size of those sections.
Can someone help either using css or javascript a good approach.

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "leftmenu content right"
    "footer footer footer";
  grid-template-columns: 1fr 4fr 1.5fr;
  grid-template-rows: 10vh 80vh 10vh;
  background-color: #2196F3;
  padding: 0px;
  gap: 10px;
  margin: 0px;
}

.container>div {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 5px;
}

.container>div.header {
  grid-area: header;
  text-align: center;
}

.container>div.leftmenu {
  grid-area: leftmenu;
}

.container>div.content {
  grid-area: content;
}

.container>div.footer {
  grid-area: footer;
}

.container>div.right {
  grid-area: right;
}

/* Spinner */
.spinnerarea {
  width: 300px;
  height: 200px;
  background-color: white;
  position: absolute;
  top: 0px;
  opacity: 0.9
}

.spinnerarea>.spinner {
  border: 10px solid #f3f3f3;
  /* Light grey */
  border-top: 10px solid #3498db;
  /* Blue */
  border-radius: 50%;
  width: 10px;
  height: 10px;
  animation: spin 2s linear infinite;
  position: absolute;
  top: 45%;
  left: 45%;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

<body style="padding: 0px;margin: 0px;">
  <div class="container">
    <div class="header">
      <h2>My Header</h2>
    </div>
    <div class="leftmenu">
      <div class="spinnerarea" id="sparea">
        <div class="spinner"></div>
      </div><a href="#">Link 1</a><br><a href="#">Link 2</a><br><a href="#">Link 3</a>
    </div>
    <div class="content" style="overflow-y: auto;">
      <div class="spinnerarea" id="sparea">
        <div class="spinner"></div>
      </div>
      <h3>Content</h3>
      <p>Lorem ...
    </div>
    <div class="right">
      <div class="spinnerarea" id="sparea">
        <div class="spinner"></div>
      </div>
      <h4>Right</h4>
      <p>Right side content</p>
    </div>
    <div class="footer">
      <h4>Footer</h4>
    </div>

The github link is
https://github.com/reegan2024/Javascriptcss-grid/blob/main/css-grid.html

I’m making a website using Vite.js and React.js. I do checks on the data in development mode. I use the zod library for this code. I can do this using the statement let zod = await import('zod'). This forces me to use async/await in the other code that renders the (mostly static) website and forces me to use a loader UI element (I didn’t test this yet). I would like a solution without async/await?

Options:

• In my mind, the most logical place to solve this would be somewhere in the Vite.js bundler configuration. It could be possible to use a Vite.js plugin, that imports a file only in dev mode. I could use an extension like file.dev.ts or an option like ?dev to indicate it should only be imported in dev mode. A plugin might exist for this. I didn’t find one.
• Maybe this is possible with other techniques.

Does anyone have a solution for this problem?

Click here to view error i get when i try to start app.
when i create my app and run it works fine but whenever i reopen this app after closing my laptop, it always show me this issue.i dont know why it is showing this.

i tried to delete node_modules and package-lock.json and reinstall them but even when i try to reinstall npm it shows errors too. i dont know why these issues are occuring i am new and just learning react but my app stops working next time i open it so i have to create new everytime.

Error i get while reinstalling npm for solving previous issue