Category: javascript

WARN Possible Unhandled Promise Rejection (id: 0):
[AxiosError: There is no suitable adapter to dispatch the request since :

• adapter xhr is not supported by the environment
• adapter http is not available in the build
• adapter fetch is not supported by the environment]

this error is coming in my renative app , i have lg webos and android tv code in this repo am facing this issue from long time when am starting app for android tv

I’m using the @react-google-maps/api library to render a Google Map in my React app. The map displays markers for couriers and shows directions for selected couriers. I also want to include a TrafficLayer for live traffic updates. However, when I add the TrafficLayer component, my application crashes with the following error:

main.js:152 Uncaught Error: b/369845599
Script error.
    at handleError (http://localhost:5173/static/js/bundle.js:61314:58)
    at http://localhost:5173/static/js/bundle.js:61333:7

If I comment out the TrafficLayer component, everything works fine. Here’s my code:

<GoogleMap mapContainerStyle={mapContainerStyle} zoom={12} center={defaultCenter}>
  {couriers.map((courier) => (
    <Marker
      key={courier.courier_id}
      position={{
        lat: parseFloat(courier.latitude),
        lng: parseFloat(courier.longitude),
      }}
      label={`${courier.courier_id}`}
      onClick={() => handleCourierClick(courier)}
    />
  ))}
  {selectedCourier && directions[selectedCourier.courier_id] && (
    <DirectionsRenderer
      options={{
        directions: directions[selectedCourier.courier_id],
      }}
    />
  )}
  {showTrafficLayer && <TrafficLayer />}
</GoogleMap>

What I’ve Tried:

1. If I comment out the <TrafficLayer /> component, everything works fine.
2. Checked my Google Maps API key for proper setup (enabled all required services like Directions API, Maps JavaScript API, Traffic).
3. Confirmed that the error consistently occurs only when TrafficLayer is included.
   Question:
   What could be causing the TrafficLayer to crash the app with this error? Are there specific prerequisites or configurations needed for TrafficLayer to work? Any suggestions or fixes would be greatly appreciated.

current situation

https://codesandbox.io/p/sandbox/rx8frh

I’m trying to make a thick outline for the specific mesh.
I tried some existing solutions (Outline in @react-three/postprocess and Outlines in @react-three/drei and so on), but these solutions couldn’t fully be satisfied with me. Then I made a custom shader which made with outlines from normal vectors and a depth buffer.
The outline is applied only to the specific object, but it can also be seen through other objects.
I want to make outlines hidden when the specific object is hidden by the other object.
Can anyone help me? Thanks.

Goal Situation

I’m wondering if there is a way to preload data inside a page before actually rendering that page. (Big newbie with react here).

I’m rendering an homepage, with a title being provided by a symfony backend application.
So what is happening there is that the Home page is printed by react directly, and like … a second later the title update itself once provided by the symfony server.
This behavior is nice when loading some elements…but as i’m planning to get mostly all elements from pages from the backend application, that means that each time i will have that delay which is not great for user.

I’m wondering if there isn’t any more elegant way to handle things to remove that delay, like forcing the whole page to load only once everything is loaded inside the page ?

NB : I admit, here the example is a little bit strange as it concern a title and this could be directly handled from react, but this is just for proof of concept before going for more complex and dynamic data. Also it’s more convenient for me to handle translation directly in my backend application rather than with react as it’s the backend who will get the locale.

Here is the code sample of this example.

src/pages/Home.js

import React, { useState, useEffect } from 'react';
import { logout } from '../api/authService';
import axios from 'axios';

const Home = () => {
    const [message, setMessage] = useState('');

    useEffect(() => {
        axios.get(`${process.env.REACT_APP_BACKEND_BASE_URL}/message`)
            .then(response => setMessage(response.data.message))
            .catch(error => console.error('Error fetching message:', error));
    }, []);

    const handleLogout = () => {
        logout();
    };

    return (
        <div>
            <h1>{message}</h1>
            <p>This is the homepage.</p>
            <button onClick={handleLogout}>Logout</button>
        </div>
    );
};

export default Home;

Consider

<javascript>
function onClick() {
  console.log("onclick");
}
function onMouseDown() {
  const child = document.querySelector("#child");
  child.replaceWith(child.cloneNode(true));
  console.log("onmousedown");
}
</javascript>
<body>
  <div id="child" onclick="onClick()" onmousedown="onMouseDown()">click me</div>
</body>

The output onclick does not appear in the browser console unless I comment out the statement child.replaceWith(child.cloneNode(true)). I think that this is because the event target is replaced in the onmousedown event handler, which is invoked before onclick.

Is there a way to make this work? Basically I need to modify div contents in my onmousedown and onmouseup handlers and receive a click event as well.

I have some pages that are largely constructed from a data file using javascript when the page loads. I discovered that anchors constructed as part of this weren’t being recognized by the browsers – the page would just load but not go to the anchor. After some Internet searching, I found some javascript code samples that resolved the issue (almost).

My javascript code works when I test it but when I remove the feedback “alert”, it stops working – that is, it behaves as it did without the code (the page loads but doesn’t go to the anchor).

function setpage() {
   ...
   var target = location.hash.substring(1);
   ...
   if (target) {
      alert('scrolling to >' + target + '<');
      window.scrollTop = document.querySelector(target).offsetTop;
   }
}

The setpage function is executed in the body tag of each page on the site:

<body onload="setpage();">

which is why the test to see if an anchor is the target. The page may be accessed without an internal anchor being referenced. setpage includes more code but this is the only relevant part.

With the alert function in place, the alert shows me the anchor. When I close the alert, the javacript generates the dynamic part of the page (while the alert window is open, the page behind it just shows the static elements in the page) then goes to the anchor location.

I thought initially that perhaps the page was being generated in the background and the alert was merely stopping it from showing. So I put the window.scrollTop into a setInterval function to delay the execution.

setTimeout(function() {
    window.scrollTop = document.querySelector(target).offsetTop;
}, 6000);

but that didn’t have any impact. It still works if the alert is in place but fails when it isn’t.

I do note that it always works with static anchors.

I’m trying to have a button change links when you click the buttons on the menu.

For example, I click button 1 and then I click the Link button it opens webpage 1, but then I click button 2 and then click the Link button, it is still webpage 1 that opens.

How do I make it to where it would change the links every time a button is pressed?

Here is what I had done so far, but after one button is clicked it doesn’t change the link again, even when clicking the other button.

my code is here:

HTML:

<nav class= "menu">
<li id="button1" onclick="button1()"> Page 1</li>
<li id="button2" onclick="button2()">Page 2</li>
</nav>

<div>
<li id="Link" href="#">View Page</li>
</div>

Javascript:

const bttn = document.getElementById("Link");

function button1(){
    bttn.addEventListener('click', function bttn3() {
    var url = "webpage1.html";
        window.open(url);
}

function button2(){
    bttn.addEventListener('click', function bttn3() {
    var url = "webpage2.html";
        window.open(url);
}

I am creating an excel report using PHPExcel and Codeigniter3. Because it is an old project so I had to fix bugs. Right now I’m currently stuck on the excel exporting part.

The person who made this project made a query to take the table value and pass it to controller:

function submitExcel() {
      const table = document.getElementById('takenTable');
      const rows = [...table.rows];
    
      const dataPush = rows.map((row) => {
        return [...row.cells].map((cell) => cell.textContent);
      });
    
      console.log('Data to be sent:', dataPush);
    
      $.ajax({
        type: 'POST',
        url: '<?php echo base_url('reports/exportExcelTakenReport'); ?>',
        data: JSON.stringify(dataPush),
        contentType: 'application/json',
        success: function(response) {
          console.log('Excel export successful:', response);
          alert('Excel file generated successfully!');
        },
        error: function(xhr, status, error) {
          console.error('Error exporting Excel:', error);
          alert('An error occurred while generating the Excel file. Please try again later.');
        }
      });
    }
    document.getElementById("genereteExcel").addEventListener("click", submitExcel);

This is the controller made for the export. The library is available:

public function exportExcelTakenReport()
        {
            try{
                $this->load->library('Excel');
                $data = json_decode(file_get_contents('php://input'), true);
                if(empty($data)){
                    throw new Exception('Data is empty');
                }
                error_log('Received data: ' . print_r($data, true));
            
                // Create a new PHPExcel object
                $objPHPExcel = new PHPExcel();
                $objPHPExcel->setActiveSheetIndex(0);
            
                // Set the header row
                $headerRow = 1;
                foreach ($data[0] as $index => $header) {
                    $objPHPExcel->getActiveSheet()->setCellValueByColumnAndRow($index, $headerRow, $header);
                }
            
                // Set the data rows
                $dataRow = 2;
                foreach ($data as $row) {
                    foreach ($row as $index => $cell) {
                        $objPHPExcel->getActiveSheet()->setCellValueByColumnAndRow($index, $dataRow, $cell);
                    }
                    $dataRow++;
                }
            
                // Set header for the download file
                header('Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
                header('Content-Disposition: attachment;filename="Taken_Report_' . date('YmdHis') . '.xlsx"');
                header('Cache-Control: max-age=0');
            
                // Write the file to PHP output
                $objWriter = PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel5');
                $objWriter->save('php://output');
                exit;
            }
            catch(Exception $err){
                error_log('Error exporting Excel: ' . $e->getMessage());
                return $this->response->JSON(['error' => 'Failed to generate Excel file. Please contact support.']);
            }
        }

Background:

I was trying to do some custom styling for my select element by changing the color and arrow example:

<select :id="'select' + index" class="w-full px-4 py-2 pr-8 bg-theme text-white rounded-md hover:bg-theme/50 appearance-none" @focus="dropdownOpen = true" @blur="dropdownOpen = false">
  <option value="">Select</option>
  <option v-for="subject in subjects" :key="subject" :value="subject">{{ subject }}</option>
</select>
<span class="absolute right-2 top-1/2 transform -translate-y-1/2 text-white cursor-default" @click.stop="toggleDropdown(index)">
    &#9660;
</span>

const dropdownOpen = ref(false)
const toggleDropdown = (index: number) => {
    dropdownOpen.value = !dropdownOpen.value;
    if (dropdownOpen.value && document.getElementById(`select${index}`)) {
        const evt = new MouseEvent('click')
        document.getElementById(`select${index}`)?.dispatchEvent(evt)
    }
}

Problem:

Currently when trying to expand the select option from another element not working out. You can see on the snippet below itself.

function expand() {
    const evt = new MouseEvent('focus')
    const el = document.getElementById(`selectbox`);
    el.dispatchEvent(evt)
}

<select id="selectbox">
  <option id="option1">A</option>
  <option id="option2">B</option>
  <option id="option3">C</option>
</select>


<button id='test' onclick="expand()">abc</button>

How can we expand select element from another element?

I’m working on a project where I set a graphic object in motion, then pause and resume it after specific time intervals. However, I’m having trouble with the resume functionality.

Here’s a simplified version of my code:

class ProjectMain {

    init() {

        let graphic = new GraphicObject( nc.graphicAssets.WhiteBox, nc.mainScene, "Box" );
        graphic.position.addMotion.y( -300, 300, 2 );

        // create a PauseEvent
        nc.definePauseEvent("BoxPause");

        // wait 3 seconds, then call "pause", passing BoxPause as the PauseEvent
        nc.waitThen( 3, nc, "pause", [nc.pauseEvents.BoxPause] );

        // wait 6 seconds, then call "resume"
        nc.waitThen( 6, nc, "resume", nc.pauseEvents.BoxPause );
     }
}

The motion is correctly paused after 3 seconds, but the resume call after 6 seconds doesn’t seem to work. The box never resumes its motion.

What am I missing or doing wrong? How can I resume the motion?

When testing on my local environment this works fine but when pushed to the main branch and delayed on Vercel with a Postgres DB it behaves strangely. Creating projects and skills works fine but when deleting anything these are deleted from the DB but the site is not updated properly and more projects disappear although they are still in the DB.

skill-view-card.tsx

'use client'

import { deleteSkill, createProject, deleteProject } from '@/app/lib/actions';import { Button } from '@nextui-org/react';
import { TrashIcon } from '@heroicons/react/20/solid';


export default function SkillViewCard({ skills, projects }: { skills: string; projects: string }) { // after doing something these are fetching old ones
  const skillsParsed = JSON.parse(skills); // these need to refetch
  const projectsParsed = JSON.parse(projects);

  function toTitleCase(str: string) {
    return str.replace(/wS*/g, (text: string) => text.charAt(0).toUpperCase() + text.substring(1).toLowerCase());
  }

  return (
    <div className="p-8 border w-full h-full shadow-lg rounded-md bg-white">
      <div className="columns-2">
        <div className="text-left text-xl font-bold">
          {toTitleCase(skillsParsed?.description) || 'No description available'}
        </div>
        <Button onClick={() => { deleteSkill(skillsParsed.id);}}>
          <TrashIcon className="h-4 w-4 content-right" />
        </Button>
      </div>
      <div className="columns-1">
        <fieldset>
          {projectsParsed && projectsParsed.length > 0 ? (
            projectsParsed
              .filter((project: { skill_id: string }) => project.skill_id === skillsParsed?.id)
              .map((project: { title: string, id: number }) => (
                <div key={project.id}>
                  <div>{project.title}</div>
                  <Button onClick={() => { deleteProject(project.id);}}>
                    <p>delete</p>
                  </Button>
                </div>
              ))
          ) : (
            <p className="text-gray-500">No projects available</p>
          )}
        </fieldset>
      </div>
      <div className="columns-2"></div>
      <input
                type="text"
                placeholder="Enter project title"
                className="border rounded-md p-2 w-half"
                onKeyDown={(e) => {
                    if (e.key === 'Enter') {
                        e.preventDefault();
                        const formData = new FormData();
                        formData.append('title', e.currentTarget.value);
                        formData.append('skill_id', skillsParsed.id);
                        createProject(formData);
                        e.currentTarget.value = '';
                    }
                }}
            />    
        </div>
  );
}

@/app/lib/actions

'use server';
import { sql } from '@vercel/postgres';
import { redirect } from 'next/navigation';

export async function createSkill(formData: FormData) {
    const skillDescription = formData.get('skill') as string | null;

    await sql`
    INSERT INTO skills (description)
    VALUES (${skillDescription || ''})
  `;

  redirect('/test-page?refetch=true'); // this needs to refetch the skills
}

export async function deleteSkill(id: number) {
    await sql`
    DELETE FROM skills WHERE id = ${id}
    `;

    redirect('/test-page?refetch=true');
}

export async function createProject(formData: FormData) {
    const projectTitle = formData.get('title') as string | null;
    const skillId = formData.get('skill_id') ? parseInt(formData.get('skill_id') as string, 10) : null;

    await sql`
    INSERT INTO projects (title, skill_id)
    VALUES (${projectTitle || ''}, ${skillId || ''})
  `;

  redirect('/test-page?refetch=true');
}

export async function deleteProject(id: number) {
    await sql`
    DELETE FROM projects WHERE id = ${id}
  `;
  redirect('/test-page?refetch=true');
}