Category: javascript

I’m currently developing a client-side javascript program that allows users to preview documents for printing in the browser via an API call.
The goal is to display the documents in A4 format, each containing a preview of HTML content extracted from a JSON file obtained through the API.
An example of the HTML structure i obtain:

<div class="a4" style="padding: 20px" size="A4" contenteditable="true" fileid="1">
    <div class="content" fileid="1" contentid="1">
        <p class="paragraph-wrapper" lang="it-IT" align="left">
            <span style="font-family: Arial, serif;">
                <span style="font-size: small;">
                    <span style="font-size: small;"> 
                        Some text here1
                    </span>
                    <span style="font-size: small;"> 
                        Some text here2
                    </span>
                    <span style="font-size: small;"> 
                        Some text here3
                    </span>
                </span>
            </span>
        </p>
        <p class="paragraph-wrapper" lang="it-IT" align="left">
            <span style="font-family: Arial, serif;">
                <span style="font-size: small;">
                    <span style="font-size: small;"> 
                        Other text here1
                    </span>
                    <span style="font-size: small;"> 
                        Other text here2
                    </span>
                    <span style="font-size: small;"> 
                        Other text here3
                    </span>
                </span>
            </span>
        </p>
    </div>
</div>

I uploaded an image to provide more context.

The main issue I’m encountering arises when the text within one of the HTML blocks exceeds the maximum height of the container (.content), as indicated by the current display with a blue border. Currently, I’m addressing this problem by managing the transfer of a node from one page to another.

My starting approach involves iterating through nodes with the .paragraph-wrapper class. When one of these nodes reaches the maximum height, I add it to a new dynamically created .a4 page. However, iterating the nodes in its entirety, I lose precision in the text positioning within the new block, especially if the text/child nodes inside the parent node is/are a lot.

So, I’m looking for a way to split a container node, such as .paragraph-wrapper, into two distinct nodes if one of its children exceeds the bottom border of the .content container. Each new node should retain the same parent divs as the original node and the associated inline styles.

An example of what I would like to achieve starting from the previous code:

<div class="a4" style="padding: 20px" size="A4" contenteditable="true" fileid="1">
    <div class="content" fileid="1" contentid="1">
        <p class="paragraph-wrapper" lang="it-IT" align="left">
            <span style="font-family: Arial, serif;">
                <span style="font-size: small;">
                    <span style="font-size: small;"> 
                        Some text here1
                    </span>
                    <span style="font-size: small;"> 
                        Some text here2
                    </span>
                    <span style="font-size: small;"> 
                        Some text here3
                    </span>
                </span>
            </span>
        </p>
        <p class="paragraph-wrapper" lang="it-IT" align="left">
            <span style="font-family: Arial, serif;">
                <span style="font-size: small;">
                    <span style="font-size: small;"> 
                        Other text here1
                    </span>
                    <span style="font-size: small;"> 
                        Other text here2
                    </span>
                </span>
            </span>
        </p>
    </div>
</div>
***Here finish the first A4 page***


***Here start the second A4 page***
<div class="a4" style="padding: 20px" size="A4" contenteditable="true" fileid="1">
    <div class="content" fileid="1" contentid="2">
        <p class="paragraph-wrapper" lang="it-IT" align="left">
            <span style="font-family: Arial, serif;">
                <span style="font-size: small;">
                    <span style="font-size: small;"> 
                        Other text here3
                    </span>
                </span>
            </span>
        </p>
    </div>
</div>

A portion of my current code:

const content = document.querySelectorAll('.content');
const a4HeightWithoutPadding = evaluateContentHeight();
const lastContent = content[content.length - 1];

staticNodeArray.forEach(node => {
    // Append node to last content element
    lastContent.appendChild(node);

    node.className = 'paragraph-wrapper';

    const nodeOffsetBottom = node.offsetTop + node.offsetHeight;

    // If the parent node reaches the bottom side of .content, make a new A4 page
    if (nodeOffsetBottom > a4HeightWithoutPadding) {
        // Increment contentId for new page
        contentId += 1;

        // Create a new A4
        const newPage = createNewPage(fileId, contentId);

        // Append the A4 to the container
        container.appendChild(newPage);

        // Moving the overflowed content to the new A4
        const newContent = newPage.querySelector('.content');
        newContent.appendChild(node);
    }
});

// Create a new A4 page
function createNewPage(fileId, contentId) {
    const newA4Page = document.createElement('div');
    newA4Page.className = 'a4';
    newA4Page.setAttribute('style', 'padding: 20px');
    newA4Page.setAttribute('size', 'A4');
    newA4Page.setAttribute('contenteditable', 'true');
    newA4Page.setAttribute('fileId', fileId);
    newA4Page.innerHTML = `<div class="content" fileId=${fileId} contentId=${contentId}></div>`;

    return newA4Page
} 

function evaluateContentHeight() {
    const a4NodeList = document.querySelectorAll('.a4');

    // The last A4 created
    const a4 = a4NodeList[a4NodeList.length - 1];    

    // Calculate the A4 height
    const a4Height = a4.clientHeight;

    // Calculate the value of top and bottom padding
    const style = window.getComputedStyle(a4);
    const paddingTop = parseFloat(style.paddingTop);
    const paddingBottom = parseFloat(style.paddingBottom);
    
    // Calculate the final value of A4 height without the padding of the A4 
    const a4HeightWithoutPadding = a4Height - paddingTop - paddingBottom;
    
    return a4HeightWithoutPadding
}

I made an item in zabbix that runs a local PS1 file on the host machine

This is the item, when I access the specific Host and use the execute now function it works perfectly and runs the ps1 file

I needed to make Apps Script carry out this process of executing the item on a specific host (I would pass the host to the code and it to Zabbix).

is it possible to do that?

I created a zabbix API token and tried to run this item but without success, I didn’t find any video or documentation that does something similar

this is my first post here.
I’m working on a group school project and made a PWA which is hosted on an external Cloudflare server with a certificate. For the duration of testing, the PWA sent data to that server through NodeJS. Now, after installing the PWA on a mobile device, I would like it to communicate with another server instead, a Raspberry PI with a fixed IP acting as a Wifi hotspot in order for the PWA to send data in the database it’s hosting, and effectively only keep the original server as the server that permits downloading and installing the PWA on devices.

Now my issue is, when I change the NodeJS code in the PWA to indicate which server it’s supposed to establish a connection with, the PWA still communicates with the server hosting it instead of contacting the new server. I tried changing the ip address and port in the PWA’s NodeJS code to indicate the new server it’s supposed to send data to, but when testing, it still sends its data to the host server instead of establishing a new connection to the rpi server.

All help is appreciated.

I’m working on an AWS CDK project using TypeScript and encountering an issue with module resolution when running cdk synth or cdk deploy (the build is successful). My project structure includes internal modules that I’m trying to import into my CDK stacks, but I receive a MODULE_NOT_FOUND error during synthesis/deployment.

project structure

tsconfig.json

stack.ts

constant.ts

error message

Attempts to Resolve:

1. I’ve verified the file paths and made sure that constant.ts exists at the specified location.
2. I’ve tried using both relative(../common/type/constant) and absolute import (common/model/constant) paths.
3. Running tsc directly compiles without any issues, but cdk synth or cdk deploy throws the error.
4. I’ve also tried clearing node_modules and reinstalling, with no success.

I suspect the issue might be related to how the CDK CLI handles TypeScript path aliases or possibly how my TypeScript project is configured. However, I’m not sure how to diagnose or fix the issue to allow my CDK application to correctly resolve and import these internal modules.

Questions:

1. How can I adjust my TypeScript or CDK configuration to resolve this issue?
2. Is there a step I’m missing in the process to ensure the CDK CLI can handle TypeScript path aliases correctly?
3. Are there known limitations or considerations with the AWS CDK and TypeScript imports that I should be aware of?
4. Any guidance, diagnostic tips, or insights into how the AWS CDK and TypeScript work together in this context would be greatly appreciated.

I had tried a lot to fix this issue that i am facing with images using Next.js, it not detect the image and showing broken image icon here is my file structure any solution for this issue?

Best regards,

As stated, I have a website written in php with a checkbox and I’m trying to store its state between pages. Maybe it’s me being still new to javascript and php but I cannot get it to work

Below is my code (simplified):

one.php:

<?php session_start(); ?>
<html>
  <head>        
    <script>
        checkbox = document.getElementById('vehicle_toggle');
        checkbox.addEventListener('change', e => {
            if(e.target.checked){
                $_SESSION["favcolor"] = "red";
            } else {
                $_SESSION["favcolor"] = "green";
            }  
        });      
    </script>        
  </head>
  <body>
    <?php
      $_SESSION["favcolor"] = "red";
      print_r($_SESSION);
    ?>
    <input type="checkbox" id="vehicle_toggle" name="vehicle_name" value="Bike"  checked="checked">
    <label for="vehicle_toggle" class="vehicle_label">bike</label><br>        
    <a href="two.php">two</a>
  </body>
</html>

two.php:

<?php session_start(); ?>
<html>
  <body>
    <?php echo "Favorite color is " . $_SESSION["favcolor"] . ".<br>"; ?>
  </body>
</html>

No matter the state of the checkbox on “one.php”, the color/state that is stored (and therefore printed for “two.php”) is the initial “red”. I’ve tried several different ways to write the javascript snippet but the output is always the same.

Thank your for your help!

revalidateTag/revalidatePath “only invalidates the cache when the path is next visited in Next.js” (https://nextjs.org/docs/app/api-reference/functions/revalidatePath), and they work fine inside server actions for data revalidation and UI update when the page is navigated to. The bit I do not follow is why they also working producing a desired outcome of revalidating and updating UI when we are performing data mutation (like adding product) on the page that displays data, meaning that we are not navigating to a new page after performing a mutation yet apparently cache on the page we are currently on gets purged, data gets revalidated and UI updated. One answer to that is that “Server Actions integrate with the Next.js caching and revalidation architecture. When an action is invoked, Next.js can return both the updated UI and new data in a single server roundtrip.” (https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations), and yes it does make sense only how does the next.js knows which ‘updated UI’ is supposed to send back? updated UI in terms of server component means some form of html that is ready to be displayed, and we can have many pages that are displaying data that our revalidateTag/revalidatePath is revalidating, one server actions can be imported to many different components and yet er get the specific html update relevant for our page without navigating to that page? To reiterate my problem is that I understand the when we navigate to new page then we can get the updated UI, but when we are already on the page and display data on it and perform mutation on it (given that we can be displaying the same data on many pages) how do we get the updated UI in the server action return trip for our desired page?

I have a user ,post,comment modal

This is my comment modal

import mongoose from "mongoose";

const CommentSchema = new mongoose.Schema({
  postId: {
    type: mongoose.Schema.Types.ObjectId,
    ref: "Post",
  },
  userId: {
    type: mongoose.Schema.Types.ObjectId,
    ref: "User",
  },
  content: {
    type: String,
    required: true,
  },
  image: {
    type: String,
  },
  likes: {
    type: Array,
    default: [],
  },
});

export default mongoose.model("Comment", CommentSchema);

and this is my addComment controller

export const addComment = async (req, res) => {
  try {
    const post = await Post.findById(req.body.postId);
    if (!post) {
      return res.status(404).json({ message: "Invalid Post Id" });
    }
    const comment = await new Comment(req.body);
    await comment.save();
    res
      .status(200)
      .json({ success: true, message: "Comment added Successfully!" });
  } catch (err) {
    res.status(500).json({ message: "Internal Server Error!" });
  }
};and this is my getComments controller

export const getAllCommentsOfPost = async (req, res) => {
  try {
    const post = await Post.findById(req.body.postId);
    if (!post) {
      return res.status(404).json({ message: "Invalid Post Id" });
    }
    const comments = await Comment.find({ postId: req.body.postId });
    res.status(200).json({ success: true, comments: comments });
  } catch (err) {
    res.status(500).json({ message: "Internal Server Error!" });
  }
};

This is my response

{
    "success": true,
    "comments": [
        {
            "_id": "65f2eec753e8de0aa1fffb26",
            "postId": "65f2e983f80127323fc86d8e",
            "content": "bad",
            "likes": [],
            "__v": 0
        }
    ]
}

in the response i am only getting postId , why am i not getting userId despite mentioning userId in comment modal and referenced it to user Modal and also how can i get the username as well .I need both username and userId in comments modal, can you guys tell me ways to do it?

I have animations in my webpage and when published online, the animations play before the whole bg image is loaded.
Could anyone please help me.
Thanks.

I tried using animation-play-pause state but do not when to play the animation

How can I set up my checkout page so it opens in a new tab while still maintaining the regular WooCommerce behavior when the user presses the confirm purchase button?
I want to add a new method to the WooCommerce button so it opens a new tab.

I tried this in a Elementor HTML block:

<script>
document.addEventListener('DOMContentLoaded', function() {
    var abrirContratoButton = document.getElementById('place_order');
    if (abrirContratoButton) {
        abrirContratoButton.addEventListener('click', function(event) {
            //event.preventDefault();

          
            var firstName = document.getElementById('billing_first_name').value;
            var lastName = document.getElementById('billing_last_name').value;
            var cpfCnpj = document.getElementById('billing_cpf_cnpj').value;

            
            localStorage.setItem('billing_first_name', firstName);
            localStorage.setItem('billing_last_name', lastName);
            localStorage.setItem('billing_cpf_cnpj', cpfCnpj);

            
            window.location.href = abrirContratoButton.getAttribute('href');
        });
    }
});
</script>

How can I pass this to js module

home.cshtml

<p id="timer" end-date="2030.12.31."

Presently sadly the cshtml file does not notice that the end-date is a variable.
I tried to set up there as
@{var end-date = …..}

But it did not really want to work out.

How can I send the date value to the js. And how do I code in the js file this.

thanks a lot

im new to react native so i really don’t know why this issue is coming up. if u need any additional info feel free to ask. im trying to build a navigation system similar to windows phone where we can swipe to the next screen.

here is my code

import { StyleSheet, Text, View, FlatList, TouchableOpacity, Dimensions } from 'react-native'
import React , {useState,useRef} from 'react'

const allData = [
    {name:'Explore',id:'1'},
    {name:'Trending',id:'2'},
    {name:'Post',id:'3'},
    {name:'Messages',id:'4'},
    {name:'Marketplace',id:'5'}
]
const reff = useRef()
const [index,setIndex] = useState(2)
const spacing = 10;


export default function topDynamicBar() {
  return (
    <View style ={styles.container}>
      <FlatList
      ref={reff}
      initialScrollIndex={index}
      keyExtractor={(item)=>item.id}
      data={allData}  
      renderItem={({item, index: findex})=>(<Text style={styles.items}>{item.name}</Text>)}
      horizontal
      showsHorizontalScrollIndicator={false}
      />
    </View>
  )
}

const styles = StyleSheet.create({
    container:{
        backgroundColor:'#000000'
    },
    items:{
        padding:2,
        fontSize:30,
        height: "auto",
        margin:10,
        borderColor:'#fff',
        borderWidth:2,
        borderRadius: spacing
        

    }

})

The JavaScript library Handsontable has the ‘dropdownMenu’ option, which allows displaying an icon in the column headers and opening a dropdown menu with various options.

I know this can be achieved using JavaScript, but my knowledge of JavaScript is practically nonexistent. How can this option be included using the ‘rhandsontable’ package in Shiny?

I am using recoil for state management, for a very basic todo app for practice, but my todolist.tsx is not showing the updated username and I need to refresh everytime to see the updated username and todos change as soon as the username changes. I can’t figure out the issue.

This is my authState

import { atom } from 'recoil';

export const authState = atom({
    key: 'authState',
    default: { token: null, username: null },
});

and this is the iniital State

function InitState() {
  const setAuth = useSetRecoilState(authState);
  const navigate = useNavigate();

  const init = async () => {
    const token = localStorage.getItem("token");
    try {
      const response = await fetch('http://localhost:3000/auth/me', {
        headers: { Authorization: `Bearer ${token}` }
      });
      const data = await response.json();
      console.log(data);
      console.log(data.username);
      if (data.username) {
        setAuth({ token: data.token, username: data.username });
        navigate("/todos");
      } else {
        navigate("/login");
      }
    } catch (e) {
      navigate("/login");
    }
  }

  useEffect(() => {
    init();
  }, [])

and inside my todolist.tsx , I am using authStata like this :

  const authStateValue = useRecoilValue(authState);

and the username is not updating until I refresh and reload the page, todos fetched are the updated ones but the username is not updating until page is reloaded

 return (
        <div>
            <div style={{ display: "flex" }}>
                <h2>Welcome {authStateValue.username}</h2>
                <div style={{ marginTop: 25, marginLeft: 20 }}>
                    <button onClick={() => {
                        localStorage.removeItem("token");
                        navigate("/login");
                    }}>Logout</button>
                </div>
            </div>
            <h2>Todo List</h2>
            <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Title" />
            <input type="text" value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Description" />
            <button onClick={addTodo}>Add a new Todo</button>
            {todos.map((todo) => (
                <div key={todo._id}>
                    <h3>{todo.title}</h3>
                    <p>{todo.description}</p>
                    <button onClick={() => markDone(todo._id)} >{todo.done ? 'Done' : 'Mark as Done'}</button>
                </div>
            ))}
        </div>
    )
};

export default TodoList

The username should also update as the todolist component re-renders , but except username everythign is fetching is being displayed fine. I can’t figure out the issue, I am just starting out to use typescript with recoil

I’m following this https://www.youtube.com/watch?v=MpGLUVbqoYQ webpack tutorial precisely, and have gotten to the part of the video where he talks about content hashing. On the video he does:

    const path = require("path");
    module.exports = {
      mode: "development",
      entry: "./src/index.js",
      output: {
        filename: "main.[contentHash].js",
        path: path.resolve(__dirnamem, "dist")
      },
      module: {
        rules: [
          {
            test: /.scss$/,
            use: [
              "style-loader",
              "css-loader",
              "sass-loader"
            ]
          }
        ]
      }
    };

I have done:

const path = require("path");

module.exports =  {
    mode: "development",
    entry: "./src/index.js",
    output: {
        filename: "main.[contentHash].js",
        path: path.resolve(__dirname, "dist")
    },
    module: {
        rules: [
            {
                test: /.scss$/,
                use: [
                    "style-loader", // 3. Injects styles into DOM
                    "css-loader",  // 2. Turns css into commonjs
                    "sass-loader" // 1. Turns sass into css
                ]
            }
        ]
    }
};

On the video this code works and appends a content hash where indicated, but when I ran npm start, I got this: