Do a post call depend on datatable value

I have my dataTable script below working and bringing data very well, but i want to perform some tasks. like when i click the button the post call for ajax get executed

my problem is that when i click the Button

$('td:eq(1)', row).html('<button type="button" id="showup"> Submit </button>');

nothing happens its like not normal, not picking any event. its not working to do the post call for ajax

my datatable output is like this

<tr>
<td><input type="text" name="Country" value='Italy' /></td>
<td><button type="button" id="showup"> Submit </button></td>
</tr>

<tr>
<td><input type="text" name="Country" value='Spain' /></td>
<td><button type="button" id="showup"> Submit </button></td>
</tr>

Now i want when i press the button to do a post call to send the value of the actual input name=”Country” in tr

$(document).ready(function() {
    $('#showup').on('click', function() {
        execute($(event.target).prev("input"));
        $(this).html("Clicked");
        $(this).attr("disabled", true);

        function execute($input) {
            $.ajax({
                type: "POST",
                url: "file2.php",
                data: {
                    Country: $input.val(),
                },
                success: function(response) {},
                error: function() {
                    alert("Error");
                },
            });
        }
    });
    var table = $("#information").dataTable({

        "pagingType": "simple",
        "stripeClasses": [],
        "bLengthChange": false,
        sDom: "ltipr",
        oLanguage: {
            sEmptyTable: '',
            sProcessing: '',
            oPaginate: {
                sNext: 'Next',
                sPrevious: 'Previous',
            },
        },
        responsive: {
            details: {
                display: $.fn.dataTable.Responsive.display.modal({}),
                renderer: $.fn.dataTable.Responsive.renderer.tableAll({
                    tableClass: "table",
                }),
            },
        },
        "processing": true,
        "ajax": {
            "url": "file.php",
            "type": "GET",
            "dataType": "json"
        },
        rowCallback: function(row, data) {
            $('td:eq(0)', row).html('<input type="text" name="Country" value=' + data[0] + ' />');
            $('td:eq(1)', row).html('<button type="button" id="showup"> Submit </button>');

        },
    });
});

Sending image to websocket by javascript as MultipartFile

I want to send image to websocket by javascript as MultipartFile

My js code

if (stompClient && stompClient.connected) {
        const imageData = document.querySelector('input[type="file"]').files;
        const formData = new FormData();
        formData.append("file", imageData[0]);

        if (imageData) {

            const message = {
                'userId': userId,
                'token': token,
                'messageType': 'PHOTO',
                'chatId': chatId,
                'file': formData // Use FormData for file upload
            };
            console.log('Sending message: ', message);
            stompClient.send("/app/messages/" + chatId, {}, JSON.stringify(message));
        } 
}

Logi

`>>> SEND
destination:/app/messages/5
content-length:111

{"userId":"4","token":"576e6e38864f4b3da266ca42baf32218617302474","messageType":"PHOTO","chatId":"5","file":{}}�`

`Sending message:  
Object { userId: "4", token: "576e6e38864f4b3da266ca42baf32218617302474", messageType: "PHOTO", chatId: "5", file: File }
file: File { name: "ziutek2.png", lastModified: 1716816552352, size: 20691, … }`

I don’t know how to fix that problem

What is the difference between react-router-dom and NextJS routing, as well as their pros and cons?

I haven’t seen the difference between React Router vs. NextJS Routing explained clearly. NextJS describes its main “features” as being Routing and Rendering among others, but it wasn’t clear to me that they all relate to SSR in some form.

I think I’m right in saying that NextJS Routing is file-system based, but more importantly it’s based on routing to different pages that have been rendered on the server and hydrated on the client. Whereas React Router is what powers SPAs (ie single HTML page rendered in the browser and navigation is “faked” because it’s just one page updating)? Though I think it might be possible for NextJS to do that too. Can someone confirm?

I’d also like to know the pros and cons of using one or the other.

cy.matchImageSnapshot not taking snapshot of specified height and width

I’m attempting to take a snapshot in Cypress with dimensions of 500 pixels for both height and width. I’ve updated the relevant settings accordingly, but unfortunately, Cypress is still saving the screenshot with dimensions of 1000 x 1000 pixels if the image doesn’t exist.

Am I doing something wrong?

cy.viewport(500,500);
cy.matchImageSnapshot(`snapshotName`);

Command.ts:

import { addMatchImageSnapshotCommand } from '@simonsmith/cypress-image-snapshot/command';

addMatchImageSnapshotCommand({
  failureThreshold: 0.0,
  failureThresholdType: 'percent',
});

Cypress.config.js:

import { defineConfig } from 'cypress';
import { addMatchImageSnapshotPlugin } from '@simonsmith/cypress-image-snapshot/plugin';

export default defineConfig({
  viewportHeight: 500,
  viewportWidth: 500,
  component: {
    viewportHeight: 500,
    viewportWidth: 500,
    devServer: {
      framework: 'react',
      bundler: 'webpack',
    },
    setupNodeEvents(on) {
      addMatchImageSnapshotPlugin(on);
    },
  },
});

jquery isn’t working for my javacsript module file

`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <input type="text" id="username">
    <button id="clickmeplease">click me</button>
    <script type="module" src="./javascript/2.3 main.js"></script>
</body>
</html>
//2.3 main.js file
import {user, test, message} from "./2.4 mediator.js"
import $ from 'jquery'
let username;
$("clickmeplease").addEventListener("click", displayy);
function displayy(){
// event.target;
console.log()
username = $("username").value;
console.log(username);
> }`

I’m getting error message Uncaught TypeError: Failed to resolve module specific. i tried using cdn and also got the same error message. I’d like to find a solution to adding jquery to my module file in javascript

How to prevent scrolling from stopping due to the touch of the external area in mobile web browser with React

example page view

I created a mobile web page with React.
This page sets the timer.
Drag the hours, minutes, and seconds with your finger to scroll through the component and select a number.
There is a problem.
Hours, minutes, and seconds are separate components. But when you scroll one of the components and click anywhere on the screen, the scrolling component stops. Similarly, if you scroll through the Minutes component while scrolling by pushing the Hours component with your fingers, it is considered a touch, and the scrolling of the Hours component stops unnaturally along the way.
I want to make that scrolling of a component stops only when touched by that component.
I don’t want to be affected by the touch of the external area of the component.
But I heard that if you touch the screen with the default behavior of the browser, the ongoing scrolling motion stops.
How can I implement it the way I want it??

I use onScroll event and I use chrome mobile browser.
Thank you for reading.

Strange behaviour with dates [duplicate]

I am programming a C#/React application, and I am getting a strange behaviour in the vanilla JavaScript. When I pass the date 01/05/2024 to the client browser in the format of double, using:

public class Generic
{
   public static double DateToJS(DateTime dt) => (dt - new DateTime(1970, 1, 1).Date).TotalMilliseconds;
}

and then, in the client, running the following JavaScript snippet:

const dayGiven = new Date(this.state.data.date);    // Date passed from Back-End (double)
const dayGivenDate = new Date(dayGiven.getFullYear(), dayGiven.getMonth(), dayGiven.getDate());
const SOMonth = new Date(dayGivenDate.getFullYear(), dayGivenDate.getMonth(), 1);
const nDaysMonth = new Date(dayGiven.getFullYear(), dayGiven.getMonth() + 1, 0).getDate();
const nDaysTillEOM = nDaysMonth - dayGiven.getDate() + 1;

I get a result in SOMonth.toISOString().split('T')[0] (start-of-month) of 30/04/2024.

What can I do? How to address this problem in JavaScript?

Also, if I run the following JavaScript snippet:

day=new Date(2024,5-1,1) // May
//>> Wed May 01 2024 00:00:00 GMT+0100 (Western European Summer Time)
SOMonth = new Date(day.getFullYear(), day.getMonth(), 1);
//>> Wed May 01 2024 00:00:00 GMT+0100 (Western European Summer Time)
SOMonth.toISOString().split('T')[0]
//>> '2024-04-30'  => Wrong date. I would like to obtain May 1 2024

How can I make fullcalendar event resizable and droppable customly

in fullcalendar how can I make if event.extendedProps.isBelong prop is true make event resizable and droppable but else disable them

eventRender: function (info) {
    var event = info.event;
    var element = info.el;

    var customContent = `
            <div class="fc-content">
                <div class="custom-event-content" style="cursor: initial;padding: .6rem;">
                    <small>${moment(event.start).format("HH:mm")} - ${moment(event.end).format("HH:mm")} </small><br/>
                    <a style="color: ${event.textColor};text-decoration: none;" href="${event.extendedProps.urlString}"><strong> ${event.title} </strong></a><br/>
                    <i class="fa-solid fa-eye pointer mt-2"></i>
                </div>
            </div>
            <div class="fc-resizer fc-resizer-start"></div>
            <div class="fc-resizer fc-resizer-end"></div>
        `;

    element.innerHTML = customContent;


    var eyeIcon = element.querySelector('.fa-eye');
    console.log(eyeIcon)
    if (eyeIcon) {
        eyeIcon.addEventListener('click', function () {
            openDetailModal(info);
        });
    }
},

Is there a way to generate with JavaScript an ISO image (Joliet or ISO 9660)?

My purpose is to have an Internet Browser generate a downloadable ISO image (Joliet or ISO 9660) that contains files, starting from file objects (as defined in the Web API).

I am already able to generate a zip file containing files structured in folders, but I have not found libraries or JavaScript projects that allow you to generate ISO images in the browser (for now I am not interested in Node.js solutions).

An ISO image is interesting for distributing data because it can be mounted read-only on the user’s client, but I’m also open to other possible alternatives.

Unable to use system-assigned identity with Knex: ConnectionError: Login failed for user ”

I’m encountering an issue while trying to connect to a Microsoft SQL Server database using Knex with system-assigned identity. Despite configuring Knex to utilize system-assigned identity for authentication, I’m receiving the following error:

ConnectionError: Login failed for user ''.
at ConnectionError (/node_modules/tedious/lib/errors.js:13:12)
at Parser.<anonymous> (/node_modules/tedious/lib/connection.js:1194:51)
at Parser.emit (node:events:517:28)
at Readable.<anonymous> (/node_modules/tedious/lib/token/token-stream-parser.js:27:14)
at Readable.emit (node:events:517:28)
at addChunk (node
/streams/readable:368:12)
at readableAddChunk (node
/streams/readable:341:9)
at Readable.push (node
/streams/readable:278:10)
at next (node
/streams/from:98:31)
at process.processTicksAndRejections (node
/process/task_queues:95:5)

Here’s a summary of my setup:

  • I’m using Knex to connect to a Microsoft SQL Server database.
  • I’ve configured Knex to use system-assigned identity for authentication.
  • The code is running in an environment where system-assigned identity is enabled and configured.
  • Despite correct configuration, I’m encountering a login failure with an empty user.

Here’s a simplified version of my code:

This is the configuration we are using for connecting

dbConfig = {
  client: config.ENV.TNT_DB_CLIENT,
  connection: {
    server: config.ENV.TNT_DB_SERVER,
    authentication: {
    type: 'azure-active-directory-msi-app-service',
    options: {
        tenantId: config.ENV.AZURE_TENANT_ID
        }
    },
    options: {
       database: config.ENV.TNT_DATABASE,
       trustServerCertificate: false,
       encrypt: true,
       requestTimeout: 300000
     }
    },
  plugins: [knexPlugin()],
  pool: {
      acquireTimeoutMillis: 300000,
      min: parseInt(config.ENV.TNT_DB_MIN_CONNECTION),
      max: parseInt(config.ENV.TNT_DB_MAX_CONNECTION)
     },
 migrations: {
    tableName: 'knex_migrations'
   },
  requestTimeout: 300000,
  connectionTimeout: 300000,
  acquireConnectionTimeout: 300000
 };

How to add Specific Height to a Grid Stack js Container so that elements can only move inside that and container height doesnt increase

Hello Every One this is my code in react for making a widget Playground Where i want to add fix heigh to grid stack playground / the actual container where widgets will be dragged / move , i am adding fix height using css but thats not working its height only increase when either cell height increased or items or placed vcertically .

import React, { useEffect, useRef, useState } from "react";
import "gridstack/dist/gridstack.min.css";
import { GridStack } from "gridstack";

const WidgetsPlayground = () => {
  const gridRef = useRef(null);

  const [initialWidgets, setInitialWidgets] = useState([
    { id: 1, width: 4, height: 2, src: "/media/dashboard/widget-1.svg" },
    { id: 2, width: 2, height: 2, src: "/media/dashboard/widget-2.svg" },
    { id: 3, width: 3, height: 1, src: "/media/dashboard/widget-1.svg" },
  ]);

  useEffect(() => {
    const grid = GridStack.init(
      {
        cellHeight: 'auto',
        draggable: { handle: ".grid-stack-item-content" },
      },
      gridRef.current
    );


    initialWidgets.forEach((widget) => {
      const el = document.createElement("div");
      el.className = "grid-stack-item";
      el.setAttribute("data-gs-width", widget.width);
      el.setAttribute("data-gs-height", widget.height);
      el.innerHTML = `<div class="grid-stack-item-content bg-purple-600 bg-opacity-50 flex items-center justify-center ">
                         <img src="${widget.src}" alt="Widget ${widget.id}" />             
                      </div>`;
      grid.addWidget(el);
    });

    // Cleanup on unmount
    return () => {
      grid.destroy(false);
    };
  }, []);

  console.log(initialWidgets);

  return (
    <div className="w-full h-[calc(100vh-70px)] p-12 overflow-hidden  ">
      <div ref={gridRef} style={{height:"700px"}} className="w-full  grid-stack-container border-[1px] border-new_gray_300 bg-new_purple_700">

      </div>
    </div>
  );
};

export default WidgetsPlayground;

i just want to have a bounded container with fix height and width where i can move widgets inside the bounded container and item doesnt overflow too in css its not working

How should I prioritize tasks and what kind of deliverables should I aim for in a 4-day hackathon? [closed]

I’m organizing a 4-day hackathon and I’m seeking advice on how to effectively prioritize tasks to maximize productivity and impact. I won’t know the subject until the day of the launch, and I’ll be working with a team of three final-year development students and four first-year students. Given the limited timeframe, what should be the primary focus areas, and what types of deliverables are realistic to aim for? Any tips on structuring the event to ensure meaningful progress and tangible outcomes would be greatly appreciated.

I’ve tried creating a plan and setting up a Notion workspace, but I’m not familiar with how to use it effectively, so it hasn’t been helpful.

Is there a JavaScript module for exponential curve fitting with 3 parameters? [closed]

I am developing a desktop application using electron-vue stack. And I need to extract 3 numbers (a,b,c) from an exponential curve, like f(x) = a * exp(- b * x)+c.

By now, I have found a module named “regression” on npmjs.org, which was publised 6 years ago. However, it only supports 2-parameter exporential curve fitting, like f(x) = a * exp(-b * x). And an unofficial scipy wrapper “scipy” on npmjs.org was published 10 years ago, while scipy actually works for 3-parameter fitting and even with an example in official doc.

Please let me know other fitting tool in JavaScript. Thanks!

when the input is same , then why is the output different?

let number2=prompt(" specify enter").trim(); // input= "25" let number1="25"; console.log(Number(number2)) // output= NAN [NOT A NUMBER] console.log(Number(number1)) // output= 25

I have already asked chatgpt and chatgpt also agrees with me that if the input you entered is a string “25” , then the output should be same . the output should be :
25
25

How to Show Only First of Array with Same ID [closed]

Supposed I have two array of objects. Posts and Users.

Posts:

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
  },
  {
    "userId": 1,
    "id": 3,
    "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
  },
  {
    "userId": 2,
    "id": 11,
    "title": "et ea vero quia laudantium autem",
  },
  {
    "userId": 2,
    "id": 12,
    "title": "in quibusdam tempore odit est dolorem",
  },
  {
    "userId": 2,
    "id": 13,
    "title": "dolorum ut in voluptas mollitia et saepe quo animi",
  },
  {
    "userId": 3,
    "id": 21,
    "title": "asperiores ea ipsam voluptatibus modi minima quia sint",
  },
  {
    "userId": 3,
    "id": 22,
    "title": "dolor sint quo a velit explicabo quia nam",
  },
  {
    "userId": 4,
    "id": 31,
    "title": "ullam ut quidem id aut vel consequuntur",
  },
  {
    "userId": 4,
    "id": 32,
    "title": "doloremque illum aliquid sunt",
  },
  {
    "userId": 4,
    "id": 33,
    "title": "qui explicabo molestiae dolorem",
  },
  {
    "userId": 4,
    "id": 34,
    "title": "magnam ut rerum iure",
  },
]

Users:

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
  },
  {
    "id": 3,
    "name": "Clementine Bauch",
    "username": "Samantha",
  },
  {
    "id": 4,
    "name": "Patricia Lebsack",
    "username": "Karianne",
  },
  {
    "id": 5,
    "name": "Chelsey Dietrich",
    "username": "Kamren",
  },
]

As you can see, the posts has multiple userId. I want to show only first of each object with same userId.

Second, I want to push Users with same id into new Posts.

So, the result final array would be like this:

New Posts:

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "name": "Leanne Graham",
    "username": "Bret",
  },
  {
    "userId": 2,
    "id": 11,
    "title": "et ea vero quia laudantium autem",
    "name": "Ervin Howell",
    "username": "Antonette",
  },
  {
    "userId": 3,
    "id": 21,
    "title": "asperiores ea ipsam voluptatibus modi minima quia sint",
    "name": "Clementine Bauch",
    "username": "Samantha",
  },
  {
    "userId": 4,
    "name": "Patricia Lebsack",
    "username": "Karianne",
  },
]

Please note that I want to push name & username only, because Posts already have id of posts.

What is best approaches to achieve it?