Category: javascript

Working locally, and when Chrome DevTools is open, I get the following errors:

GET http://localhost:3000/main-bundle.js net::ERR_ABORTED 404 (Not Found)

Refused to execute script from ‘http://localhost:3000/main-bundle.js’ because its MIME type (‘text/html’) is not executable, and strict MIME type checking is enabled.

Using Webpack for this project.
When I close the DevTools and refresh, it does not occur.
Does not happen with FireFox DevTools.

The tutorial page here shows to specify schema like this:

const series = chart.addLineSeries({
    schema: {
        index: { auto: true },
        x: { pattern: 'progressive' },
        y: { storage: Float32Array },
        pointSize: {}
    }
})

That seems simple, but in my application I don’t know beforehand what data properties there will be coming. Like “index”, “x” or “y”. There is always “time”, but the other properties can be like “Fp1”, “Fp2”, “F3”, “F4”, “Fz”, … I really don’t like the idea of hardcoding these.

It seems I can also just omit the schema and things work still correctly, but then there are warnings in console from LightningChart.

The documentation doesn’t seem to list any recommended way to approach this. Does anyone have any other ideas or experiences?

I have been developing a POC application to load a PDF into the Autodesk GUIViewer3D, and using a custom extension, draw PolygonPaths and PolylinePaths over the PDF. My extension is simple, it adds a toolbar and manages the active tools, so that only one Edit2d tool is active at a time. The toolbar buttons I have added essentially toggle or switch between them.

I have the measurement extension loaded and can set the calibration, this carries over to the Edit2d Extension and allows me to have the correct values when getting one of the drawn shapes, and doing getArea() with the measureTransform etc.

Todo: add the code to get calibrated area of 2d shape via measure transform

I want to add a new toolbar button to my extension that enables the following functionality:

When the viewer selection event is fired, giving me the dbid of a my selected line in the PDF, I retrieve the raw coords / vector data of that line and draw a Polyline shape programmatically using those coords.

Note that this is a rough idea of the setup. In reality I have the viewer bound in a class called ApsViewerManager and have an instance of that assigned to the window object. The ApsViewerManager supports loading from a PDF that is downloaded from another api, or loading from the APS OSS API. I will try strip things down to the bare minimum of what is needed for the “local” PDF loading.

My setup for loading a pdf into the viewer:

const url = "some-url" // in reality this is pointing to a get endpoint on an external api that returns the pdf content
const page = 1 // you can only load 1 pdf page at a time

const localManager = this; // this is an instance of the APSViewerManager

const options = {
    accessToken: "",
    useCredentials: false
    env: 'Local'
}

await Autodesk.Viewing.Initializer(options, async function () {

    const htmlDiv = document.querySelector(localManager.containerSelector);
    localManager.viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv);

    attachViewerEvents.call(localManager); // I have my events handling setup in a separate module called as if part of the APSViewerManager

    const startedCode = localManager.viewer.start(null, options);

    if (startedCode > 0) {
        localManager.report_error('Failed to create Viewer', {startCode: startedCode});
        return;
    }

    // setup the edit2d extension from 'Autodesk.Edit2d'
    localManager.edit2d = await localManager.viewer.loadExtension('Autodesk.Edit2D', {enableArcs: true});

    // setup the inhouse extension to add edit2d controls as toolbar buttons + inhouse functionality consuming edit2d
    localManager.rlb2dTakeOff = await localManager.viewer.loadExtension(
        'RLB2DTakeOffExtension', 
        {
            manager: localManager,
            filename: localManager.shapesFilename,
        }
    );

    // setup for loading the pdf extension from 'Autodesk.PDF'
    await localManager.viewer.loadExtension('Autodesk.PDF')
        
    // URL parameter page will override value passed to loadModel
    localManager.viewer.loadModel(url, {page: page});
    
});

The challenge is, While I have the dbId from the selection event, I am unable to query the property database using this Id.

const dbid = 2900 //the dbid for a wall I selected on the pdf - obtained from viewer selection event
const db = apsViewerManager.viewer.model.getPropertyDb();

db.getProperties2(
  dbid, 
  function(x){
    console.log("Promise resolved")
    console.dir(x)
  }, 
  function(x){
    console.log("Promise rejected")
    console.dir(x)
  }
)

The promise rejects, and I am left with the following object:

{
    "err": undefined,
    "instanceTree": null,
    "maxTreeDepth": 0
}

I figured maybe my db was fragmented – I am not entirely sure what this means, but I do see properties in the db object full of “fragments”.

const frags = apsViewerManager.viewer.model.getFragmentList();
console.dir(frags);

result:

I wanted to try the following script to retrieve the props from there:

I am not sure the exact source of this script combination but I see it was derived from this APS blog: https://aps.autodesk.com/blog/working-2d-and-3d-scenes-and-geometry-forge-viewer

viewer = apsViewerManager.viewer;

viewer.addEventListener(
  Autodesk.Viewing.SELECTION_CHANGED_EVENT, 
  function () {
    const tree = viewer.model.getInstanceTree();
    const frags = viewer.model.getFragmentList();
    
    function listFragmentProperties(fragId) {
      console.log('Fragment ID:', fragId);
      // Get IDs of all objects linked to this fragment
      const objectIds = frags.getDbIds(fragId);
      console.log('Linked object IDs:', objectIds);
      // Get the fragment's world matrix
      let matrix = new THREE.Matrix4();
      frags.getWorldMatrix(fragId, matrix);
      console.log('World matrix:', JSON.stringify(matrix));
      // Get the fragment's world bounds
      let bbox = new THREE.Box3();
      frags.getWorldBounds(fragId, bbox);
      console.log('World bounds:', JSON.stringify(bbox));
    }
    
    if (tree) { // Could be null if the tree hasn't been loaded yet
      const selectedIds = viewer.getSelection();
      for (const dbId of selectedIds) {
        const fragIds = [];
        tree.enumNodeFragments(
          dbId,
          listFragmentProperties,
          false
        );
      }
    }
    else {
      console.log("No tree!");
    }
  }
);

Unfortunately, the tree is always null, so my browser spits out “No tree!”

What approaches / hidden documentation secrets can I look at to progress further?

I had seen a thread somewhere stating that PDFs are always converted to Vectors, hence my ambition of getting some coords of the selected wall (line) in the PDF.

The following two code snippets appear to function the same. I am aware that there is likely something occurring under the hood for the string snippet to call the event object, but I am unfamiliar with Javascript and I would like to have a better understanding of why it is operating this way.

client.on('messageCreate', (message: any) => {
    console.log(`message sent: ${message.content}`)
    message.reply(`${message.content}`)
})

client.on(Events.MessageCreate, (message: any) => {
    console.log(`message sent: ${message.content}`)
    message.reply(`${message.content}`)
})

I keep getting this error:

Uncaught ReferenceError: Cannot access 'StripeWrapper' before initialization

This is my App.js:

  import logo from './logo.svg';
  import { Routes, Route, createBrowserRouter, RouterProvider, Navigate, Outlet } from 'react-router-dom';
  import { Elements } from '@stripe/react-stripe-js';
  import { loadStripe } from '@stripe/stripe-js';
  import './App.css';
  import 'bootstrap/dist/css/bootstrap.css';
  import Header from "../src/Components/Header";
  import Home from "../src/Components/Home";
  import Search from "../src/Components/Search";
  import Login from "../src/Components/Login";
  import Sell from "../src/Components/Sell";
  import Signup from "../src/Components/Signup";
  import ErrorPage from "../src/Components/ErrorPage";
  import StripeComplete from "../src/Components/StripeComplete";
  import StripeError from "../src/Components/StripeError";
  import BuyImageCheckout from "../src/Components/BuyImageCheckout";
  import Selling from "../src/Components/Selling";
  import {} from "./APIRequests/Api";


  const stripePromise = loadStripe('xxxxx');

  const router = createBrowserRouter([
  {
    path: '/',
      element: <LayoutComponent />,
      children: [
        {
          index: true,
          element: <Home />,
        },
        {
          path: '/search',
          element: <Search />,
        },
        { path: '/sell',
          element: (
            <PrivateRoute>
              <Sell />
            </PrivateRoute>
          ),
        },
        {
          path: '/login',
          element: <Login />,
        },
        {
          path: '/signup',
          element: <Signup />,
        },
        {
          path: '/stripecomplete',
          element: <StripeComplete />,
        },
        {
          path: '/stripeerror',
          element: <StripeError />,
        },
        {
          path: '/selling',
          element: <Selling />,
        },
        {
          path: '/sell/buyimagecheckout',
          element: (
            <PrivateRoute> <-- This is where the error occurs
              <StripeWrapper>
                <BuyImageCheckout />
              </StripeWrapper>
            </PrivateRoute>
          )
        },{
          path: '*',
          element: <ErrorPage />,
        },
      ],
    },

  ]);
  function PrivateRoute({ children }) {
    return localStorage.getItem("userGuid") != null ? children : <Navigate to="/login" />;
  }
  const StripeWrapper = ({ children }) => {
    return (
      <Elements stripe={stripePromise}>
        {children}
      </Elements>
    );
  };
  function LayoutComponent() {
    return (
      <div>
        <Header></Header>
        <main>
          <Outlet /> {/* Nested routes render here */}
        </main>
      </div>
    );
  }

  function App() {
    return <RouterProvider router={router} />;
  }

  export default App;

The BuyImageCheckout is the page that loads the Card element from stripe, if you want me to post the code for BuyImageCheckout let me know its got a load of html that builds the Image Checkout Page.

Full Error:

ERROR
Cannot access 'StripeWrapper' before initialization
ReferenceError: Cannot access 'StripeWrapper' before initialization
at ./src/App.js (http://localhost:3000/static/js/bundle.js:59619:93)
at options.factory (http://localhost:3000/static/js/bundle.js:65759:30)
at __webpack_require__ (http://localhost:3000/static/js/bundle.js:65114:32)
at fn (http://localhost:3000/static/js/bundle.js:65375:21)
at hotRequire (http://localhost:3000/static/js/bundle.js:65742:47)
at ./src/index.js (http://localhost:3000/static/js/bundle.js:64706:62)
at options.factory (http://localhost:3000/static/js/bundle.js:65759:30)
at __webpack_require__ (http://localhost:3000/static/js/bundle.js:65114:32)
at http://localhost:3000/static/js/bundle.js:66363:37
at http://localhost:3000/static/js/bundle.js:66365:12

I know next to nothing about JavaScript, so I’m not sure what I’m even doing, but I’m trying to make a page with multiple image galleries that opens up a lightbox when you click one of the pics.

I got it to work with only one gallery, but when I added the second one, the images open the lightbox for the first gallery instead of the current one.

Here’s the code for what I was able to do so far (I got the code for the lightbox at W3Schools and modified it a bit):

const lightboxes = document.querySelectorAll(".lightbox");

function openLightbox() {
  lightboxes.forEach(lightbox => {
    document.querySelector('.lightbox').style.display = "block";
    document.querySelector('body').style.overflowY = "hidden";
  });
}

function closeLightbox() {
  lightboxes.forEach(lightbox => {
    const lightClose = document.querySelector('.close');
    const lightContent = document.querySelector('.lightbox-content');

    if (lightClose.contains(event.target) || !lightContent.contains(event.target)) {
      lightbox.style.display = "none";
      document.querySelector('body').style.overflowY = "visible";
    }
  }); 
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  lightboxes.forEach(lightbox => {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    if (n > slides.length) {slideIndex = 1;}
    if (n < 1) {slideIndex = slides.length;}
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }

    slides[slideIndex-1].style.display = "block";
  });
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1vw;
  max-width: 100vw; /* Recommended */
  margin: 1vw auto;
  padding: 1vw;
}

.gallery figure {
  display: flex;
  justify-items: center;
  height: 180px;
  margin: 0;
  
  img {
    width: 100%;
    object-fit: cover;
    object-position: center;
  }
}

img:hover {
  cursor: pointer;
}

.lightbox {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffffee;
  align-content: center;
  justify-items: center;
}

.lightbox-content {
  position: relative;
  width: 80vh;
  justify-items: center;
  align-content: center;
  z-index: 100;
  grid-gap: 5vh;
  margin-bottom: 10vh;
  
  figure {
    display: flex;
    flex-flow: column;
    margin: 0;
  }
  
  figure img {
    max-height: 60vh;
    object-fit: contain;
  }
}

.imgcap {
  width: min-content;
}

figcaption {
  height: 40px;
}

.mySlides {
  display: none;
  grid-gap: 1vh;
}

.prev, .next, .close {
  position: absolute;
  color: black;
  font-weight: bold;
  font-size: 40px;
  font: 700 40px;
  cursor: pointer;
  align-content: center;
  text-shadow: 2px 2px 4px #00000064;
  opacity: 0.6;
  transition: 0.3s ease;
}

.close {
  position: relative;
  float: right;
  margin-right: -30px;
  margin-top: 10px;
  z-index: 1000;
}

.next {
  right: 0;
  padding-left: 50%;
}

.prev {
  padding-right: 50%;
}

.next, .prev {
  top: 5%;
  height: 80%;
  margin: 0 -8vh;
}

.prev:before {
  content: '3008';
}

.close:before {
  content: '2A2F';
}

.next:before {
  content: '3009';
}

/* Number text (1/3 etc) */
.numbertext {
  color: black;
  font: 700 1em;
  text-align: center;
}

:where(.prev, .next, .close):hover {
  opacity: 1;
}

@media screen and (max-width: 650px) {
  .lightbox-content {
    width: 80vw;
    max-width: none;
    figure img {
      max-width: none;
      height: 60vw;
    }
  }
  
  .next, .prev {
    margin: 0 -8vh;
  }
}

<!-- gallery 1 -->
    <section class="gallery">
      <figure>
        <img src="https://placehold.co/500x300/000/cyan?text=1" onclick="openLightbox();currentSlide(1)"/>
      </figure>
      
      <figure>
        <img src="https://placehold.co/500x300/000/cyan?text=2" onclick="openLightbox();currentSlide(2)"/>
      </figure>
      
      <figure>
        <img src="https://placehold.co/500x300/000/cyan?text=3" onclick="openLightbox();currentSlide(3)"/>
      </figure>
      
      <figure>
        <img src="https://placehold.co/500x300/000/cyan?text=4" onclick="openLightbox();currentSlide(4)"/>
      </figure>
      
      <figure>
        <img src="https://placehold.co/500x300/000/cyan?text=5" onclick="openLightbox();currentSlide(5)"/>
      </figure>
      
      <figure>
        <img src="https://placehold.co/500x300/000/cyan?text=6" onclick="openLightbox();currentSlide(6)"/>
      </figure>
      
      <figure>
        <img src="https://placehold.co/500x300/000/cyan?text=7" onclick="openLightbox();currentSlide(7)"/>
      </figure>
      
      <figure>
        <img src="https://placehold.co/500x300/000/cyan?text=8" onclick="openLightbox();currentSlide(8)"/>
      </figure>
    </section>

    <!-- lightbox for gallery 1 -->
    <div class="lightbox" onclick="closeLightbox()">
      <div class="lightbox-content">
        <div class="imgcap">
          <span class="close" onclick="closeLightbox()"></span>
          <figure class="mySlides">
            <p class="numbertext">1 / 8</p>
            <img src="https://placehold.co/500x300/000/cyan?text=1"/>
            <figcaption>first cyan</figcaption>
          </figure>

          <figure class="mySlides">
            <div class="numbertext">2 / 8</div>
            <img src="https://placehold.co/500x300/000/cyan?text=2"/>
            <figcaption>second cyan</figcaption>
          </figure>

          <figure class="mySlides">
            <div class="numbertext">3 / 8</div>
            <img src="https://placehold.co/500x300/000/cyan?text=3">
            <figcaption>third cyan</figcaption>
          </figure>

          <figure class="mySlides">
            <div class="numbertext">4 / 8</div>
            <img src="https://placehold.co/500x300/000/cyan?text=4">
            <figcaption>fourth cyan</figcaption>
          </figure>
          
          <figure class="mySlides">
            <div class="numbertext">5 / 8</div>
            <img src="https://placehold.co/500x300/000/cyan?text=5">
            <figcaption>fifth cyan</figcaption>
          </figure>
          
          <figure class="mySlides">
            <div class="numbertext">6 / 8</div>
            <img src="https://placehold.co/500x300/000/cyan?text=6">
            <figcaption>sixth cyan</figcaption>
          </figure>
          
          <figure class="mySlides">
            <div class="numbertext">7 / 8</div>
            <img src="https://placehold.co/500x300/000/cyan?text=7">
            <figcaption>seventh cyan</figcaption>
          </figure>
          
          <figure class="mySlides">
            <div class="numbertext">8 / 8</div>
            <img src="https://placehold.co/500x300/000/cyan?text=8">
            <figcaption>eighth cyan</figcaption>
          </figure>
        </div>        

        <a class="prev" onclick="plusSlides(-1)"><span/></a>
        <a class="next" onclick="plusSlides(1)"><span/></a>
      </div>
    </div>
    
    <!-- gallery 2 -->
    
    <section class="gallery">
      <figure>
        <img src="https://placehold.co/500x300/000/chartreuse?text=1" onclick="openLightbox();currentSlide(1)"/>
      </figure>
      
      <figure>
        <img src="https://placehold.co/500x300/000/chartreuse?text=2" onclick="openLightbox();currentSlide(2)"/>
      </figure>
      
      <figure>
        <img src="https://placehold.co/500x300/000/chartreuse?text=3" onclick="openLightbox();currentSlide(3)"/>
      </figure>
      
      <figure>
        <img src="https://placehold.co/500x300/000/chartreuse?text=4" onclick="openLightbox();currentSlide(4)"/>
      </figure>
      
      <figure>
        <img src="https://placehold.co/500x300/000/chartreuse?text=5" onclick="openLightbox();currentSlide(5)"/>
      </figure>
      
      <figure>
        <img src="https://placehold.co/500x300/000/chartreuse?text=6" onclick="openLightbox();currentSlide(6)"/>
      </figure>
      
      <figure>
        <img src="https://placehold.co/500x300/000/chartreuse?text=7" onclick="openLightbox();currentSlide(7)"/>
      </figure>
      
      <figure>
        <img src="https://placehold.co/500x300/000/chartreuse?text=8" onclick="openLightbox();currentSlide(8)"/>
      </figure>
    </section>

    <!-- lightbox  for gallery 2 -->
    <div class="lightbox" onclick="closeLightbox()">
      
      <div class="lightbox-content">
        <div class="imgcap">
          <span class="close" onclick="closeLightbox()"></span>
          <figure class="mySlides">
            <p class="numbertext">1 / 8</p>
            <img src="https://placehold.co/500x300/000/chartreuse?text=1"/>
            <figcaption>first green</figcaption>
          </figure>

          <figure class="mySlides">
            <div class="numbertext">2 / 8</div>
            <img src="https://placehold.co/500x300/000/chartreuse?text=2"/>
            <figcaption>second green</figcaption>
          </figure>

          <figure class="mySlides">
            <div class="numbertext">3 / 8</div>
            <img src="https://placehold.co/500x300/000/chartreuse?text=3">
            <figcaption>third green</figcaption>
          </figure>

          <figure class="mySlides">
            <div class="numbertext">4 / 8</div>
            <img src="https://placehold.co/500x300/000/chartreuse?text=4">
            <figcaption>fourth green</figcaption>
          </figure>
          
          <figure class="mySlides">
            <div class="numbertext">5 / 8</div>
            <img src="https://placehold.co/500x300/000/chartreuse?text=5">
            <figcaption>fifth green</figcaption>
          </figure>
          
          <figure class="mySlides">
            <div class="numbertext">6 / 8</div>
            <img src="https://placehold.co/500x300/000/chartreuse?text=6">
            <figcaption>sixth green</figcaption>
          </figure>
          
          <figure class="mySlides">
            <div class="numbertext">7 / 8</div>
            <img src="https://placehold.co/500x300/000/chartreuse?text=7">
            <figcaption>seventh green</figcaption>
          </figure>
          
          <figure class="mySlides">
            <div class="numbertext">8 / 8</div>
            <img src="https://placehold.co/500x300/000/chartreuse?text=8">
            <figcaption>eighth green</figcaption>
          </figure>
        </div>

        <a class="prev" onclick="plusSlides(-1)"><span/></a>
        <a class="next" onclick="plusSlides(1)"><span/></a>
      </div>
    </div>

I don’t know what I’m doing wrong :^(

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);
    }
},

”’