Category: javascript

When adding a position: fixed on-scroll on my navbar the DOM throws the error: [Violation] Forced reflow while executing JavaScript took ms, on every scroll event. From my understanding (and Googling) this means there is layout thrashing everytime a scroll event happens due to new calculation.

My question is; is this a problem? I can’t really crack the code of how to improve it to remove the violation, hence why I wanted to hear if this is ‘standard’ behaviour when working with scroll offsets.

The code I’m using is below:

document.addEventListener('DOMContentLoaded', function() {
    
  window.addEventListener('scroll', addPositionFixed);

  var navbar = document.getElementById("navbar");

  var sticky = navbar.offsetTop;

  function addPositionFixed() {
    if (window.pageYOffset >= sticky) {
      navbar.classList.add("sticky");
    } else {
      navbar.classList.remove("sticky");
    }
  }
})

Is there a way to connect queued_Dr to upcoming_appointments by using all_appointments

What would be the best approach to this problem?

var queued_Dr = ["Dr.Salazar",["Dr.Connors","Dr.Johnson"],"Dr.Pearson"]


upcoming_appointments =
[  
     {"DOB":"01-27-2002","name":"Judy, W." ,"PCD":"Dr-S"}
    ,{"DOB":"08-15-1995","name":"John, V." ,"PCD":"Dr-C"}
    ,{"DOB":"07-05-1992","name":"David, C.","PCD":"Dr-S"}
    ,{"DOB":"01-15-2002","name":"Anna, S." ,"PCD":"Dr-J"}
    ,{"DOB":"01-15-2002","name":"Jeff, D." ,"PCD":"Dr-P"}
]


all_appointments = 
{
    "0": ["Dr-S","New York","Dr.Salazar"],
    "1": ["Dr-C","Austin","Dr.Connors"],
    "2": ["Dr-J","Austin","Dr.Johnson"],
    "3": ["Dr-S","New York","Dr.Salazar"],
    "4": ["Dr-P","San Juan","Dr.Pearson"],
    "5": ["Dr-J","Austin","Dr.Johnson"]
}

Goal Output

"Dr.Salazar" -> "Dr-S"
["Dr.Connors","Dr.Johnson"] -> "Dr-C" or "Dr-J"
"Dr.Pearson"] -> "Dr-P"

I’m making a simple site for a project, and i want to redirect player to a login page if the token is expired, but I’m not really sure how to do it properly, here’s what I’ve tried, im using react-jwt to check the token

function App() {

  return (
    <div style={{display:'flex', flexDirection:'column', height:'100vh'}}>
      <Navbar/>
      <div style={{display:'flex', flex:1}}>
        <Routes>
          <Route path="/login" element ={<LoginForm/>} />
          <Route path="/signUp" element ={<SignUpForm/>} />
          <Route path="/addMovie" element= {<AddMovie/>} />
          <Route path="/" element={isExpired(localStorage.getItem('token') ? <FilmList/> : <LoginForm/> )} />
          <Route path="/details" exact element ={<MovieDetails/>} />
        </Routes>
      </div>
    </div>
  );
}

or something like

<Route path="/" 
render={props=>{
  if(isExpired(localStorage.getItem('token'))){
    return <Navigate to='/login'/>;
  }
  return <FilmList/>
}}
/>

The first one just returns nothing, and the second one gives a warning in console:

Matched leaf route at location “/” does not have an element. This
means it will render an with a null value by default resulting in an
“empty” page.

Is there a way to make it work ?

I’m looking for a way to add a chart to my excel file that is generated by a react app (the kind of chart that you can insert normally in MS Excel and is dependent on some cell values, not an image of a chart)

currently I’m using Kendo-UI to export excel, but I’m open to changing it to any other library that also works fine with excel formats and styles,

this is an example of the result I need:

any recommendation or workaround is appreciated

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("");
}

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?

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)

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