Category: javascript

suppose we have some photos on the page, for example, I have a photo gallery, now I want to save the ID and src of that image in the database when I select a photo and click on submit.

<form action="" method="post">
        <img id="1" src="testURL1" alt="">
        <img id="2" src="testURL2" alt="">
        <img id="3" src="testURL3" alt="">
        <img id="4" src="testURL4" alt="">
        <button type="submit">Submit</button>
</form>

Please guide me, thanks to all friends

We are using nuxt-socket-io lib in the project and creating connection with init message ‘2probe’ -> ‘3probe’ how it works in the proj.

I tried to do this in e2e tests using another lib ‘rxjs’, but it sends the message with quotation marks.
what i have using this lib
I there any possibility to send a ‘init’ message? I could be any lib, I need just a result

I have this simple Mutation Observer looking for class changes which works perfectly fine.

jQuery(document).ready(function($){
   
     var mydivs = $(".mydiv");
    
     $(mydivs).each(function(){
            
         //Observer
        var config = {attributes: true};
        var target = this;
        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if(mutation.attributeName == "class"){
                    console.log("change");
                }   
            });
        });
 
        observer.observe(target, config);
    });
});

Now I’m trying to use this observer in an object literal because this is the base for more code based on the changes and for overview. These are my firt experiences with object literals so please try to help me understand what I’m doing wrong. The error I#m getting is

“Failed to execute ‘observe’ on ‘MutationObserver’: parameter 1 is not of type ‘Node’.”

//Object Literal
var myObject = {
  
    el: {
      tabs: j$(".mydiv")
    },
  
    init: function() {
        this.allTabs();
    },

    allTabs: function() {
        var self = this;

        this.el.tabs.each(function(){
            self.tabObserver($(this));
        });
    }

    tabObserver: function(div) {
        var config = {attributes: true};
        var target = div;
        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if(mutation.attributeName == "class"){
                    console.log("change");
                }   
            });
        });
        observer.observe(target, config);
    }
};
 
myObject.init();

A few days ago, I attempted to develop a window in the Electron framework of Node.js that would emulate an HTML object with pointer-events: none; I had implemented transparent: true in JavaScript. However, this approach did not yield the desired results.

Currently, I am looking for a way to create a transparent window of dimensions 1000×1000 in the Electron framework of Node.js. The window should enable clickable content within the div with the #app identifier while ensuring that content outside the div is not clickable.

I need a modified array which will contain all the objects with properties using javascript:
– If all the properties in all the objects have value equal to null then remove those keys.In the above case,
type key present in all the object has null value. Hence, we need to remove this.
– If the key has even a single value then we don’t need to remove it. For, example, state has 1 value for index 1. Hence, we can’t remove it

Here is my array that needs some manipulation

[
  { name: 'Mango', color: 'yellow', type: null, state: null },
  { name: 'Apple', color: 'red', type: null, state: 1 },
  { name: 'Orange', color: 'orange', type: null, state: null },
];

Note: I want to keep it dynamic. I don’t want to specify the key name. For example, object.type or object.state, I don’t want to put check like these.

My new modified object should look like:

[
  { name: 'Mango', color: 'yellow', state: null },
  { name: 'Apple', color: 'red', state: 1 },
  { name: 'Orange', color: 'orange', state: null },
];

I created a lottie animation and also i have some AOS animations on website, however when the preloader is animating the website data is loading in background and the AOS animation loads automatically since the website is basically loaded. I am a noob so if my question confuses you i am sorry. I want the content to be loaded after preloader is done so that way my smooth animations such as text fades in from bottom and its looks good.

Please help. Thanks!

I tried several css codes and JS code but i am pretty sure i am doing something wrong and thats why i need someone to show me to correct direction please

How to call from viewmodel class function from webview via JavaScriptInterface

class JavaScriptInterface {
    private val context : Context

    constructor(context : Context){
        this.context = context
    }

    @JavascriptInterface
    fun getWebViewText() : String {
        return "" // text from webview
    }
}
WebView(state = fullContentHtml,
        onCreated = { webView ->
webView.addJavascriptInterface(JavaScriptInterface(context = context), "Function")},
        client = remember { webViewClient },
        chromeClient =remember {chromeViewClient}
    )

I’m using Angular 16 with TypeScript.
I have this method on my component which will open a modal:

canDeactivate(): Promise<boolean> {
if (this.canLeaveImportFlow) return new Promise<boolean>(() => true);
return new Promise<boolean>((resolve) => {
  const dialogRef = this.dialog.open(LeaveCardImportFlowModalComponent, {
    data: {
      title: this.leaveFlowTitle,
      content: this.leaveFlowContent,
      button: this.leaveFlowButton,
      confirmCallback: () => {
        this.canLeaveImportFlow = true;
        resolve(true); // Resolve promise with true if user clicks on the leave button
      }
    }
  });

  dialogRef.afterClosed().subscribe(() => {
    resolve(false); // Resolve Promise with false if user close modal without confirming
  });
});
}

I want that when the user try to close the current browser tab, it will trigger that canDeactivate() method which will open a modal which has an X to close (which return false) and a button (which returns true), and based on the result let him close the tab or not.

I tried adding that event listener:

  @HostListener("window:beforeunload", ["$event"])
  onBeforeUnload(event: BeforeUnloadEvent) {
    event.preventDefault();
    this.canDeactivate().then((result: boolean) => {
      if (result) {
        // Consenti la chiusura del tab
        window.removeEventListener("beforeunload", this.onBeforeUnload);
        event.returnValue = result; // Richiesto per alcuni browser
        window.close();
      }
    });
  }

But I get an error with window.close():

Scripts may close only the windows that were opened by them.

If I remove that window.close(), the window won’t close.

And other than that, before it opens my modal, I get the default alert from browser:

this is my code,why are there only ploygon and no text?

I’ve tried many ways, but I still can’t display text.

this is my code:

const polygon = new Polygon([
    [
      ['87.4337103', '43.9690231'],
      ['87.4331741', '43.9670592'],
      ['87.4346341', '43.9665165'],
      ['87.4351897', '43.9688487'],
      ['87.4337103', '43.9690231'],
    ],
  ]);

  const style = new Style({
    fill: new Fill({
      color: 'rgba(22, 195, 81, 0.3)',
    }),
  
    text: new Text({
      text: 'my Text',
      font: '13px sans-serif',
      fill: new Fill({
        color: '#fff',
      }),
      stroke: new Stroke({
        color: '#000',
        width: 2,
      }),
    }),
  });

  let feature = new Feature({
    geometry: polygon,
  });

  feature.setStyle(style);

  let source = new Vector({});

  source.addFeature(feature);

  let vectorLayer = new VectorLayer({
    source: source,
  });

  map.addLayer(vectorLayer);

enter image description here

I added the style of text

So here I am trying to map through multiple arrays, and return all the data related to it. But only the first array is getting returned.
The strange thing here is that when I try console logging the same its working just fine. but the moment I put it inside any HTML tag the problem is coming up. What is wrong here? Any kinda help will be very useful.

function getHoveredEventDetails() {
  const formattedDay = day.format("DD-MM-YYYY");
  const matchingDates = [];

  eventsCountandDate.forEach((event) => {
    if (event.date === formattedDay) {
      matchingDates.push(event);
    }
  });
  let countKey = 1010;
  if (matchingDates.length > 0) {
    return matchingDates.map((event, index) => {
      const coursesDetails = event.courses;
      countKey = countKey + 1;
      return coursesDetails.map((course, courseIndex) => {
        return (
          <div className="eventDetails" key={`${index}-${courseIndex}`}>
            <div className="profile">
              <h1 className="profile_title">{course.courseName}</h1>
              <p className="profile_para">
                On {course.startProgramDates} till {course.endProgramDates},
                From {course.startTime} to {course.endTime}
              </p>
            </div>
          </div>
        );
      });
    });
  }
}

Here is the API data, which I am trying to get.

courseCount: 3, courses: (3) [{…}, {…}, {…}], date:"14-02-2024"

Further If I expland the courses array then

courses: Array(3)
1:{courseName: 'Course 1', startProgramDates: '14-02-2024', endProgramDates: '16-02-2024', startTime: '8:00 AM ET', endTime: '13:00 PM ET'}
1:{courseName: 'Course 2', startProgramDates: '12-02-2024', endProgramDates: '16-02-2024', startTime: '11:00 AM ET', endTime: '12:00 AM ET'}
2:{courseName: 'Course 3', startProgramDates: '13-02-2024', endProgramDates: '16-02-2024', startTime: '10:00 PM ET', endTime: '11:00 AM ET'}

If I am given two subnets as strings, like "192.168.0.1/23" and "192.168.0.1/25" (only IPv4 addresses), how do I tell if the first one is part of the second one? I tried finding an npm package for this, but I don’t seem to find any that fulfills this task.

I have a dataset of a bunch of books in the following JSON format:

{"Book1" : {
            "BookName": 'Book1',
            "Author" : 'author',
            "YearPublished":2000,
            "commentaries: [
                            "Book2",
                            "Book3"]
            },
 "Book2" : {
            "BookName": 'Book2',
            "Author" : 'author',
            "YearPublished":2020,
            "commentaries: [
                            "Book4",
                            "Book5"]
            },
// etc...
}

I am trying to graph the data in order to display the name and author of every book, as well as the relationships between each book and it’s commentaries. The books should also be positioned so that y_pos is equal to the year published. X_pos doesn’t matter, but ideally, I’d like common commentaries to be grouped together.

I have tried using multiple libraries (including Graphviz, Matplotlib, Networkx, and Draw.IO), but cannot seem to get everything positioned properly. Either the nodes overlap, or the graph doesn’t render without messing with the y position too.

Below is the best working code I have so far:

import networkx as nx
import matplotlib.pyplot as plt
import json

# Load JSON data
with open('book_database.json', 'r') as file:
    data = json.load(file)


# Create a directed graph
G = nx.DiGraph()

# Add nodes (books and commentaries)
for book_id, book_data in data.items():
    G.add_node(
        book_id,
        label=f"{book_data['BookName']} by {book_data['BookAuthor']}",
        year_published=book_data['BookYear']  # Adding year_published attribute
    )
    for commentary_id in book_data['commentaries']:
        if str(commentary_id) in data:
            G.add_node(commentary_id, label=f"Commentary ID: {commentary_id}")
            G.add_edge(book_id, str(commentary_id))

# Use a layout algorithm to position nodes without overlap
pos = nx.multipartite_layout(G, subset_key="year_published", align="horizontal")

# Draw the graph with labels
plt.figure(figsize=(10, 8))
nx.draw(G, pos, with_labels=True, labels=nx.get_node_attributes(G, 'label'), node_size=500, font_size=10)
plt.show()

I would appreciate any solution to this – either in python or javascript please.

Thank you

I am writing a simple automation app and encountered some difficulty when I try to download a file.

The website is free and public, so I don’t need to register in order to watch, search or download any files. But when I press the ‘download’ button in the browser, it send the GET request to an address that looks like this: "BASE_URL/retrieve/FILE_NAME&&directStream=true&JWT=..."

This is the website, if you’re curious.

The JWT is dynamic and changes for every download. So my question is how to imitate this request programatically then?

Im using fullcalendar.io to show a multimonthyear calendar, but I found what i think is a bug. When rendering events some are not showing. In my case I had three events that started on the same day, two of them last 4 days, while the last one only one day, and i don´t know why event 1 isnt showing. Is this a bug or am i doing something wrong
events im trying to show:
events source
Calendar view:
calendar view
more view

Here is the codepen where i replicated the error:
https://codepen.io/miguelTTP/pen/BabpQrp

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    firstDay: '1',
    initialView: 'multiMonthYear',
    multiMonthMaxColumns: 2,
    contentHeight:"auto",
    editable: false,
    events: [
      {
        title: 'event 1',
        start: '2024-01-15',
        end: '2024-01-20'
      },
      {
        title: 'event 2',
        start: '2024-01-15',
        end: '2024-01-20'
      },
      {
        title: 'event 3',
        start: '2024-01-15'
      }
    ]
  });

  calendar.render();
});

I tried just putting the essentials for it to work, tried, on event 3, putting end date. Also tried couple more things but they didnt work.
Thanks beforehand.

Please I have configured android studio current version(hedgehog), jdk21 and node 21.5.0 to run react-native per what the documentation advised. When I create a project with version 0.73, I am able to run the emulator successfully. But when I create a project with version 0.69 because I want to use javascript and run the emulator, it give an error
(node:11056) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead. and subsequently Task :app:dexBuilderDebug FAILED.

I have gone online to resolve it but there is no clear solution for it.. Please help