Category: javascript

Giving up on trying to figure out the right sytax on this. I have a custom element built w/stenciljs. The shadowdom component has two @media queries that are used to show desktop or mobile interface: @media screen and (min-width: 960px) and @media screen and (max-width: 959.99px).

Works great. So far so good.

What I’d like to be able to do is, on the consuming html/js/ts page, access the stylesheets and change the breakpoint. It happens to be a vue app, but that doesn’t really matter since it is all down to the js function. I can get my custom element, call it ce, and get in and read ce.shadowRoot.adoptedStyleSheets, flip through them and get the two CSSMediaRules objects that I need. It’s the code to alter them that’s killing me. I can kind of see how to alter a specific style, like change the font color from black to green, but the media query is just beyond my capabilities.

I don’t suppose anyone has code they could share? And apparently you can’t use css variables in media queries, even when you set them in :host, not :root. Which makes sense, I guess, even if I don’t like it. 🙂

TIA!

I’m trying to figure out how to create a server using Node.js to handle receiving and sending data to/from a client that uses the WebTransport interface. I’m completely new to Node.js and don’t know what I should put my hands on to get started.

I would be very grateful for a roadmap or some resources to help me get understand.

i got a project has 3 users roles (parent – child – teacher) and each role has 2 different statues (booked – unbooked) that changes the UI and logic.

Example:-
the home header in the home page will be change based on the user role and the statues.

How to solve this problem without big chain of conditions ?

Wrong Answer ❌

  switch (userRole) {
    case 'parent':
      switch (status) {
        case 'booked':
          return // BookedParentComponent
        case 'unbooked':
          return // UnBookedParentComponent
      }

    case 'child':
      switch (status) {
        case 'booked':
          return // BookedChildComponent
        case 'unbooked':
          return // UnBookedChildComponent
      }

    case 'teacher':
      switch (status) {
        case 'booked':
          return // BookedTeacherComponent
        case 'unbooked':
          return // UnBookedTeacherComponent
      }
  }

I need help taking a script written for a static html page and using it in a Blazor project running Web Assembly. The script basically adds/removes classes based on scrolling. I have read articles about calling javascript from blazor (such as here), but I am not knowledgeable enough to put it all together. I particularly don’t understand how to incorporate it into the “@code{}” area at the bottom of the app index page.

I made a demo using blazorfiddle. (Fyi) I can’t create it in SO due to Web Assembly, but I have included the script and index page below. Any help is much appreciated!

JS:

(function() {
  "use strict";

  /**
   * Easy selector helper function
   */
  const select = (el, all = false) => {
    el = el.trim()
    if (all) {
      return [...document.querySelectorAll(el)]
    } else {
      return document.querySelector(el)
    }
  }

  /**
   * Easy on scroll event listener 
   */
  const onscroll = (el, listener) => {
    el.addEventListener('scroll', listener)
  }

  /**
   * Hide topbar on scroll
   */
  let selectTopbar = select('.topbar')
  let selectMenubar = select('.menubar')
  if (selectMenubar) {
    const menuScrolled = () => {
      if (window.scrollY > 100) {
        selectMenubar.classList.add('menu-scrolled')
        if (selectTopbar) {
          selectTopbar.classList.add('topbar-scrolled')
        }
      } else {
        selectMenubar.classList.remove('menu-scrolled')
        if (selectTopbar) {
          selectTopbar.classList.remove('topbar-scrolled')
        }
      }
    }
    window.addEventListener('load', menuScrolled)
    onscroll(document, menuScrolled)
  }

})()

Blazor index:

@page "/"
@page "/MatDrawerResponsiveFrame"

<MatDrawerContainer class="nav-drawer-container">

        <MatTabGroup class="nav-tabgroup-container">
            <div class="topbar">Hello</div>
            <div class="menubar">
                <a class="flhc" href="#" aria-label="home">HOME</a>
                <MatTab></MatTab>
                <MatTab Label="Testing">
                    <div class="nav-list">
                        <span class="nav-description">TESTING<br><small>Select a test to see a collection of tests about testing.</small></span>
                        <div>
                            <h4>Test 1</h4>
                            <ul>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                            </ul>
                        </div>
                        <div>
                            <h4>Test 2</h4>
                            <ul>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                            </ul>
                        </div>
                        <div>
                            <h4>Test 3</h4>
                            <ul>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                            </ul>
                        </div>
                        <div>
                            <h4>Test 4</h4>
                            <ul>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                            </ul>
                        </div>
                    </div>
                </MatTab>
                <MatTab Label="Tested Indicators">
                    <div class="nav-list">
                        <span class="nav-description">TESTED Indicators<br><small>Select a test to see a collection of tests about testing.</small></span>
                        <div>
                            <h4>Test 1</h4>
                            <ul>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                            </ul>
                        </div>
                        <div>
                            <h4>Test 2</h4>
                            <ul>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                            </ul>
                        </div>
                        <div>
                            <h4>Test 3</h4>
                            <ul>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                            </ul>
                        </div>
                        <div>
                            <h4>Test 4</h4>
                            <ul>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                            </ul>
                        </div>
                    </div>
                </MatTab>
                <MatTab Label="Systems Tested">
                    <div class="nav-list">
                        <span class="nav-description">SYSTEMS Tested<br><small>Select a test to see a collection of tests about testing.</small></span>
                        <div>
                            <h4>Test 1</h4>
                            <ul>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                            </ul>
                        </div>
                        <div>
                            <h4>Test 2</h4>
                            <ul>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                            </ul>
                        </div>
                        <div>
                            <h4>Test 3</h4>
                            <ul>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                            </ul>
                        </div>
                        <div>
                            <h4>Test 4</h4>
                            <ul>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                            </ul>
                        </div>
                    </div>
                </MatTab>
                <MatTab Label="Retesting">
                    <div class="nav-list">
                        <span class="nav-description">RETESTING<br><small>Select a test to see a collection of tests about testing.</small></span>
                        <div>
                            <h4>Test 1</h4>
                            <ul>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                            </ul>
                        </div>
                        <div>
                            <h4>Test 2</h4>
                            <ul>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                            </ul>
                        </div>
                        <div>
                            <h4>Test 3</h4>
                            <ul>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                            </ul>
                        </div>
                        <div>
                            <h4>Test 4</h4>
                            <ul>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                                <li><a href="#">Test</a></li>
                            </ul>
                        </div>
                    </div>
                </MatTab>
            </div>
        </MatTabGroup>
</MatDrawerContainer>

<section id="hero">
    <div class="herosearch">
        <div>
            <h1>Test Title</h1>
            <p>Some information about the tests results.</p>
    
            <form class="roundsearchbar" role="search">
                <input class="form-control" type="search" placeholder="Start typing to search" aria-label="Search">
                <span class="switch-text">
                    <em class="switch">Type a test word</em>
                    <em class="switch">Find a specific test</em>
                    <em class="switch">Search for tests</em>
                    <em class="switch">Find more tests</em>
                </span>
                <input type="submit" value="Search">
            </form>
        </div>
    </div>
</section>

@code
{
    bool Opened = true;
 
    void ButtonClicked()
    {
        Opened = !Opened;
    }
 
}

I have looked around for a similar demo/example but can’t seem to find anything.

I’m trying to create a custom TextInput component using the useField hook from Formik. The code compiles, but I get an error with useField when trying to pass props to it. Here’s the code I’m working with:

import { useField } from 'formik';
import { StyledTextInput, StyledLabel } from './../components/styles';

export const TextInput = ({ ...props }) => {
    const [field, meta] = useField(props); // <-- Error here
    return (
        <div>
            <StyledLabel htmlFor={props.name}>{props.label}</StyledLabel>
            <StyledTextInput {...field} {...props} />
            {meta.touched && meta.error ? (
                <div style={{ color: 'red' }}>{meta.error}</div>
            ) : null}
        </div>
    );
};

Error Message:

Argument of type ‘{ [x: string]: any; }’ is not assignable to
parameter of type ‘string | FieldHookConfig’. Type ‘{ [x:
string]: any; }’ is not assignable to type
‘ClassAttributes &
InputHTMLAttributes & FieldConfig’.

What I’ve Tried:
I’ve confirmed that props includes a name property, as that’s required by useField.
I also tried explicitly typing props with FieldHookConfig, but the error persists.
Expected Behavior:
I expect useField to accept props and return field and meta, which I can then use to bind the StyledTextInput to Formik’s state.

Question:
What is the correct way to pass props to useField so that it accepts the properties I’m passing and removes the error? Is there something wrong with the way I’m spreading field and meta?

Any help or guidance on how to resolve this error would be greatly appreciated!

Autocomplete is working if used pre-defined data without await. Although dropdown menu shows up when clicked on input field with keyword in it

    var data = {
        "Banana": null,
        "Apple": null,
        "Coconut": null,
        "Carrot": null,
        "Pear": null,
    };

    async function autocomplete(element, keyword, minLengthToInit){
      data = await ajaxCall(keyword, "some-api-endpoint", "POST");
      console.log(data);
      M.Autocomplete.init(
        element,
        {
          data: data,
          minLength: minLengthToInit,
        },
      );
    }

    function ajaxCall(keyword, url, getPost){
      return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        var params = 'data=' + JSON.stringify(keyword);
        xhr.open(getPost === "GET" ? "GET" : "POST", url, true);
        xhr.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
              const response = JSON.parse(this.responseText);
              resolve(response);
            }
        }
        xhr.onerror = function () {
          reject({
            status: this.status,
            statusText: xhr.statusText
          });
        };
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(params);
      });
    }

I can confirm the data is fetched and displayed in console log. One strange thing, when keyword is entered with async, no drop down displays but when clicked on input field then it does.

Please help

Many of us are having problems installing NPM. It does not seem like it should be required and it was not required in earlier versions of Chart.js. Can we remove it as a requirement and provide documentation like the old Chart.js versions that were really easy to implement? Right now I have to teach my students to use an old version which is awkward.

When I try to install libraries with NPM on a brand new MS-Windows machine, NPM uninstalls itself. I spent far too much time trying to get it to work when I should not need it to put a simple chart in a web page. Before anyone tells me to use Linux, I’m required to use Windows in my job.

I am trying to build a dictionary program but I want to store my dictionary data (which is about 5MB) to my phpMyAdmin so that when a user wants to search for it, there is no need to reload the file in system but to get it from the database (phpMyAdmin).

Can you explain me how can I do that?

I have tried changing the file extension to .xlsx and .csv but it did not work.

This was working perfectly before I upgraded bootstrap 4 to 5, and now something isn’t happening correctly.

We are using an embedded report viewer as outlined in the Microsoft-provided example.

Here is the code that sets up these buttons:

    document.getElementById('btnViewFullScreen')
        .addEventListener('click', () => { this.embeddedReport.fullscreen(); this.LogEvent("View Fullscreen", ""); });
    document.getElementById('btnPrint')
        .addEventListener('click', () => { this.embeddedReport.print(); this.LogEvent("Print", ""); });
    document.getElementById('btnRefresh')
        .addEventListener('click', () => { this.embeddedReport.refresh(); this.LogEvent("Refresh", ""); });
    document.getElementById('btnReset')
        .addEventListener('click', () => { this.embeddedReport.reload(); this.LogEvent("Reload", ""); });

btnRefresh is the broken one, all other buttons/functions work correctly. Here is the button markup:

<li class="nav-item active">
    <button class="btn bg-envision" id="btnRefresh" title="Refresh visuals-when the data has been updated, refreshing will update all visuals with the latest data" aira-label="Refresh visuals-when the data has been updated, refreshing will update all visuals with the latest data">
        <i class="fas fa-redo-alt"></i>
    </button>
</li>

Here’s the result, I’ve traced it to this line in the refresh function:

I have watched this many times and first pass through _a.label is 0, then it’s 2, then it’s 3. I don’t understand what’s going on in here. Ultimately this is the exception that surfaces:

Any pointers or any information at all is helpful.

I am building a React app using Redux Toolkit. There are tables with data on the pages that i wanna be able to filter. This is how i handle filtering now.

This is my state.

const initialState = {
    loading: false,
    clients: [],
    filters: {
        full_name: '',
        platforms: [],
        packages: [],
    },
    total: null,
    page: 1,
    error: null,
    success: false,
};

const clientSlice = createSlice({
    name: 'client',
    initialState,
    reducers: {
        setClientFilters: (state, { payload }) => {
            state.filters = payload;
            state.page = 1; // Reset page to 1 when filters change
        },
        setClientPage: (state, { payload }) => {
            state.page = payload;
        }
    },
    extraReducers: (builder) => {
        // Fetching logic here...
    }
});

This is my clients page

const { platformFilters, chosenPlatforms, onPlatformFilterChange } = usePlatformFilters();
const { packageFilters, chosenPackages, onPackageFilterChange } = usePackageFilters();

const { debouncedFunction: getClientsSearchDebounce } = useDebounce((searchSrc: string) =>
    dispatch(setClientFilters({ ...filters, full_name: searchSrc }))
);

useEffect(() => {
    // This triggers unnecessary re-renders
    dispatch(setClientFilters({ ...filters, platforms: chosenPlatforms, packages: chosenPackages }));
}, [chosenPlatforms, chosenPackages]);

useEffect(() => {
    dispatch(fetchAllClients());
}, [filters, currentPage]);

The issue I am facing is that on the first render, my app re-renders unnecessarily due to the useEffect hook used for updating filters. I am trying to avoid this because the filter state is already available in Redux, and I don’t want to trigger re-renders during the initial load. But i also want to dispatch the action when the dependencies changed. I was trying to use useMemo but it didn’t eliminate the problem. Any help on optimization will be appreciated

I’ve been using puppeteer a lot lately and have been able to click other buttons, traverse through the DOM, etc with no problem.

However, I ran into one specific button that I haven’t been able to click or interact with for some reason. Puppeteer can’t even find it when I use waitForSelector. I can see the button visually on the page and I monitor the network requests so I know that it’s not waiting for the network.

It’s not in an iframe, and I checked to see if there was any shadow-dom component to this and I didn’t see anything.

Here is the button:

<button data-bind="click: handleBulkDownload, visible: showDownloadAll(),
 attr: { 'data-ga-click': gaTabName + 'Download All Attachments',
 'data-ga-tab': gaTabName }" type="button" class="btn btn-default btn-sm" style="font-size: 12px;" title="Videos cannot be downloaded at this time." data-ga-click="Download All Attachments" data-ga-tab="">
    <img data-bind="visible: isBulkDownloading" src="/images/Common/spinner.gif" alt="Downloading" style="display: none;">
    Download All <span data-bind="text: downloadAllText">(18)</span>
</button>

Do you see anything weird with this or have any ideas on what to check for? Also I would settle for triggering the download action that is tied to this button, but I haven’t had much success with that either.

Thanks!

What will be the output of the following component under react strict-mode?

import { useEffect } from "react";

export default function Learn() {
    let x = 1;
    console.log("outside ", x)
    useEffect(() => {
        console.log(x);
        x = 2;

        return () => console.log("destruct", x)
    }, []);
    console.log("end of fn ", x)
    return (
        <>
            <p>value = {x}</p>
        </>
    );
}

I ran it on my machine and I got

outside  1
end of fn  1
outside  1
end of fn  1
1
destruct 2
2

But I can’t understand why. As per my reasoning, it should’ve been

outside 1
end of fn 1
1
destruct 2
outside 1
end of fn 1
1

What I assumed (incorrectly) was that react strict mode will:

1. Start adding the component to Virtual DOM.
2. Once mounting is done, it’ll call the useState hook.
3. repeats (1) and (2) again.

But that is not happening here. So what is happening here?

iam passing a function from parent component to child component in reactjs but in the child component the function is showing undefined idk whats wrong can anyone help me im providing my snippet here
the onSignin isnot working but onSignup is working

if (!token) {
return (
  <Routes>
    <Route path="/login" element={<Login onSignin={handleLogin} />} /> // this is where im getting error
    <Route path="/signup" element={<Signup onSignup={handleSignup} />} /> // and this is working
    <Route path="/*" element={<Navigate to="/login" />} />
  </Routes>
)};

the childcomp :

function Login({ onSignin }) {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState('');

    const handleSubmit = async (e) => {
        e.preventDefault();
        setLoading(true);
        setError('');

[the error][1]


  [1]: https://i.sstatic.net/O2Uz3P18.png

I have an array of objects, that have Base64 image strings.
I am following the linked tutorial and ChatGPT, trying to convert this to a blob, so that I can store it inside a .zip file.
Mime type is coming up as “image/jpeg”, so I am not sure what I’m doing wrong. This is how I’m getting the files (Duck and hehe). The other 3 files were not Base64 image strings so they are different.
Can anyone help me understand what I’m doing wrong.
Linked tutorial: https://saturncloud.io/blog/creating-a-blob-from-a-base64-string-in-javascript/#:~:text=Converting%20a%20Base64%20string%20to%20a%20BLOB%20in%20JavaScript,-To%20convert%20a&text=The%20atob()%20function%20decodes,returns%20a%20new%20BLOB%20object.

Have attached screenshots below:

This is how the code is for the base64 strings:

This is how the zip file is downloaded:

I created two project before this error. I faced this with my second project and decided creating a new project but it doesn’t work. I tried to change statusPageMiddleware.js in project’s file and again was not the right solution. How can I fix that?