Category: javascript

I have a div which is wrapped in a Link tag in NextJS. Within the div I have a row of components which are buttons. When I click one of these buttons, they do what they should do, but the Link tag also gets fired from the parent div and we navigate to another page. I have added e.stopPropagation() to the event handlers of the buttons, but it’s not making any difference. Can anyone see what I’m doing wrong, please?

The parent component:

<Link href={{
    pathname: `/...`,
    query: { 
        var:var 
    },
}}>
    <div>
    ...
        <div className="flex flex-row">
            <Button1/>
            <Button2/>
        </div>
    </div>    
</Link>

A child button component:

async function handleClick(e) {
    e.stopPropagation()
    ...
}

<button onClick={handleClick}>
...
</button>

I have also tried adding adding the stopPropagation to the onClick as such:

<button onClick={(e) => e.stopPropagation(), handleClick}>
...
</button>

Why is the click still bubbling up to the parent Link, please?

Started coding yesterday and all i know how to use is hide and show functions but so far ive managed to build a very pretty checkout system. On my basic knowledge. But its so many elements to show and hide so I would like to learn how to save a function so the code becomes very short effective simple and light.

---

Id like to save this whole part of code beneath to be saved, so I can just call on it later so something like;

---

export function StopLineBottom_viewportEnter(event) { “function close checkout” }

---

The code I would like to save and recall later:

export function StopLineBottom_viewportEnter(event) {    

$w("#Glass").hide("");    
$w("#CheckoutBox1").hide("");   
$w("#Galasky").hide("");
$w("#PreviewBox").hide("");
$w("#GalaskyStarlight").hide("");
$w("#ProductPreview").hide("");
$w("#Price").hide("");
$w("#Address1").hide("");
$w("#Line1").hide("");
$w("#Country").hide("");
$w("#Line2").hide("");
$w("#City").hide("");
$w("#Line3").hide("");
$w("#Address2").hide("");
$w("#Line4").hide("");
$w("#PostalCode").hide("");
$w("#Line5").hide("");
$w("#Name").hide("");
$w("#Line6").hide("");
$w("#Number").hide("")
$w("#Line7").hide("");
$w("#CheckoutButton").hide("");
$w("#CheckoutBox2").hide("");
$w("#PaymentProviders").hide("");
$w("#CloseButtonIcon").hide("");
$w("#CloseButtonHitbox").hide("");
}

This question was asked before: Trouble understanding what happens during javascript for loop
but the asker didn’t get the right answer and so did I. I learn C++ and Python earlier so I get familiar with loop but when I practing this code:

let text = "";
let i;
for(i=0; i<5; i++)
{text += "The number is " + i + " ";}
document.write(text);

the output is totally different to what I expected. I visited W3schools but I can’t find the answer
https://www.w3schools.com/js/js_loop_for.asp

https://www.w3schools.com/js/tryit.asp?filename=tryjs_loop_for_om3

I expected the output is “” because text can’t be changed but the code prints out: “The number is 0 The number is 1 The number is 2 The number is 3 The number is 4”. My question is why the print executes in the loop though the print is outside the loop? Thank you very much!

I have a requirement to build knowledge graph UI using Angular. I wanted to achieve something like the below image:

Please suggest how can I get started with it. Also, if there is any third party apps to achieve this using angular.

I want to store my redis data to MySQL.
My Redis data array, and each data is object.

This is what I try, but cannot save to MySQL correctly.

if (redis_headline != null) {

var con = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "",
  database: "redistest"
});

con.connect(function(err) {
  if (err) throw err;
  console.log("Connected to MySQL!");
});

// redis isi
for (i = 0; i < redis_headline.length; i++) {

  var sql = "INSERT INTO `desc` (first_name, last_name, email, phone) VALUES ('" + redis_headline[i].first_name + "','" + redis_headline[i].last_name +"','" + redis_headline[i].email + "','" + redis_headline[i].phone + "')";

  con.query(sql, function (err) {
  if (err) throw err;
  console.log("record inserted");
  });

  client.flushdb( function (err, succeeded) {
  console.log(succeeded + ' flush redis'); // will be true if successfull
  });

  // var datas = 
  // console.log(redis_headline[i]);
}} else {}

** For example, here, when I click the button, I will have one more component, it means it will have new data, so I want to gather all info into one array.

<Child v-for="count in btnNumber" :key="count" @showData="getElements" />

<v-btn
  color="primary"
  elevation="10"
  class="space"
  large
  @click="duplicateEl"
  >Add Categ & Key</v-btn
>
v-btn
      color="secondary"
      elevation="13"
      class="btnEl"
      dark
      large
      @click="getResult"
      >Save Data</v-btn

** This getting data in my child element using Emit

methods:{
               getElements(emitPayload) {
              this.selectedChildCategory = emitPayload.selectedCateg;
              this.selectedChildKey = emitPayload.selectedKey;
              this.selectedChildLanguage = emitPayload.selectedLang;
              this.selectedChildContent = emitPayload.selectedCon;
        }
    }
 duplicateEl() {
  this.btnNumber++;
}

I am a new of Angular. I created header, footer and sidebar. And I was create dashboard component if I use in this dishoard component its works good. So it is working in component. then I created a module for employee. if i use Header Footer Sidebar in this employee module means its shows error

1. If ‘app-header’ is an Angular component, then verify that it is part of this module.
2. If ‘app-header’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

1

src/app/employee/list-employee/list-employee.component.ts:5:16
  5   templateUrl: './list-employee.component.html',
                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  Error occurs in the template of component ListEmployeeComponent.


Error: src/app/employee/list-employee/list-employee.component.html:2:1 - error NG8001: 'app-sidebar' is not a known element:
1. If 'app-sidebar' is an Angular component, then verify that it is part of this module.
2. If 'app-sidebar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

2 <app-sidebar></app-sidebar>

src/app/employee/list-employee/list-employee.component.ts:5:16
5 templateUrl: ‘./list-employee.component.html’,
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ListEmployeeComponent.

Error: src/app/employee/list-employee/list-employee.component.html:514:9 – error NG8001: ‘app-footer’ is not a known element:

1. If ‘app-footer’ is an Angular component, then verify that it is part of this module.
2. If ‘app-footer’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

514
~~~~~~~~~~~~

src/app/employee/list-employee/list-employee.component.ts:5:16
5 templateUrl: ‘./list-employee.component.html’,
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ListEmployeeComponent.

Please help me to sort out this error.

Prevent mongoDB to save duplicate email

 UserSchema.path('email').validate(async(email)=>{
   const emailcount = await mongoose.models.User.countDocuments({email})
   return !emailcount
 }, 'Email already exits')

May this help ur question…
worked for me..
use in user model.
refer for explaination
THANKS…

I need to create a JavaScript function for the below requirements. I need to get every week day date list. If you know nodeJs package tell me that. Thank you for your attention.

Example - 
 2022-01-03
 2022-01-04
 2022-01-05
 2022-01-06
 2022-01-07

 2022-01-10
 2022-01-11
 2022-01-12
 2022-01-13
 2022-01-14 
 ..........
 ..........
 until year-end

like this pattern (only Monday to Friday)

No se encontró ningún archivo de declaración para el módulo ‘jspdf’. ‘D:/proyectoTitulaciòn/angularPDF/WordPdf/node_modules/jspdf/dist/jspdf.min.js’ tiene un tipo “any” de forma implícita.

pequeño ejemplo:

    import { Component } from '@angular/core';
    import jspdf from 'jspdf';
    import html2canvas from 'html2canvas';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'WordPdf';
      constructor() {
        this.downloadPDF();
      }
      public downloadPDF(): void {
        const doc = new jspdf();

doc.text('Hello world!', 10, 10);
doc.save('hello-world.pdf');

}
}

I executed the function queryObjects(WebSocket.prototype) in chrome console, which was promised to return an array of existing websockets on that page. However the return value is undefined, then after a while the expected result was printed out. What happens?

> queryObjects(WebSocket.prototype)
< undefined
  Array(1)
  ...

It seems that this function has no return value but just prints out the query result.

I have the array of strings that I want to sort in a custom order
My array looks like this

[“E”, “D”, “CC”, “C”, “B”, “BB”, “BBB”, “A”, “AA”]

My expected result should look like this
[“AA”, “A”, “BBB”, “BB”, “B”, “CC”, “C”, “D”, “E”]

I tried to sort using the default sort() function but it didn’t give me expected results. So please give your suggestions

I have a field in my form. That field has to accept multidates, for that I am using:

$("#myInput").datepicker({
    format: "dd/mm/yyyy",
    multidate: true,
    templates: {
        rightArrow: '>',
        leftArrow: '<'
    }
});

<input type="text" id="myInput" name="myInput" placeholder="DD/MM/YYYY" class="form-control" autocomplete="off">

It works great, but I would like to prevent the user to input some illegal character with some regex pattern.

I’ve found some alphanumeric examples, but could not find an example for multidate. The idea is accepting numbers [0-9] and the characters "," and "/" only.

I also found this example for a single date, and I tried it but it did not work for multiple dates:

^(0?[1-9]|1[012])[- /.](0?[1-9]|[12][0-9]|3[01])[- /.](19|20)dd$

The accepted format is this: DD/MM/YYYY,DD/MM/YYYY,DD/MM/YYYY

E.g.

23/01/2022,25/01/2022,27/01/2022

I have string id=[digit]&option&name=[name].

I want to extract digit, name from string with using regex. How can I do that?

Or is there any other way?

I am sharing my website on whatapps from mobile to another mobile . Don’t know why my icon come on top.

My website url :

https://staging.ezylegal.in/legal-consultation

I used like this

<meta property='og:image' content='https://ezylegal.in/images/ezylogo.jpeg'/>
      <meta property="og:image:width" content="200" />
      <meta property="og:image:height" content="200" />

but when I am sharing another web site from my mobile to another mobile . it looks good. Icon show in left side of title and description

link : https://vakilsearch.com/. it is working fine as expected .

why my site icon goes to top while sharing from mobile.