Category: javascript

I am trying to make my entry be deleted from the website but it is not working. after a full review, I still did not see the error . I bought the codes online and tyring to repurpose it from its original purpose. but even with the stock scripts the entry is not deleting. the the file in question are as follows;

                            <tbody>
                            <?php
                            $sql = "SELECT * FROM crypto_currency ORDER BY crypto_name ";
                            $stmt = $conn->prepare($sql);
                            $stmt->execute();
                            $sn=1;
                            while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
                                $id = $row['id'];
                                ?>

                                <tr>
                                    <td><?= $sn++ ?></td>
                                    <td><?= $row['crypto_name'] ?></td>
                                    <td><?= $row['wallet_address'] ?></td>
                                    <td><?= $row['created_at'] ?></td>
                                    <td class="text-center"><a  class="btn btn-primary edit-crypto" data-name="<?= $row['crypto_name'] ?>" data-wallet-address="<?= $row['wallet_address'] ?>"  data-id="<?= $row['id']?>">Update</a> </td>
                                    <td>
                                        <form action="./crypto-currrency.php" method="post" >
                                            <input type="text" hidden name="crypto_id" value="<?=$row['id']?>">
                                            <button class="btn btn-danger delete-crypto-currency"  data-id="<?= $row['id'] ?>" name="delete" ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle text-white"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg></button>
                                        </form></td>
                                </tr>
                                <?php
                            }
                            ?>
          

enter image description here
<script>

    function toast(msg,type){
        return swal({
            type: type,
            title: type,
            text: msg,
            padding: "2em"
        });
    }

    $(".delete-crypto-currency").on('click',function(e){
       e.preventDefault();
       let crypto_id = $(this).data('id');

        swal({
             title: 'Are you sure?',
             text: "You won't be able to revert this!",
             type: 'warning',
             showCancelButton: true,
             confirmButtonText: 'Delete',
             padding: '2em'
         }).then(function(result) {
             if (result.value) {

                  $.ajax({
                        url : '<?= APP_URL.'admin/crypto-currrency.php'?>',
                        type : 'post',
                        dataType : 'json',
                        data : {
                            'delete_crypto_currency' : '',
                            'crypto_currency_id' : crypto_id
                        },
                        },
                        timeout : 45000,
                        success : function(data){
                            console.log(data);


                            if(data.error == 1){
                                toast(data.msg,'success');
                            }else{
                                toast(data.msg,'error');
                            }

                            setTimeout(function(){
                                window.location.href='<?= APP_URL.'admin/crypto-currrency.php'?>';
                            },1000)
                        },
                        error : function(er){
                            // console.log(er.responseText);
                            toast('error network','error');
                        }
                    });

             }
         })

    });

</script>

<?php

if(isset($_POST['delete_crypto_currency'])){
    require './include/adminloginFunction.php';

    $crypto_id = $_POST['crypto_currency_id'];
    
    $del = $conn->prepare("DELETE FROM crypto_currency WHERE id =:id");
    $del->execute(['id'=>$crypto_id]);

    if($del){
        echo json_encode(['error'=>'1','msg'=>'Action successfully']);
    }else{
        echo json_encode(['error'=>'0','msg'=>'Cant delete']);
    }
    exit;
}

When i checked the network logs it wasnt doing through.
i was asked to check the network console to see the feedback
attached is an image to show the feedback i was getting.
like i stated previously, i am a beginner and wouldnt understand the technical terms much. Kindly bare with and bring it down to a lame’s man understanding… thanks

I am trying to overlay a black div (#semi-trans”) over its parent element (.img-container), another div with a background image. This is the html.

/*html*/
<div class="img-container">
        <img src="images/odin-lined.png" alt="Odin Project logo">
        <p>ODIN</p>
        <div id="semi-trans"></div>
    </div>

The edge of the div should align perfectly with the background but it sticks out or is shorter. I have tried setting width to “inherit”, “1rem”, and “1em” but it is not working. I suspect the issue is because of absolute positioning, how do I fix it? Here is the CSS:

/*css*/
.img-container {
    background-image: url(images/sparkle.jpg);
    width: clamp(500px, 800px, 1100px);
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 12px;
}


#semi-trans {
    position: absolute;
    background-color: black;
    opacity: 0.5;
    width: inherit;
    height: 80px;
    z-index: 10;
}

Thanks in advance!

I’m creating a webpage that uses Three.js.

If I use all CDN links from Version 128, my page loads fine:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/loaders/EXRLoader.js"></script>

But I would like to use the most recent version for my project, and according to cdnjs that is version 172.

Switching to this more recent version (172) causes everything to break:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r172/three.min.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/loaders/EXRLoader.js"></script>

My browser’s console reads:

GET
https://cdnjs.cloudflare.com/ajax/libs/three.js/r172/three.min.js
NS_ERROR_CORRUPTED_CONTENT

GET
https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js
NS_ERROR_CORRUPTED_CONTENT

GET
https://unpkg.com/[email protected]/examples/js/loaders/EXRLoader.js
NS_ERROR_CORRUPTED_CONTENT

And naturally, this is followed by more errors that result from not being able to read the scripts.

Apparently I missed the memo on the unspoken rules of which CDN assets are okay to use and which aren’t, and how to look that info up and/or resolve the problem. Can someone please enlighten me? How can I successfully use the current (or at least a recent) version of Three.js through a CDN?

Each table row has a cell with some “expensive” data loaded on demand; before it is loaded, it shows "?". When that row’s button is clicked, the cell is populated.

<table>
  <tbody>

    <!-- rows 1..10  -->

    <tr x-data="{ fetchedData: '?' }">
      <td><span x-text="fetchedData"></span></td>
      <!-- ... -->
      <td><button type="button" onclick="fetchedData = await fetchData('row-11')">Load</button></td>
    </tr>

    <!-- rows 12... -->

  </tbody>
</table>

<script>
  async function fetchData(rowId) {
    let url      = 'https://www.example.com/foo/bar/rowId';
    let response = await fetch(url);
    let result   = await response.text();
    return result;
  }
</script>

I don’t know how to pass the fetched data from the button to the cell.

I have made a websocket server using the ws module and it seems to be working well except that I just noticed the “Active handles” are little above double of my actual active connections.

So I checked the open sockets on the server:

lsof -p <pid-of-node-process> > lsof.log

I will skip sharing ips, but it reported about the same number of ESTABLISHED tcp sockets as Active handles did.

I did some processing on that and determined about 2/3 of the connections are from repeated addresses

cat lsof.log | grep -oP ':3000->S+:' | grep -oP '[0-9A-z-.]+:$' | sort

There are definitely certain problems with connectivity as the clients are in different locations, so the server has to occasionally terminate connections to keep accurate status reporting on the clients. That is done via a basic heartbeat loop:

function heartbeat() {
  this.isAlive = true;
}

var noop = function () {};
var interval = setInterval(function () {
  server.clients.forEach(function (conn) {
    if (conn.isAlive === false) {
      conn.emit("close");
      return conn.terminate();
    }

    conn.isAlive = false;
    conn.ping(noop);
  });
}, options.pingInterval);

server.on('connection', function onOpen(conn, req) {

  ...

  conn.isAlive = true;
  conn.on('pong', heartbeat);
});

In order to get more info on the problem I figured I need to find out when was the last time data was sent over the sockets, thankfully ss can do exactly that.

ss -ti > ss.log

Looking at the lastrcv values, I found some of those sockets are “idle” from about the same time the process was created – ~30 days, but their state is still ESTABLISHED. This seems weird to me, and I suspect there is something happening when the server is terminating the socket, it gets removed from the clients list in my application, but the actual socket on the operating system remains open.

Has anyone have any info on that?

I noticed that the result of Math.pow(10, -4) differs between JavaScript and C#.

JavaScript Math.pow
C# Math.Pow

In JavaScript, it seems the result is expressed as an approximation, possibly due to repeating decimals. For example:
Math.pow(10, -4) // returns 0.00009999999999999999

However, in C#, the result is:
Math.Pow(10, -4) // returns 0.0001

Since both JavaScript and C# use the IEEE 754 standard for floating-point numbers, why does C# return the exact value 0.0001 while JavaScript returns an approximation?

I couldn’t find relevant information in their official documentation. Could someone explain this behavior or point me to resources that clarify the discrepancy?

Here is the code for the dashboard and redux code:

export const Dashboard: React.FC = () => {

const dispatch: AppDispatch = useDispatch();

const { service, loading, error } = useSelector((state: RootState) => state.services);

useEffect(() => {

dispatch(fetchAService());

}, [dispatch]);

useEffect(() => {

console.log('Services after fetch:', service);

}, [service]);

if (error) {

return <p>Error: {error}</p>;

}

return (

<div className="flex-1 space-y-8 p-8">

  {loading ? (

    <SkeletonLoader type="card" />

  ) : (

    <AccountActivity />

  )}

  <div className="space-y-4">

    <h2 className="text-2xl text-left max-sm:text-[1.30rem] font-bold">Our Service</h2>

    <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">

      {loading ? (

        <SkeletonLoader type="gallery" />

      ) : (

        Array.isArray(service) && service.length > 0 ? (

          service.map((myservice) => (

            <Link to="/services" key={myservice.id}>

              <ServiceCard

                title={myservice.name}

                imageUrl={myservice.photoUrl}

                link="/services"

              />

            </Link>

          ))

        ) : (

          <p>No services available</p>

        )

      )}

    </div>

  </div>

  <GalleryButton />

</div>

);

}

Here is the redux code:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

import axios from 'axios';


export const fetchServices = createAsyncThunk('services/fetchServices', async () => {

const response = await axios.get('htttp:localhost:5000/services');

return response.data;

});

interface Service {

id: string;

title: string;

imageUrl: string;

link: string;

}

interface ServicesState {

services: Service[];

loading: boolean;

error: string | null;

}

const initialState: ServicesState = {

services: [],

loading: false,

error: null,

};

const servicesSlice = createSlice({

name: 'services',

initialState,

reducers: {},

extraReducers: (builder) => {

builder

  .addCase(fetchServices.pending, (state) => {

    state.loading = true;

    state.error = null;

  })

  .addCase(fetchServices.fulfilled, (state, action) => {

    state.loading = false;

    state.services = action.payload;

  })

  .addCase(fetchServices.rejected, (state, action) => {

    state.loading = false;

    state.error = action.error.message || 'Failed to fetch services';

  });

},

});

export default servicesSlice.reducer;

I have tried making the render statements a conditional statement and it didn’t work. The data is being fetched and i can see it when i log it to the console but i cannot see it on my UI. i have tried every thing i can think of and it didn’t work out.

I want to implement GTM with firebase analytics, firebase is already configured in my app with these versions:

"@react-native-firebase/analytics": "19.3.0",
"@react-native-firebase/app": "^19.0.0"

Google Analytics is working in both Android and iOS, and GTM is also working for android. But I am facing issues while making it work with iOS. I have followed the official documentation of google that we need to create container folder and then need to place the container json file in that, I have tried that multiple times with different approaches but the GTM is still not working, although the analytics events are working but without GTM (in iOS).

These are the content of my podfile:

pod 'SPTPersistentCache', :modular_headers => true
pod 'DVAssetLoaderDelegate', :modular_headers => true
pod 'GoogleUtilities', :modular_headers => true
pod 'FirebaseCore', :modular_headers => true
pod 'GoogleTagManager', :modular_headers => true

I am using XCode 16.0, and I need assistance in integrating GTM in these versions and a step by step guide how to add the container file, as I have tried with multiple approaches but in the Xcode debug console I get this warning:
“GoogleTagManager warning: No default container found. Container needs to be added to a container folder and added to the target.“

I have tried by creating container folder in ios root folder in my project folder i.e. ios-root/my-project/container/GTM-XXXX.json but it is still not working.
In XCode console i get:
“GoogleTagManager warning: No default container found. Container needs to be added to a container folder and added to the target.“

I am developing a tutorial app using the Cordova Framework7 framework. When I build the APK and test it on my mobile device, I encounter an issue where clicking the back button closes the app. I would like to modify this behavior so that the back button should navigate back to the previous page, unless the current page is the main page (in which case, the app should exit). Could you please help me with the code to implement this functionality?

var app = new Framework7({
    id: 'io.framework7.testapp',
    el: '#app',
    cache: false, /* disable caching */
    theme: theme,
    pushState : true,
    routes: routes,
    popup: {
        closeOnEscape: true,
    },
    sheet: {
        closeOnEscape: true,
    },
    popover: {
        closeOnEscape: true,
    },
    actions: {
        closeOnEscape: true,
    },
    vi: {
        placementId: 'pltd4o7ibb9rc653x14',
    },
    methods:
    {
        onBackKeyDown: function() 
        {
            if (app.views.main.router.url == '/') {
                app.dialog.confirm('Are you sure you want to exit?', 'Exit app', function() {
                    navigator.app.exitApp();
                },
                function() {
                });
            } else {
                mainView.router.back();
            }
        }
    }
});

document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
  document.addEventListener("backbutton", app.methods.onBackKeyDown, false);
}

I had tried this code but its not working. I want to correct my code so that it works

I am creating a pinball game for a school project. I am using p5.js for graphics and Matter.js for the physics. Everything else in my code is working except for the flippers, which keep firing continuously and making gameplay difficult.

I attempted to use attractors to solve the issue such as this repo does [here]
(https://github.com/lonekorean/javascript-physics/blob/master/demos/pinball/my.js)

However my code keeps throwing errors saying that the attracted body is undefined. I don’t know what the issue with this is.

My other option is to remove velocity from the body after firing. Unfortunately, this hasn’t worked and I don’t know why Matter.js does not recognize this issue.

My github repo is here

class Flipper {
  constructor(x, y, w, h, isLeft) {
    this.x = x;
    this.y = y;
    this.width = w;
    this.height = h;
    this.body = Bodies.rectangle(this.x, this.y, this.width, this.height);
    this.velocity = 0.2;

    this.hingeRadius = 5;

    if (isLeft) {
      this.hinge = Bodies.circle(this.x - this.width / 2, this.y, this.hingeRadius, { isStatic: true, label: "hinge" });
    }
    else {
      this.hinge = Bodies.circle(this.x + this.width / 2, this.y, this.hingeRadius, { isStatic: true, label: "hinge" });
    }

    Composite.add(world, this.body);

    let options = {
      bodyA: this.body,
      pointA: isLeft ? { x: - this.width / 2 + 10, y: 0} : { x: this.width / 2 - 10, y: 0 },
      bodyB: this.hinge,
      length: 0,
      stiffness: 1,
    };

    this.constraint = Constraint.create(options);

    Composite.add(world, this.constraint);
  }

  show() {
    // display the flipper
    let pos = this.body.position;
    let angle = this.body.angle;

    push();
    translate(pos.x, pos.y);
    rotate(angle);
    rectMode(CENTER);
    fill(100);
    noStroke();
    rect(0, 0, this.width, this.height);
    pop();

    let hingePos = this.hinge.position;
    push();
    translate(hingePos.x, hingePos.y);
    fill(255);
    noStroke();
    circle(0, 0, this.hingeRadius);
    pop();
  }

  hit(isLeft) {
    if (isUp) {
      if (isLeft) {
        console.log(isUp);
        Body.setAngularVelocity(this.body, -this.velocity);
        // isUp = false;
      }
      else {
        console.log(isUp);
        Body.setAngularVelocity(this.body, this.velocity);
        // isUp = false;
      }
    }
    else {
      Body.setAngularVelocity(this.body, 0);
    }
  }
}

// WASD to control flipper movement
function keyPressed() {
  if (key === " ") {
    if (gameState === "start") {
      if (!bgMusic1.isPlaying()) {
        bgMusic1.play();
      }
      gameState = "play";
    }
  } 
  if (key === "a") {
    isUp = true;
    lFlipper.hit(true);
  }
  if (key === "d") {
    isUp = true;
    rFlipper.hit(false);
  }
}

// just to release flippers
function keyReleased() {
  if (key === "a") {
    isUp = false;
    lFlipper.hit(true);
  }
  if (key === "d") {
    isUp = false;
    rFlipper.hit(false);
  }
  if (key === " ") {
    if (gameState === "play") {
      pinball.launch();
    }
  }
}

iam working on a App idea with Node js as Backend, where i want to ask you if my desired functionality is technical possible or not:

I need to keep track, if a user performs a specific action on another website (e.g. click on a button). This user is using an Angular App on my server.

Now what i thought of was, using my node js server to establish a connection to a given URL and return the html, css and javascript from that server (for example https://stackoverflow.com) and return that to the client.

What i want to know is, if the user has clicked on this element for example:

<span class="-img _glyph">Stack Overflow</span>

So what i thought was, attaching a custom event handler to this element to the DOM, which gets rendered on the client.

Is that possible in some way? I dont need to go deeper than this, so security concerns with login systems ect. can be ignored for now.

Since this is quite a new approach for me, any hints from you would be highly appreciate from me. Regards, Marc

I’m new to Cypress and have set up a bunch of helper functions on their own file. I want one of these functions to return a value, however I am getting stuck with how to do this within Cypress’ synchronous structure.

I keep getting the error

CypressError: cy.then() failed because you are mixing up async and sync code.

I have tried to implement a similar fix as mentioned here Cypress returning Synchronous value within Async command? but to no avail.

My code is as such:

Helper function:

//helperFunction.js
module.exports.schemaChecker = () => {
    cy.get('script:contains("@context")').its('length').then((len) => {
        cy.task('log', 'Schemas: ' + len);
        if (len > 1) {
            return "fail";
        }
    })
}

Test file:

import { schemaChecker, } from '../../support/helperFunctions.js';
// other stuff...

Given('I am on X page', () => {
    cy.viewport(1480, 1000);
    cy.visit(pageUrl);

    schemaChecker().then((response) => {
        if (response == "fail") {
           // Do something
        };
    })
});

I’ve tried a few variations of this (eg: if (schemaChecker() == "fail") {}) but am just unsure how to make it work together and have not been able to find anything useful on Google.

Would anyone be able to point me in the right direction?

I’m creating a banner and a thumbnail, and so far I’ve managed to create a JavaScript that can start the video, when hovering over it with the mouse, like on YouTube’s thumbnails. However, I saw that on YouTube there is an smooth fade-in from the thumbnail to the video, and I’m not getting that.

Whenever I try to do this, the card disappears when reloading the page, and when I hover the mouse over the card the video starts after 1.1 seconds and freezes. It also doesn’t return to the thumbnail after moving the mouse away as it is on YouTube. Can anyone help me by please? Any suggestions?

<a href="watch.html" class="video-card">
  <div class="thumbnail-container">
    <video class="videoPreview" muted src="video/video.mp4" poster="images/Thumbs/Thumb.png" style="border-radius: 8px;aspect-ratio: 16 / 9;"></video>
    <p class="duration">16:24</p>
  </div>
  <div class="video-info">
    <img src="images/Imagem Perfil Professor/professor.jpg" alt="Channel Logo" class="icon" />
    <div class="video-details">
      <h2 class="title">Aula 06</h2>     
    </div>
  </div>
</a>

document.querySelectorAll('.videoPreview').forEach(function(vid) {
  vid.onmouseover = function() {
    this.play();
  }
  vid.onmouseout = function() {
    this.load(); // stop and show poster
  }
})

I have several instances of PIXI.Sprite sharing the same video element as a source for their textures.
My problem it that I need them not to be synced, so I should be able to control each animation separately (e.g. to pause video for the first texture, set random currentTime values for other ones, etc.) Is there any way in Pixijs v8 to load a unique instance of the same video file for every PIXI.Texture?

I’m working on migration to vite from Create React App but i encountered a problem that i couldn’t find an answer for.

Nature of our project is that we have 2 projects (backend and frontend). Frontend generate bundle in 4 versions, and in dev environment it run localhost with example page that have <script> which load config from backend. This config decide which frontend version should be loaded and inject <script> tag that loads it.

Graph of what i want to achieve:
enter image description here

So 2 problems:

1. Vite doesn’t save to disk files while in dev mode. I searched docs and internet for solution and the only solution for now i found was running vite in build --watch and if i want to also have localhost then i need to run vite and vite build --watch simultaneously.

2. Vite in order to properly build require reference to index.tsx in index.html which.. automatically import (and run) all scripts to the dev build hosted on localhost. That prevents me from even trying to run dev and build at the same time because dev already inject code that i need to inject via backend.

Is there anything in vite config that i missed or should i just stay with webpack?