Category: javascript

I am running a Puppeteer script on Heroku which logs into a company website, navigates to a reports page, selects a tab which triggers an ajax call (i believe) and displays the data related to the tab selected.

When the script runs in puppeteer (headless = false so i can observe) it clicks everything correctly, and the UI appears correct however when it goes to download the file, the original data (from page load) is downloaded, but not the data which is currently displayed in the UI after selecting the tab.

When i manually interact with the chromium browser that is being run by the server and click the download button myself, it downloads the correct data.

I have added all sorts of delays and wait for request idle functions.. however nothing seems to fix the issue.

Is there anything obvious as to why this is happening?

I should note it is a relatively new issue, the same script was working on this website one week ago.

    await page.waitForSelector('ul.nav.nav-tabs > li:nth-child(4) > a'); // Wait for the fourth <li> to be available
    await page.click('ul.nav.nav-tabs > li:nth-child(4) > a'); // Click the <a> inside the fourth <li>
    
    await delay(3000)

    console.log(7)

    // open the filters and add the activityReference to the filter options
    await page.evaluate(() => {
      // Select the parent div
      const parentDiv = document.querySelector('.col-3.col-md-6.text-right.ng-binding');
      // Select all buttons within the parent div
      const buttons = parentDiv.querySelectorAll('button');
      console.log("buttons1: ", buttons)
      // Click the third button
      buttons[2].click();
    });

    console.log(8)

    await page.evaluate(() => {
      const labels = Array.from(document.querySelectorAll('label.form-check-label'));
      const targetLabel = labels.find(label => label.textContent.includes('ActivityReference'));
      if (targetLabel) {
          targetLabel.click();
        }
    });
  
    console.log(9)

    // save and close the filter modal
    await page.waitForSelector('button[ng-click="close()"]', { visible: true });

    await page.click('button[ng-click="close()"]');

    console.log(10)
    
    await delay(3000)

    // select the download button
    await page.evaluate(() => {
      // Select the parent div
      const parentDiv = document.querySelector('.col-3.col-md-6.text-right.ng-binding');
      // Select all buttons within the parent div
      const buttons = parentDiv.querySelectorAll('button');
      console.log("buttons2: ", buttons)
      // Click the third button
      buttons[1].click();
  });

    // ensure file is downloaded
    await delay(10000)

I have tried a myriad of ways to click the tab button which loads the new data prior to downloading. Each method shows the button being clicked and the correct data loading, however not matter how long I wait before clicking the download button, the old data is still downloaded.

I’ve made a Flappy Bird clone using vanilla JavaScript.

It runs pretty well on all non-mobile browsers.

However, when I play it using Chrome or Safari on iPhone, the tapping meant to make the bird jump causes the sliding obstacles to glitch (briefly shake in place). This happens every time I tap but only when I tap.

All of my animations use requestAnimationFrame().

I thought increased load during implementation of the jump() logic would be the cause, but the issue persists even after I have disabled:

-jump()
-crash detection
-gravity
-score tracker

Essentially, the only thing left running are my obstacles animation and the ‘touchstart’ event listener with no callbacks, yet the issue persists.

I tried preventDefault() on the event listener, but still to no avail.

Here is the animation which slides the objects:

function runShips() {
    //create random ship every 5 seconds
    generateShipsInterval();

    let previousTime = null;

    function slideShipsAnimation(currentTime) {
        if (!previousTime) {
            previousTime = currentTime;
        }
        let dt = (currentTime - previousTime) / 1000;
        document.querySelectorAll('.ships').forEach(ship => {
            ship.style.left = `${(parseFloat(getComputedStyle(ship).left) - 3 * dt * 60)}px`;
        });

        previousTime = currentTime;
        loops.slideShipsAnimation = requestAnimationFrame(slideShipsAnimation);
    }
    loops.slideShipsAnimation = requestAnimationFrame(slideShipsAnimation);

    //clear ships that are out of the screen every 10 seconds
    clearShipsInterval();
}

and here is my event handler whose logic I have disabled:

if (isMobile()) {
    //listen for tap
    document.addEventListener('touchstart', function(event) {
        event.preventDefault(); 
        handleTap();
    });
}

function handleTap() {
    if (mode === gameStates.start) {
        getReady();
        return
    }
    if (mode === gameStates.play) {
        jump();
        return
    }
    if (laughingElon.style.display === 'block') return

    if (mode === gameStates.crash) {
        getReady();
        return
    }
    if (mode === gameStates.ready) {
        startGame();
        jump();
        return
    }
}

function jump() {
    // const x = 32;

    // birdFrames.forEach((frame, index) => {
    //     setTimeout(() => {
    //         bird.src = frame;
    //     }, index * x);
    // });

    // velocity = -9.5;
}

I am trying to write a log4j2 xml file where some of the appenders will only allow logs if the logger name starts with a specific word, for example “foo”. In this instance I’m using a Kafka filter to write to an event hub.

To get into the weeds a bit — I’m using a shell script to write the xml file and using the shell script as an init file for a databricks compute cluster and then using that cluster to send logs to the event hub instance. But without using a ScriptFilter, the rest of the process works fine in that I’m able to listen to the messages the event hub receives, and the messages are what I would expect to see.

I’ve tried many variations of this ScriptFilter with no luck. Whenever I remove the ScriptFilter, it logs everything, but when I add back in any variation of my ScriptFilter, the event hub stops receiving any messages at all.

Here are some things I’ve tried:

<!-- in Appenders section -->
<Kafka name="kafkaAppender" topic="eventHubInstanceName">
    <JsonTemplateLayout eventTemplateUri="path/to/template.json"/>
    <Property name="bootstrap.servers">event-hub-namespace.servicebus.windows.net:9093</Property>
    <Property name="sasl.mechanism">PLAIN</Property>
    <Property name="security.protocol">SASL_SSL</Property>
    <Property name="sasl.jaas.config">
      org.apache.kafka.common.security.plain.PlainLoginModule required username="$ConnectionString" password="[REDACTED]";
    </Property>
    <Filters>
      <ScriptFilter onMatch="ACCEPT" onMismatch="DENY">
      <Script name="scriptFilter" language="javascript"><![CDATA[
         var loggerName = logEvent.getLoggerName();
         loggerName.startsWith("foo");
      ]]></Script>
      </ScriptFilter>
    </Filters>
</Kafka>

I’ve also tried this variation of the Script:

<Script name="scriptFilter" language="javascript"><![CDATA[
  if (logEvent.getLoggerName().startsWith("foo")) {
    return true;
  }
    return false;
  ]]>

and this one:

<Script name="scriptFilter" language="javascript"><![CDATA[
  if (logEvent.getLoggerName().startsWith("foo")) {
    true;
  }
    false;
  ]]>

I’ve also tried moving the filter out of the appender section entirely and adding it to the Root section instead along with the AppenderRef to kafkaAppender, as well as moving the filter into its own Logger and adding the AppenderRef to it that way. Nothing works — whenever I add in a ScriptFilter, nothing logs at all.

I’m unable to use a regex filter here because it only checks the message itself, whereas I want to check the name of the logger.

Please help!

I can see that the canvas is there from dev tools and a outline goes around the canvas just fine.
I don’t get any errors from the console.

Firefox Version: 128.0.2 (64-bit)
I’m running Pop-os.

const canvas = document.getElementById("canvas")

const ctx = canvas.getContext("2d")

ctx.fillStyle = "red"
ctx.fillRect(30, 30, canvas.width, canvas.height)

<canvas id="canvas" width="300" height="300"></canvas>

The canvas should be completely filled with red, which it is on chrome.

I want an Angular test that mocks keydown of keys 1 and 2 and then assert that the value of the input is 12

My html:

<input
  id="myInput"
/>

My test:

fit('should update input value on key press', () => {
    const inputDebugElement = fixture.debugElement.query(
      By.css('#money-input')
    );
    const inputElement = inputDebugElement.nativeElement as HTMLInputElement;

    inputElement.value = '';
    inputElement.dispatchEvent(new Event('input'));

    const event1 = new KeyboardEvent('keydown', { key: '1' });
    const event2 = new KeyboardEvent('keydown', { key: '2' });

    inputElement.dispatchEvent(event1);
    inputElement.dispatchEvent(event2);

    fixture.detectChanges();

    expect(inputElement.value).toBe('12');
  });

The current result of my test:

this my index.tsx file:

import React from "react";
import UserInput from "./userInput";

import {
  View,
  StatusBar,
} from 'react-native';


const App = ( ) => {
  return (
    <View>
      <StatusBar hidden/>
      <UserInput/>
    </View>
  );
};


export default App;

and this my userInput file:

import { View, Text } from 'react-native';
import React from 'react';

const UserInput = ( text: string ) => {
  return (
    <View>
      <Text>
        { text }
      </Text>
    </View>
  );
};

export default UserInput;

my problem on index.tsx file on tag
this tag i made it has 1 param. I cant give a value to it.

I google it but i cant find any answer.

I’m having a few issues with a Flask application using socketIO.

I have an external device on IP 10.0.0.144 sending websocket messages to my application on 10.0.0.218:8089. I can see the incoming websocket messages in the PyCharm console.

10.0.0.144 - - [31/Jul/2024 11:21:43] code 400, message Bad request syntax ('{"ts":1722439304,"dio":{"dio1":{"in":true},"dio2":{"in":true},"dio3":{"label":"Link","in":true},"dio4":{"in":true}},"ain":{"ain1":{"voltage":12},"ain2":{"voltage":2},"ain3":{"voltage":10},"ain4":{"voltage":0}}}') 

10.0.0.144 - - [31/Jul/2024 11:21:43] "{"ts":1722439304,"dio":{"dio1":{"in":true},"dio2":{"in":true},"dio3":{"label":"Link","in":true},"dio4":{"in":true}},"ain":{"ain1":{"voltage":12},"ain2":{"voltage":2},"ain3":{"voltage":10},"ain4":{"voltage":0}}}" HTTPStatus.BAD_REQUEST

Additionally I’m trying to push these messages to an asynchronous HTML page, but the messages aren’t being pushed across from what I can see.

Flask code:

I wanted this to process the incoming messages and then push them to an asynchronous HTML page. The messages are being processed, and I have them stored in a list object. I’m really only concerned with messages originating from 10.0.0.144.

I’m honestly not even sure if this is the best approach from a project standpoint, but I’ve never done anything this advanced before.

from flask_socketio import SocketIO, emit
from flask import Flask, render_template, url_for, copy_current_request_context
from random import random
from time import sleep
from threading import Thread, Event

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
app.config['DEBUG'] = True

#turn the flask app into a socketio app
socketio = SocketIO(app, async_mode=None, logger=True, engineio_logger=True)

thread = Thread()
thread_stop_event = Event()

messages = []

def get_values():
    while True:
        message = socketio.on(1024)
        while not thread_stop_event.is_set():
            messages.append(message)
            # Send the message to all connected clients
            socketio.emit('new_message', {'message': message})
            print(message)
            socketio.sleep(2)



@app.route('/')
def index():
    #only by sending this page first will the client be connected to the socketio instance
    return render_template('index.html')

@socketio.on('connect', namespace='/test')
def test_connect():
    # need visibility of the global thread object
    global thread
    print('Client connected')

    #Start the function to emit msgs thread only if the thread has not been started before.
    if not thread.is_alive():
        print("Starting Thread")
        thread = socketio.start_background_task(get_values)

@socketio.on('disconnect', namespace='/test')
def test_disconnect():
    print('Client disconnected')


# Start the Flask app with SocketIO
socketio.run(app, host='10.0.0.218', port=8089, allow_unsafe_werkzeug=True)

JS code:

$(document).ready(function(){
    //connect to the socket server.
    var socket = io.connect('http://10.0.0.218' + document.domain + ':' + location.port + '/test')
    var messages_received = [];

    //receive details from server
    socket.on('new_message', function(msg) {
        console.log("Received msg" + msg.number);
        //maintain a list of ten msgs
        if (messages_received.length >= 10){
            messages_received.shift()
        }
        messages_received.push(msg.number);
        messages_string = '';
        for (var i = 0; i < messages_received.length; i++){
            messages_string = messages_string + '<p>' + messages_received[i].toString() + '</p>';
        }
        $('#log').html(messages_string);
    });

});

Here’s a sample of the output console:

`* Running on http://10.0.0.218:8089
Press CTRL+C to quit

* Restarting with stat
  Server initialized for threading.
  Werkzeug appears to be used in a production deployment. Consider switching to a production web server instead.

* Debugger is active!

* Debugger PIN: 123-630-169
  RMoYImBp0_FvWs_lAAAA: Sending packet OPEN data {'sid': 'RMoYImBp0_FvWs_lAAAA', 'upgrades': ['websocket'], 'pingTimeout': 20000, 'pingInterval': 25000}
  10.0.0.218 - - [31/Jul/2024 11:54:54] "GET /socket.io/?EIO=4&transport=polling&t=P49W5nO HTTP/1.1" 200 -
  RMoYImBp0_FvWs_lAAAA: Received packet MESSAGE data 0/test,
  RMoYImBp0_FvWs_lAAAA: Received request to upgrade to websocket
  emitting event "new_message" to all [/]
  RMoYImBp0_FvWs_lAAAA: Sending packet MESSAGE data 0/test,{"sid":"Fzb-QYWF3SFFBr4EAAAB"}
  10.0.0.218 - - [31/Jul/2024 11:54:54] "POST /socket.io/?EIO=4&transport=polling&t=P49W64r&sid=RMoYImBp0_FvWs_lAAAA HTTP/1.1" 200 -
  10.0.0.218 - - [31/Jul/2024 11:54:54] "GET /socket.io/?EIO=4&transport=polling&t=P49W64s&sid=RMoYImBp0_FvWs_lAAAA HTTP/1.1" 200 -
  RMoYImBp0_FvWs_lAAAA: Upgrade to websocket successful
  Client connected
  Starting Thread
  emitting event "new_message" to all [/]
  emitting event "new_message" to all [/]
  10.0.0.144 - - [31/Jul/2024 11:54:59] code 400, message Bad request syntax ('{"ts":1722441301,"dio":{"dio1":{"in":true},"dio2":{"in":true},"dio3":{"label":"Link","in":true},"dio4":{"in":true}},"ain":{"ain1":{"voltage":12},"ain2":{"voltage":2},"ain3":{"voltage":10},"ain4":{"voltage":0}}}')
  10.0.0.144 - - [31/Jul/2024 11:54:59] "{"ts":1722441301,"dio":{"dio1":{"in":true},"dio2":{"in":true},"dio3":{"label":"Link","in":true},"dio4":{"in":true}},"ain":{"ain1":{"voltage":12},"ain2":{"voltage":2},"ain3":{"voltage":10},"ain4":{"voltage":0}}}" HTTPStatus.BAD_REQUEST -
  emitting event "new_message" to all [/]
  emitting event "new_message" to all [/]
  emitting event "new_message" to all [/]
  10.0.0.218 - - [31/Jul/2024 11:55:05] "GET /socket.io/?EIO=4&transport=websocket&sid=RMoYImBp0_FvWs_lAAAA HTTP/1.1" 200 -
  10.0.0.218 - - [31/Jul/2024 11:55:05] "GET / HTTP/1.1" 200 -
  Client disconnected
  10.0.0.218 - - [31/Jul/2024 11:55:05] "GET /static/application.js HTTP/1.1" 304 -`

HTML page:

<!DOCTYPE html>
<html>
<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.min.js"></script>
    <script src="static/application.js"></script>

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
  <div class="jumbotron">
    <h2>Asynchronous Flask Communication</h2>
    <p>Websocket Messages from field devices.</p>
  </div>
</div>

</div>

<div class="container" id="content">
    <div class="row">
        <p>Asynchronous page updates will appear here:</p>
        <h3>messages:</h3>
        <div id="log">
        </div> <!-- /#log -->
    </div>
</div>


</body>
</html>

I’m making a website that takes input (text) from a user, finds specific words in the text, and returns the full text with the words highlighted. Although I want to display the result in a new tab, the best thing I can do is a pop-up on Google Chrome.

When I tried using the “_blank” attribute that opens a new tab, I can’t write to that tab using “innerHTML.” Any ideas or advice will be greatly appreciated.

i am working on a extension which stores some data now once i click on the website the extension is being closed i am using document.activeElement.

have done research not getting any conclusion. don’t want to close the extension.

i have a layout

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <PageHeader />
        <main className="flex flex-col items-center justify-between pt-24">
          {children}
        </main>
        <PageFooter />
      </body>
    </html>
  );
}

and a page using that

export default function Home() {
  return (
    <RootLayout>
      <ImageCarousel />
      <About />
      <PortfolioSection />
      <TestimonialSection />
      <NewBlogSection />
      <ContactFormSection />
    </RootLayout>
  );

but when the page loads everything after the {children} is duplicated an there is the run time error Error: Hydration failed because the initial UI does not match what was rendered on the server.
which looking into doesn’t seem to help all that much

regardless of what is passed as a child in as children into the rootlayout it happends

so I’m fairly new to coding, GitHub pages all of it. I am trying to serve my website over there which includes three 3d models (their files being larger than 100mb) which I have added to the git repository using git lfs. I was successfully able to set up my repository but my models won’t load and despite everything I’ve tried, I end up with this error message:

SyntaxError: Unexpected token 'v', "version ht"... is not valid JSON
    at JSON.parse (<anonymous>)
    at GLTFLoader.parse (GLTFLoader.js:350:17)
    at Object.onLoad (GLTFLoader.js:245:11)
    at three.module.js:44214:38

Everything worked while I was building the site and serving it on my local server, but trying to get this published has been a real pain. I would appreciate any help!

Here is my repository link

and here is a snippet of the code in question:

const loader = new GLTFLoader(loadingManager);
let model;
loader.load('https://mxmadu.github.io/pretty-hurts/models/PHUK_PHACE_A.glb', function(gltf) {

  model = gltf.scene;
  model.rotation.set(0, Math.PI, 0);
  model.receiveShadow = true;
  scene.add(model);

I tried hosting the files on other file hosting platforms (nothing fancy just dropbox and google drive to see if those would give different results because I found out that the pointer file GitHub had created in the process of storing this large file wasn’t the right format?)

So I think I just need to figure out what I can change in my code to fix this

Let’s consider this to be the component:

const Alert = () => {
        useEffect(() => {
            alert("hello");
        }, []);
        return <div>Alert</div>;
    };

My understanding is that useEffect runs after the browser has painted.

But in this code, why does the alert pop up before the browser is painted completely?

NOTE: If it does not happen the first time, try refreshing it.

I am looking for a solution to call different functions as per orientation

if (window.innerHeight > window.innerWidth) {
  alert("You are in portrait mode");
  <Portrait />
}

if (window.innerHeight < window.innerWidth) {
  alert("You are in landscape mode"); 
  <Landscape />
}

Written the following functions

export default function Landscape() {
  return (
    <main>...</main>
  );
}

function Portrait() {
  return (
    <main>...</main>
  );
}

Problem

• Every time, only Landscape function getting called (I understand because I mentioned default)
• Atleast, I was expecting Portrait function to be called, when device in portrait mode

Please help to get it done

Is there a way to pre-fill an Input Collector node using JavaScript in ForgeRock AM?

I have a case where I would like to have the user’s username pre-filled when they are trying to authenticate.

I was facing the problem of Updating Data in Database with PHP.

My Code for the above is:

<tbody>
     <?php
     $i = 1;
     if ($num = mysqli_num_rows($result) > 0) {
         while ($row = mysqli_fetch_assoc($result)) {
             echo "
             <tr>
             <td>" . $i++ . "</td>
             <td>" . $row['course_name'] . "</td>
             <td>" . $row['semester'] . "</td>
             <td>
             **<a href='javascript:?$index=$row[srno]&cn=$row[course_name]&sems=$row[semester]' onclick='openEditPopup()'>
             <button class='edit-btn' ><i class='fa-solid fa-pen-to-square'></i> Edit</button>
             </a>**
             <a href='course.php?srno=" . $row['srno'] . "'><button class='dlt-btn' name='deleteCourse'><i class='fa-solid fa-trash'></i> Delete</button></a>
             </td>
             </tr>
             ";
         }
     }
     ?>
</tbody>

I want My popup to be opened where i can edit and it should be on the page itself while fetching details in the input tag of the popup so as to edit.

But Either Popup works by the above Code OR only Values i.e. index, cn and sems get fetched without opening the popup if i use this line:

**<a href='course.php?$index=$row[srno]&cn=$row[course_name]&sems=$row[semester]' onclick='openEditPopup()'>
  <button class='edit-btn' ><i class='fa-solid fa-pen-to-square'></i> Edit</button>
  </a>**

What is the Soln for this?

I tried watching tutorials and reading articles of using on click with anchor tag but none of them worked as i have that Popup Code where i want to edit.