Category: javascript

Ran into a snag and hoping the community can provide some insight to help enlighten a fellow coder. Here is a breakdown:

Setup:

• 3 tier menu with jQuery click handlers to display/hide the second and third tier menus.

Issue:

• I have a click handler in jQuery for menu and sub menu items however when clicking on a sub menu item it closes the main menu item hiding the submenu.

Code Sample: https://codepen.io/DigitalDesigner/pen/azvozOP

Objective:

• Main Menu Items with submenu display/hide submenu on click (Working)
• Opening a Main menus submenu closes all other sub menus (Working)
• Submenu Items with submenu display/hide submenu on click

This last objective is working except closes Main Submenu.

How can I successfully have the display/hide work on the various tiered menu items when clicking within one another?

$(function () {
    $('.nav-container').each(function () {
        let nav = new Nav($(this));
    });
});

let Nav = function Nav(this$obj) {
    this.$obj = this$obj; // .nav-container

    this.primaryNavTriggers();
};

Nav.prototype.primaryNavTriggers = function primaryNavTriggers() {
  $('.menu-has-children').each(function(){
        $(this).on('click', function() {
            if($(this).hasClass('menu-level-1')) {
                if($(this).find('.sub-sub-menu').hasClass('sub-sub-menu--active')){
                    $(this).find('.sub-sub-menu').removeClass('sub-sub-menu--active');
                } else {
                    $(this).find('.sub-sub-menu').addClass('sub-sub-menu--active');
                }
            } else if($(this).hasClass('menu-level-0') ) {
                if($(this).find('.sub-menu').hasClass('sub-menu--active')){
                    $(this).find('.sub-menu').removeClass('sub-menu--active');
                } else {
                  $('.sub-menu').each(function(){
                    $(this).removeClass('sub-menu--active');
                  });
                    $(this).find('.sub-menu').addClass('sub-menu--active');
                }
            }
        });
    });
};

.nav-container {
     background: #f2f2f2;
     padding: 32px 24px;
}
 .nav-container .menu, .nav-container .sub-menu, .nav-container .sub-sub-menu {
     list-style-type: none;
     margin: 0;
     padding: 0;
}
 .nav-container .menu .menu-item, .nav-container .sub-menu .menu-item, .nav-container .sub-sub-menu .menu-item {
     padding: 12px 0;
}
 .nav-container .menu .menu-item:not(:last-of-type), .nav-container .sub-menu .menu-item:not(:last-of-type), .nav-container .sub-sub-menu .menu-item:not(:last-of-type) {
     border-bottom: 1px solid #9e9e9e;
}
 .nav-container .menu .menu-item .menu-link, .nav-container .sub-menu .menu-item .menu-link, .nav-container .sub-sub-menu .menu-item .menu-link {
     color: #000;
     font-family: sans-serif;
     text-decoration: none;
}
 .nav-container .sub-menu, .nav-container .sub-sub-menu {
     display: none;
}
 .nav-container .sub-menu--active, .nav-container .sub-sub-menu--active {
     display: block;
}
 .nav-container .sub-menu {
     padding-left: 8px;
}
 .nav-container .sub-sub-menu {
     padding-left: 16px;
}
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<nav class="nav-container">
  <ul class="menu main-menu">
    <li class="menu-item menu-level-0">
      <a href="#" class="menu-link">Menu Item 1</a>
    </li>
    <li class="menu-item menu-level-0 menu-has-children">
      <a href="#" class="menu-link">Menu Item 2</a>
      <ul class="sub-menu">
        <li class="menu-item menu-level-1">
          <a href="#" class="menu-link">Submenu Item 1</a>
        </li>
        <li class="menu-item menu-level-1  menu-has-children">
          <a href="#" class="menu-link">Submenu Item 2</a>
          <ul class="sub-sub-menu">
            <li class="menu-item menu-level-2">
              <a href="#" class="menu-link">Sub Submenu Item 1</a>
            </li>
            <li class="menu-item menu-level-2">
              <a href="#" class="menu-link">Sub Submenu Item 2</a>
            </li>
            <li class="menu-item menu-level-2">
              <a href="#" class="menu-link">Sub Submenu Item 3</a>
            </li>
          </ul>
        </li>
        <li class="menu-item menu-level-1">
          <a href="#" class="menu-link">Submenu Item 3</a>
        </li>
        <li class="menu-item menu-level-1">
          <a href="#" class="menu-link">Submenu Item 4</a>
        </li>
      </ul>
    </li>
     <li class="menu-item menu-level-0">
      <a href="#" class="menu-link">Menu Item 3</a>
    </li>
    <li class="menu-item menu-level-0 menu-has-children">
      <a href="#" class="menu-link">Menu Item 4</a>
      <ul class="sub-menu">
        <li class="menu-item menu-level-1">
          <a href="#" class="menu-link">Submenu Item 1</a>
        </li>
        <li class="menu-item menu-level-1  menu-has-children">
          <a href="#" class="menu-link">Submenu Item 2</a>
          <ul class="sub-sub-menu">
            <li class="menu-item menu-level-2">
              <a href="#" class="menu-link">Sub Submenu Item 1</a>
            </li>
            <li class="menu-item menu-level-2">
              <a href="#" class="menu-link">Sub Submenu Item 2</a>
            </li>
            <li class="menu-item menu-level-2">
              <a href="#" class="menu-link">Sub Submenu Item 3</a>
            </li>
          </ul>
        </li>
        <li class="menu-item menu-level-1">
          <a href="#" class="menu-link">Submenu Item 3</a>
        </li>
        <li class="menu-item menu-level-1">
          <a href="#" class="menu-link">Submenu Item 4</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

When I make a POST request, the server responds immediately with an id, but the actual result is delivered later via a server push event (e.g., WebSocket or Pusher).

Here’s what I’m trying to do:

When the API responds with the id, I want to immediately notify the user that the push event has started.

Then, I want to wait for the actual result (delivered later through a server-side push) and resolve the promise with that final result.

The challenge is that I can only call resolve() once in a Promise.

So far, I’m using a workaround like this:

function handleAsync(payload, endpoint, callBack) {
  return new Promise((resolve, reject) => {
    // Step 1: POST call and returns id
    callAPI(payload).then((response) => {
      if (response.jobId) {
        callBack(response.id); // notify caller early
        // Wait for server push (via WebSocket or similar) and then resolve
      }
    });

    // Step 2: Push listener will receive final result later and call resolve/reject
    // ...
  });
}

I feel like using a callback just to communicate the id is a bit hacky.
Is there a better pattern to handle this case — maybe returning both values in a more structured way? For example:

return {
  id,
  result: new Promise(...),
};

But then it feels awkward to break the single Promise flow.

Question:

Is there a clean, Promise-based way to return both:

an immediate value (id), and a final result that resolves later (e.g., from a WebSocket or server push)? Or is using a callback the only reasonable way?

I am building a PHP + JavaScript notification system for my MedConnect web app. Users and consultants have separate dashboards (user_consult.php, consultant_consult.php), each with its own notification dropdown and notification count badge.

Problem:

When a consultation request or other notification is created for a consultant, it is inserted into the notifications table correctly with recipient_role = ‘consultant’ and is_read = 0.

My notification count badge on the consultant side does not update or increment when a new notification is added.

The user side works correctly.

I only want the notification count for consultants to increment for consultant-specific notifications until the dropdown is opened, at which point it should reset.

Database:

notifications table structure:

• id
• user_id
• consultant_id
• consultation_id
• type (enum)
• message
• recipient_role (enum ‘user’, ‘consultant’)
• is_read (tinyint(1), default 0)
• created_at

user_consult.php JS:

function fetchNotifications() {
          fetch('notifications.php?action=fetch')
          .then(response => response.json())
          .then(data => {
              const notificationList = document.getElementById("notification-list");
              notificationList.innerHTML = '';

              if (data.length === 0) {
                  notificationList.innerHTML = '<p style="padding: 12px;">No notifications.</p>';
                  return;
              }

              data.forEach(notification => {
                  const div = document.createElement('div');
                  div.classList.add('notification-item');
                  div.innerHTML = `
                      <p>${notification.message}</p>
                      <small>${new Date(notification.created_at).toLocaleString()}</small>
                  `;
                  notificationList.appendChild(div);
              });
          })
          .catch(err => console.error(err));
      }

      function clearAllNotifications() {
          fetch('notifications.php?action=clear')
              .then(() => {
                  fetchNotifications();      // refresh the notification list
                  fetchNotificationCount();  // refresh the count immediately
              })
              .catch(err => console.error(err));
      }

      function toggleNotifications() {
          const dropdown = document.getElementById('notificationsDropdown');
          dropdown.style.display = (dropdown.style.display === 'block') ? 'none' : 'block';

          if (dropdown.style.display === 'block') {
              fetchNotifications();
              fetch('notifications.php?action=markAllRead')
                  .then(() => fetchNotificationCount()); // refresh count after marking as read
          }
      }

      function fetchNotificationCount() {
          fetch('notifications.php?action=count')
              .then(response => response.json())
              .then(data => {
                  const count = data.count || 0;
                  document.getElementById("notification-count").innerText = count;
              })
              .catch(error => console.error("Error fetching notification count:", error));
      }

      // Initial load
      document.addEventListener("DOMContentLoaded", () => {
          fetchNotifications();
          fetchNotificationCount();
      });

consultant_consult.php JS:

    function clearAllNotifications() {
        fetch('notifications.php?action=clear')
            .then(() => {
                fetchNotifications();      // refresh the notification list
                fetchNotificationCount();  // refresh the count immediately
            })
            .catch(err => console.error(err));
    }

    function toggleNotifications() {
        const dropdown = document.getElementById('notificationsDropdown');
        dropdown.style.display = (dropdown.style.display === 'block') ? 'none' : 'block';

        if (dropdown.style.display === 'block') {
            fetchNotifications();
            fetch('notifications.php?action=markAllRead')
                .then(() => fetchNotificationCount()); // refresh count after marking as read
        }
    }

    function fetchNotificationCount() {
        fetch('notifications.php?action=count')
            .then(response => response.json())
            .then(data => {
                const count = data.count || 0;
                document.getElementById("notification-count").innerText = count;
            })
            .catch(error => console.error("Error fetching notification count:", error));
    }

    // Initial load
    document.addEventListener("DOMContentLoaded", () => {
        fetchNotifications();
        fetchNotificationCount();
    });

    function toggleNotifications() {
        const dropdown = document.getElementById('notificationsDropdown');

        // Toggle Dropdown Visibility
        const isVisible = dropdown.style.display === 'block';
        dropdown.style.display = isVisible ? 'none' : 'block';

        // If opening, fetch notifications & reset unread count
        if (!isVisible) {
            fetch('notifications.php?action=markAllRead')
                .then(() => fetchNotificationCount()); // refresh count

            fetch('consultant_consult.php?fetchConsultations=true')
            .then(response => response.json())
            .then(data => {
                const notificationList = document.getElementById("notification-list");
                notificationList.innerHTML = "";

                if (data.length === 0) {
                    notificationList.innerHTML = '<p style="padding: 12px;">No notifications.</p>';
                    return;
                }

                if (data.error) {
                    notificationList.innerHTML = `<p style="color: red;">${data.error}</p>`;
                    return;
                }

                // Display consultations in the dropdown
                data.forEach(item => {
                    let html = "";
                    if (item.is_notification) {
                        // Render user activity notifications
                        html = `
                            <div class="notification-item">
                                <p>${item.message}</p>
                                <small>${new Date(item.created_at).toLocaleString()}</small>
                            </div>
                        `;
                    } else {
                        // Render pending consultation requests (existing)
                        html = `
                            <div class="notification-item">
                                <p><strong>From:</strong> ${item.user_name}</p>
                                <p><strong>Symptoms:</strong> ${item.symptoms}</p>
                                <p><strong>Date:</strong> ${item.date} | <strong>Time:</strong> ${item.time}</p>
                                ${item.medical_docs ? `<p><a href="${item.medical_docs}" target="_blank">View Medical Documents</a></p>` : ""}
                                <div class="button-group">
                                    <button class="accept-btn" onclick="processConsultation(${item.id}, 'accept')">Accept</button>
                                    <button type='button' class="reject-btn" onclick="openRejectionPopup(${item.id})">Reject</button>
                                </div>
                            </div>
                        `;
                    }
                    notificationList.innerHTML += html;
                });

                // Reset unread count to zero (since the user has now read them)
                unreadNotificationCount = 0;
                document.getElementById("notification-count").innerText = unreadNotificationCount;
            })
            .catch(error => console.error("Error fetching consultations:", error));
        }
    }

    // Allow clicking on overlay to close the dropdown
    document.getElementById('overlay').addEventListener('click', function() {
        document.getElementById('notificationsDropdown').style.display = 'none';
        this.style.display = 'none';
    });

notifications.php (COUNT action):

// COUNT unread notifications
if ($action === 'count') {
    if ($role === 'user') {
        $stmt = $connection->prepare("SELECT COUNT(*) FROM notifications WHERE user_id = ? AND recipient_role = 'user' AND is_read = 0");
    } elseif ($role === 'consultant') {
        $stmt = $connection->prepare("SELECT COUNT(*) FROM notifications WHERE consultant_id = ? AND recipient_role = 'consultant' AND is_read = 0");
    } else {
        echo json_encode(['count' => 0]);
        exit;
    }

    if (!$stmt) {
        echo json_encode(['error' => 'Prepare failed: ' . $connection->error]);
        exit;
    }

    $stmt->bind_param("i", $id);
    $stmt->execute();
    $stmt->bind_result($count);
    $stmt->fetch();
    echo json_encode(['count' => $count]);
    $stmt->close();
    exit;
}

What I’ve tried:
✅ Verified notifications are inserted with recipient_role = ‘consultant’ and is_read = 0.
✅ Checked that manual SQL queries return the correct count.
✅ The fetch call returns { count: 1 } in the console, but the badge sometimes does not update, or resets to 0 unexpectedly.
✅ I’ve removed conflicting intervals.

What I need:
✅ Help identifying why the consultant notification count badge is not updating reliably.
✅ Best practice for clean, reliable updating of the count when a notification is added and resetting it only when the dropdown is opened.

(NOTE: This is a follow-up to my previous question, which can be found here: Display Hidden Table Cell on click of another Table Cell in HTML, CSS, and JavaScript))

Since I last posted my previous question, it seems I didn’t do a good enough job of explaining myself. One person mistakenly thought I was trying to create a Minesweeper clone (I am not), and another person wasn’t sure how exactly I wanted to go about revealing the hidden cells in my table. So I’m here to hopefully try and correct that mistake.
So, here’s my problem and the best explanation I can currently give as to what I’m trying to do…

As stated previously, I’m trying to create an “avoid the mines”-style game.
The objective is to reach the end of a given level (represented by a table with cells) by clicking on the cells in the grid (called “tiles”) in a sequential order.

Clicking on a revealed cell should change the background color of that cell to dark gray, and should also reveal its neighboring cells (the ones that are hidden) by changing their visibility status to “visible”, and changing the color of their borders to white.

Again, this needs to be done in sequential order.

For example, let’s say I have a 5 by 5 table of cells, with each cell having id’s ranging from A1 to E5. And let’s assume that cell “A1” (the starting tile) is already revealed and has been clicked on.

When I click on A1’s neighboring cell with the id “A2”, I want A2 to have its background color changed to dark gray, and I want the cells neighboring A2 (in this case, cells “A3” and “B2”) to have their visibility changed to “visible”, and their border colors to change to white (to show that they have been revealed).

This process should be repeated for all cells that are clicked on by the player that have the “.Tile” and “.TileFinish” classes assigned to them.

To try and help y’all visualize what I’m trying to do, here are some screenshots of the table grid in various states…

This is a shot of the sample table with all relevant cells. Only those with their corresponding classes (“.Tile”, “.TileStart”, etc.) and their corresponding id’s (“A2”, “B3”, etc.) are highlighted.

This is a shot of the grid with all other cells hidden except A1 and A2, the latter of which has been highlighted with a white border. This is an example of a cell that I want to be visible and clickable when the game first loads.

This is a shot of what I want to happen when I click on cell A2. A2 gets its background color changed to dark gray, and its neighboring cell, “B2”, gets revealed and highlighted with a white border.

Again, just like last time, I understand that what I’m asking is rather complicated. If I need to use JavaScript to make this work, then I won’t complain.
But if I can do it without JavaScript, then all the better.

Hope that clears up any ambiguity from my previous question. And I look forward to y’all’s answers.

Also, here’s the HTML and CSS code I already have for this project…

body {
    background-color: black;
}

table {
    border-collapse: collapse;
    position: absolute;
}

td {
    width: 64px;
    height: 64px;
    text-align: center;
    justify-content: center;
}

.TileStart {
    border: 1px solid white;
    color: black;
    background-color: white;
}

.Tile {
    color: white;
    background-color: black;
    cursor: pointer;
    display: none;
}

.TileFinish {
    color: black;
    background-color: white;
    cursor: pointer;
    display: none;
}

#A2, #B2 {
    display: table-cell;
}

#A2 {
    border: 1px solid darkgray;
}

#B2 {
    border: 1px solid white;
}

<!DOCTYPE html>
<html>
<head>
    <title>Hidden Tiles Advanced Test</title>
    <link rel="stylesheet" href="hidden-tiles-advanced-styles.css">
    <meta charset="utf-8">
    <meta name="description" content="Testing advanced use of hidden cells in tables.">
</head>
<body>
    <table>
        <tr>
            <td class="TileStart" id="A1">Start</td>
            <td class="Tile" id="A2" onclick="style='background-color: darkgray; color: border: 1px solid white;'"></td>
            <td id="A3"></td>
            <td id="A4"></td>
            <td id="A5"></td>
        </tr>
        <tr>
            <td id="B1"></td>
            <td class="Tile" id="B2" onclick="style='background-color: darkgray; color: border: 1px solid white;'"></td>
            <td class="Tile" id="B3" onclick="style='background-color: darkgray; color: border: 1px solid white;'"></td>
            <td class="Tile" id="B4" onclick="style='background-color: darkgray; color: border: 1px solid white;'"></td>
            <td id="B5"></td>
        </tr>
        <tr>
            <td id="C1"></td>
            <td class="Tile" id="C2" onclick="style='background-color: darkgray; color: border: 1px solid white;'"></td>
            <td id="C3"></td>
            <td class="Tile" id="C4" onclick="style='background-color: darkgray; color: border: 1px solid white;'"></td>
            <td id="C5"></td>
        </tr>
        <tr>
            <td id="D1"></td>
            <td class="Tile" id="D2" onclick="style='background-color: darkgray; color: border: 1px solid white;'"></td>
            <td class="Tile" id="D3" onclick="style='background-color: darkgray; color: border: 1px solid white;'"></td>
            <td class="Tile" id="D4" onclick="style='background-color: darkgray; color: border: 1px solid white;'"></td>
            <td id="D5"></td>
        </tr>
        <tr>
            <td id="E1"></td>
            <td id="E2"></td>
            <td id="E3"></td>
            <td class="Tile" id="E4" onclick="style='background-color: darkgray; color: border: 1px solid white;'"></td>
            <td class="TileFinish" id="E5"></td>
        </tr>
    </table>
</body>
</html>

I’m new to Vue and Cropper.js, and I’m working on a project where I let users upload and crop their avatar.

The problem is that the image inside the cropper appears extremely small (sometimes like 10×10 pixels), even though I tried to style it via CSS. No matter what I do, the cropper is tiny and unusable.

I’ve tried different configurations (Setting fixed width and height on both .image-container and the tag), and even on a clean test project the problem remains.

Here’s my base Vue component:

<template>
    <div>
        <div class="image-container">
            <img ref="image" :src="src"/>
        </div>
    </div>
</template>

<script>
    import Cropper from 'cropperjs'
    import '../assets/cropper.css'

    export default {
        name: 'ImageCropper',
        props: {
            src: String
        },

        data() {
            return {
                cropper: {},
                destination: {},
                image: {}
            } 
        },

        mounted() {
            this.image = this.$refs.image;
            this.cropper = new Cropper(this.image, {
                zoomable: false,
                scalable: false,
                aspectRatio: 1
            });
        }
    }

</script>

<style lang="scss" scoped>
    .image-container {
        width: 800px;
        height: 800px;
        position: relative;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
    }
</style>

Here’s what it looks like:
sample

Context: I have a canvas element on screen for a simple game and I want it to scale with the screen. I calculate the ratio and apply a css scale function through js. When I resize the window, everything works fine. Except if I maximize the window all at once or if I close the developer tools. Then the new size doesn’t apply and I got a tiny display. Even if I wait before applying the scale, it doesn’t work. Both on firefox and chromium the behavior is the same. But eventually I did fix it, by setting width and height instead of using the scale css function. Now, to be fair, this happened on a somewhat old version of firefox, 102, but I was curious if anyone else experienced this or if this was fixed later on.

I’m having an issue getting my React app to authenticate users on the live site via Google Firebase redirect sign-in method.

I’ve followed the documentation for redirect best practises, and created a custom domain (auth.mydomain.com) to point to my firebaseapp.com url, in which I’ve created a CNAME record in the DNS.

I have the domain (mydomain.com & auth.mydomain.com) listed in Authorised Domains under Firebase Auth.

I’ve also added the domains to Google Cloud’s 0Auth2 Credentials under –

Authorised Javascript Origins:

• auth.mydomain.com
• mydomain.com

Authorised Redirect URIs:

• auth.mydomain.com/__/auth/handler

And finally I’ve updated firebase config to include auth.mydomain.com as the authDomain value.

My problem is that if I test it locally using Firebase Studio preview browser, the redirect works successfully, and the user is signed in. But if I then build for the live server and try it there, there is no user signed in/created when redirected back from the consent screen – It simply logs ‘No result from redirect’.

In my firebase service –

import { initializeApp } from 'firebase/app';

//import { getAuth, initializeAuth, browserLocalPersistence } from 'firebase/auth'; 
import {getAuth, setPersistence, initializeAuth, browserLocalPersistence, browserPopupRedirectResolver, indexedDBLocalPersistence, signInWithRedirect, GoogleAuthProvider, signInWithPopup, getRedirectResult } from "firebase/auth";

const firebaseConfig = {
  apiKey: "XXXX",
  authDomain: "auth.mydomain.com",
  projectId: "userapp-XXXX",
  storageBucket: "userapp-XXXX.firebasestorage.app",
  messagingSenderId: "1234",
  appId: "1234",
  measurementId: "XXXX"
};

// Use a global flag to avoid re-initialization
const app = initializeApp(firebaseConfig);

const auth = initializeAuth(app, {
  persistence: [indexedDBLocalPersistence],
  popupRedirectResolver: browserPopupRedirectResolver
});

export async function loginRedirect() {
  const provider = new GoogleAuthProvider();
  await signInWithRedirect(auth, provider);
}

export async function handleRedirectLogin(setUser){

  await getRedirectResult(auth)
  .then((result) => {
    if(result){
        // This gives you a Google Access Token. You can use it to access Google APIs.
        const credential = GoogleAuthProvider.credentialFromResult(result);
        const token = credential.accessToken;

        // The signed-in user info.
        const user = result.user;
        
        // IdP data available using getAdditionalUserInfo(result)
        console.log('Redirect success', user);
        setUser(user);
        return user;
    } else {
        console.log('No result from redirect', result);
    }
  
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = GoogleAuthProvider.credentialFromError(error);
    console.log('Redirect fail', errorMessage);
    throw error;
  });
}

pls assist to use uBlock Origin correct filter syntax to remove the following from the chrome MaxFocus extension preview window on Windows 11 Chrome 137.0.7151.122.

-div.preview-should-pay message within the preview window (not the preview window itself) from all sites

-blur overlay within the preview window (not the preview window itself) from all sites

So far I was able to use

! Jul 7, 2025 https://cnet.com

cnet.com##div.preview-should-pay

to remove the message but I dont have the correct syntax to remove the background blur and I dont know how to write the filter to automatically apply to all sites once the preview window is invoked.

I have tried the uBO zapper and picker but it doesnt specifically get only the background blur, it will only remove the entire ##preview-frame-ui.

Also Behind the Overlay wont work within the preview window. Using “cntrl shift c” I can see the syntax for the background blur but I need more guidance to make a good filter.

I actually got it to work on my first try somehow using uBO when I first installed MaxFocus so I know it’s possible. I uninstalled MaxFocus then reinstalled to ensure I could replicate the procedure on another computer but I haven’t been able to do it again.

Any assistance you can provide would be greatly appreciated.

Thanks

Overlay blur and text to be removed

So basically when I build the electron app from my development pc and install the .exe from dist folder it works fine but as soon as I try to install on other pc I get this error on every single one of them

Hasan Here Exam Portalresourcesappnode_modulesbetter-sqlite3buildReleasebetter_sqlite3.node'
was compiled against a different Node.js version using
NODE_MODULE_VERSION 135. This version of Node.js requires
NODE_MODULE_VERSION 115. Please try re-compiling or re-installing
the module (for instance, using npm rebuild or npm install).

I tried npm rebuild like it says in the error message but that only works for my development pc but not any other pc. Anyone has any solution to this?

Note: I am using next.js as fullstack and sqlLite as database for this project.

I can update JSON file (“room.json”) with PHP with the following function,
How can I update this JSON file via HTML script?
My goal is to update the JSON file via script; The JSON file (‘room.json’) is in the same folder as index.html; The JSON file (‘room.json’) will move with index.html anyway

how can I run it via a script?

Regards..

  editJsonRoom(2,"Deposit",222);

function editJsonRoom(int $id, string $title, $value) {
    
    $file ="room.json";
    $db = getJsonData($file);

    foreach($db["rooms"] as &$room) {
        if ($room["id"] == $id) {

            $room[$title] = $value;

            $myfile = fopen($file,"w");
            fwrite($myfile, json_encode($db, JSON_PRETTY_PRINT));
            fclose($myfile);

            break;
        }
    }
}

So basically when I build the electron app from my development pc and install the .exe from dist folder it works fine but as soon as I try to install on other pc I get this error on every single one of them

Hasan Here Exam Portalresourcesappnode_modulesbetter-sqlite3buildReleasebetter_sqlite3.node'
was compiled against a different Node.js version using
NODE_MODULE_VERSION 135. This version of Node.js requires
NODE_MODULE_VERSION 115. Please try re-compiling or re-installing
the module (for instance, using npm rebuild or npm install).

I tried npm rebuild like it says in the error message but that only works for my development pc but not any other pc. Anyone has any solution to this?

Note: I am using next.js as fullstack and sqlLite as database for this project.

in the HMTL code below;
There are 2 inputs in the form,
I want to get the name of the textbox in which the change is made

function chkLen() {
  var form = document.querySelector("form");
  console.log(form.elements[1].tagName);
}

<form action="myPHP.php" name="myForm" method="POST">
  <input id="dCell" name="dCel" type="text" onChange="chkLen();" value="" >
  <br>
  <input name="h1" type="text" onChange="chkLen();" value="">
  <br>

</form>

I am working on react+vite project using Highcharts . These are the dependencies I am using :

"react": "^18.3.1"
"highcharts": "^12.3.0",
"highcharts-react-official": "^3.2.2"

This is my code for rendering the Highcharts chart:

import React from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import 'highcharts/modules/exporting'; 
import styles from './ExplorationMessageResponse.module.css';
import { IExplorationMessageResponseChart } from './ExplorationMessageResponseChart.type';

const ExplorationMessageResponseChart: React.FC<IExplorationMessageResponseChart> = ({
  chartConfig,
}) => {
  const isMapChart =
    chartConfig?.chart?.type === 'map' ||
    Object.keys(chartConfig?.chart || {})?.includes('map');

  return (
    <HighchartsReact
      highcharts={Highcharts}
      constructorType={isMapChart ? 'mapChart' : 'chart'}
      options={chartConfig}
    />
  );
};

export default ExplorationMessageResponseChart;

So I am receiving the options as chartConfig from the props and passing it on to the HighchartsReact.

So I am getting the options to export the chart as JPEG or PNG . But when I am clicking to export, I am getting Highcharts error #28 in the console.

The charts with chartConfig?.chart?.type === ‘map’ are getting exported. Other type of charts are giving an issue. I even tried other type of charts (line, bar) , by changing the import to import Highcharts from 'highcharts'; , but still no success.

Please let me know, how it can be resolved. Thank you

A client recently asked me to add a “pasting functionality” to the website.

They requested that just like how you can upload files using an input, or drag and drop, she requested that I’d add a method for the files to be uploaded by copying them from Gmail or the file system, and then pasting the into the website.

I tried following the mdn documentation to find a secure way to do this that would work on at least a few modern browsers. Sadly, nothing I tried worked on firefox or google (latest versions).

Here is an example of the intended result:

const menu = document.getElementById('custom-menu');
const copyOption = document.getElementById('copy-option');
const pasteOption = document.getElementById('paste-option');

let lastRightClickEvent = null;

document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
    lastRightClickEvent = e;
    menu.style.display = 'block';
    menu.style.left = `${e.pageX}px`;
    menu.style.top = `${e.pageY}px`;
});

document.addEventListener('click', function() {
    menu.style.display = 'none';
});

pasteOption.addEventListener('click', async function() {
    menu.style.display = 'none';
    const files = await navigator.clipboard.read();
    // THIS IS THE PART THAT FAILS
    // I need this to show the files in the clipboard
    console.log(files);
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* Basic styles for the custom context menu */
        #custom-menu {
            display: none;
            position: absolute;
            background: #fff;
            border: 1px solid #ccc;
            box-shadow: 2px 2px 6px rgba(0,0,0,0.15);
            z-index: 1000;
            min-width: 100px;
            font-family: sans-serif;
        }
        #custom-menu ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        #custom-menu li {
            padding: 8px 16px;
            cursor: pointer;
        }
        #custom-menu li:hover {
            background: #f0f0f0;
        }
    </style>
</head>
<body>
    Right click to see the example context menu.
    <div id="custom-menu">
        <ul>
            <li id="paste-option">Paste</li>
        </ul>
    </div>
    <script src="index.js"></script>
</body>
</html>

Sadly, this version doesn’t actually work. If you look at the files, they are completely empty. Is there any way to ‘paste’ a file from the windows file system into a website? and what are the requirements for this to happen in a secure context?

So, I have a mystery bug that is hard to reproduce, and so far my best suspect is this code:

function getMagicElement(root) {
    var collection = root.getElementsByTagName('span');
    for ( var i = 0; i < collection.length; i++ ) {
        if ( collection[i].textContent.indexOf("Magic") != -1 ) {
            return collection[i];
        }
    }
}

The problem is that it seems that sometimes the wrong element gets returned – one that does not have Magic in its contents.

Now, getElementsByTagName() returns a live HTMLCollection, so hypothetically it’s possible that it changes between the two invocations of collection[i]. However, Javascript is famously single-threaded, so I cannot imagine any scenario where this could actually happen. It would mean that some other thread modified the DOM while I was iterating.

Could this actually happen? Or should I look elsewhere for the elusive source of my bug?