Category: javascript

Category Added in a WPeMatico Campaign

Regex inside javascript string

I have a form that needs to be implemented through javascript:

var birthdayForm = '<form id="birthday_signup" class="klaviyo_gdpr_embed_Wh3QTB" style="margin-top: 40px;" action="//manage.kmail-lists.com/subscriptions/subscribe" data-ajax-submit="//manage.kmail-lists.com/ajax/subscriptions/subscribe" method="GET" target="_blank" novalidate="novalidate">'+
'<input type="hidden" name="g" value="Wh3QTB">'+
'<input type="hidden" name="$fields" value="Birthday">'+
'<input type="hidden" type="text" name="Birthday" id="final_birthday">'+
'<div class="klaviyo_field_group">'+
'<h2>Vertel ons jouw verjaardag en we zorgen voor een leuke verrassing!</h2>'+
'<input class="" style="display:none;" type="email" value="" name="email" id="k_id_email" placeholder="Your email" />'+
'<div class="klaviyo_field_group klaviyo_form_actions">'+
'<div class="klaviyo_field_group" style="margin: 10px 0;">'+
'<input id="klaviyo_form_Birthday" oninput="this.value = this.value.replace(/[^0-9/.]/g, '').replace(/(..*)./g, '$1');" placeholder="dd/mm/yyyy" maxlength="10" type="text" />'+
'<button type="submit" class="klaviyo_submit_button btn" style="margin-left: 15px;">Versturen</button>'+
'</div>'+
'</div>'+
'</div>'+
'<div class="klaviyo_messages">'+
'<div class="success_message" style="display:none;">'+
'<p class="thank_you">Bedankt om jouw verjaardag te delen!</p>'+
'</div>'+
'<div class="error_message" style="display:none;"></div>'+
'</div>'+
'<div class="klaviyo_form_actions" style="margin: 10px 0;">'+
''+
'</div>'+
'</form>';

As you can see, the following regex is beig executed on “oninput”:

oninput="this.value = this.value.replace(/[^0-9/.]/g, '').replace(/(..*)./g, '$1');"

Unfortunately, this breaks. It’s probably not being escaped correctly. I fail to see how exactly though. Can anyone help me?

Push notice not being read

I am trying to get the push notices visible upon pressing the button, depending on your age either of the “You are of legal age” or “You are not of legal age” messages should be written out depending on the age input by the user, if all previous inputs are filled and password is correct.

Sorry for any formatting issues.

HTML:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Inlämningsuppgift</title>
    
        <script src="JSny copy.js" defer></script>
    </head>
    <body>
        <div id="errorOutput"></div>    
        <p id="output"></p>
            <div>
                <label for="UNameInput">Name Input</label>
                <input id="UNameInput" name="name" type="text">
            </div>
            <div>
                <label for="AgeInput">Age Input</label>
                <input id="AgeInput" name="age" type="number">
            </div>
            <div>
                <label for="PasswordInput">Password Input</label>
                <input id="PasswordInput" name="password" type="password">
            </div>
            <button id="button">Submit</button>
    </body>
    </html>

JS Code:

let nameElement = document.getElementById("UNameInput");
let faultElement = document.getElementById("errorOutput");
let ageElement = document.getElementById("AgeInput");
let clickElement = document.getElementById("button");
let passwordElement = document.getElementById("PasswordInput");

clickElement.addEventListener("click", function (e) {

    let feedback = [];
    let users = [];

    if (UNameInput.value === '' || UNameInput.value === null) {
        feedback.push('Name input missing')
    }

    else if (AgeInput.value === '' || AgeInput.value === null) {
        feedback.push('Age input missing')
    }
    else if (PasswordInput.value !== 'IHM') {
        feedback.push('Password is not valid')

    } else feedback.forEach((item, i) => {
            
        if (ageElement.value < 18) {
                feedback.push ("You are not of legal age")
            }
        else {
            feedback.push("You are of legal age")
            }
    
    }); 

    if (feedback.length > 0) {
        e.preventDefault()
        faultElement.innerText = feedback.join(", ")
    }
});

Do multiple exports of same code increase bundle size?

I have a folder called types where I store all my typescript types in the same structure as my main project. I store types that are needed in several places in this folder. This is how my types folder looks like:

enter image description here

My other components sometimes need types from several of the files in this folder, so I added index.ts files to import all files in each folder to their respective index.ts file and finally I export all the index.ts files from the main index.ts file in types folder.

This is how index.ts file in utils folder looks like:

export * from './showToast';
export * from './urlGenerator';

This is how main index.ts file looks like:

export * from './components/common';
export * from './services';
export * from './utils';

Everything works perfectly and I can import all my types from the main index.ts file but I was wondering if this exporting of the same types multiple times (once in file itself, once in index.ts file inside respective folder, once in main index.ts file) can increase the bundle size or have any bad effects. I have used this approach for some of my other folders too. So does this approach have any bad effects? I would like to hear your suggestions for structure if this structure is not good.

How do I access array with array using vueJs?

0: {id: "162e0db0-b1af-465c-b8b2-a0148dc7d67d", 
feeCategoryID: "c75b6190-7ca2-4095-9647-84e9f3790185",..}
academicYearID: 12
endAdmissionDate: "2022-03-31T00:00:00.000Z"
feeComponentClassMaps: 
0: {classID: 969, studentClasses: [{id: 969, name: "PP2 TO GRADE 1"}]}
1: {classID: 974, studentClasses: [{id: 974, name: "PP2 TO GRADE 2"}]}


1: {id: "152e0db0-b1af-465c-b8b2-a0148dc7d69fv", 
feeCategoryID: "c35b6190-7ca2-4095-9647-84e9f3790165",…}
academicYearID: 13
endAdmissionDate: "2022-03-31T00:00:00.000Z"
feeComponentClassMaps: 
0: {classID: 979, studentClasses: [{id: 979, name: "E BC NURSERY"}]}
1: {classID: 986, studentClasses: [{id: 986, name: "EG BC NURSERY"}]}

I want to fetch all name value from array index one i.e “E BC NURSERY” and “EG BC NURSERY” should be fetch in drop down.

Where to find WebResource.axd content?

I got the error:

Uncaught TypeError: Cannot read properties of undefined (reading 'msie')
    at WebResource.axd?d=9kt8eMc73gjmdxKdtauxMGWpeEJPPdzsEytOzsGkf9WUbOAjb_UolpPdxPWIQIcXQtAs860WkwqCX0v0efdVU1qWiuHOy7z3bQxYZ2BDe9pDHv9U2AEVJaJreobpRQbPSvNzEHcinTIvb9e8phydNw2&t=635203711126644101:7
    at WebResource.axd?d=9kt8eMc73gjmdxKdtauxMGWpeEJPPdzsEytOzsGkf9WUbOAjb_UolpPdxPWIQIcXQtAs860WkwqCX0v0efdVU1qWiuHOy7z3bQxYZ2BDe9pDHv9U2AEVJaJreobpRQbPSvNzEHcinTIvb9e8phydNw2&t=635203711126644101:7

when i click on the link it opens JS script that i cant find on my solution.

I tried to remove from web.config

<httpHandlers>
      <add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" validate="false" />

but it did not worked. Where is the JS file?

channel tag is not displayed as notification message for all

I use this JavaScript code to send notifications to Slack channel:

function start() {
  const axios = require('axios');
  axios.post('https://hooks.slack.com/services/34234/13222/124124',
    {text: " :x: @channel message send! "})
    .then((response) => console.log(response))
    .catch((error) => console.log(error));
}

start();

But I receive @channel just as a simple text. It should be channel notification yellow. Do you know what might be the issue?

Firebase & Javascript – Sorting Data Using Firestore Queries Conditionally Through Dropdown Menu

While creating a project got stuck at a point. I want to sort the data according to the particular item selected from dropdown menu. I want to replace the first argument of onSnapshot function (colRef) with query variables conditionally.

The code relevant to the problem :-

data :

books(collection)
  document-1(doc)
    {
      "title": "title-1",
      "rating": 4.0,
      "year" : xxxx,
      "createdAt": created time
    }
  document-2(doc)
    {
       ....
       ....
    }

index.html :

<div class="sort-dropdown">
    <button>Alphabetical Order</button>
    <button>Rating</button>
    <button>Date</button>
    <button>Recent Book</button>
</div>

db.js :

// Initialize services
const db = getFirestore()

// collection reference
const colRef = collection(db, 'books')

// query references
const q1 = query(colRef, orderBy('title'))
const q2 = query(colRef, orderBy('rating'))
const q3 = query(colRef, orderBy('date'))
const q4 = query(colRef, orderBy('createdAt'))

// Getting realtime collection data
onSnapshot(colRef, (snapshot) => {
  snapshot.docChanges().forEach(change => {
    if(change.type === 'added'){
      renderList(change.doc.data(), change.doc.id);
    }
  })
})

const renderList = (data, id) => { ... using some dom elements to display data }

this returns undefined: (node:3196) UnhandledPromiseRejectionWarning: TypeError: Cannot read property ‘myArray’ of undefined

Here’s my code:

https://github.com/DavidNyan10/NewProject

const fs = require('fs');
const csv = require('csv-parser')

const myString = new Promise((resolve, reject) => {
    resolve('John');
});

class myClass{
    constructor(filename){
        this.myArray = [];
        this.myArray.push(new Promise((res) => {
            fs.createReadStream('filename')
                  .pipe(csv(['FirstName', 'LastName', 'Address', 'Town', 'Country', 'Postcode']))
                  .on('data', (data) => {
                    return(data);
                  })
          }))
    }
    async myFunction() {
        for(let i = 0; i < this.myArray.length; i++) {
            if (myString.includes(this.myArray[i]['phrase'])){
                if (this.cooled_down(i)){
                    this.approve(i, myString);
                }
            }
        }
    }
    
    cooled_down(i){
        dictionary = this.myArray[i]
        if (!dictionary.keys().includes('approved')){
            // Means we have never approved on this person!
            return True;
        } else{
            now = datetime.now();
            duration = now - datetime.fromtimestamp(dictionary['approved']);
            duration_seconds = duration.total_seconds();
            hours = divmod(duration_seconds, 3600)[0];
            if (hours >= 24){
                return True;
            } else{
                console.log("Couldn't approve " + dictionary['FirstName'] + "Cool Down time: " + 24 - hours);
            }
        }
        return False;
    }

    approve(i, myString){
        dictionary = this.myArray[i];
        try{
            setTimeout(function(){
                console.log(myString);
                console.log(dictionary['FirstName'])
                console.log(dictionary['Postcode'])
            }, 60 * 60 * 3);
        }catch(e){
            console.log(e);
        }

        now = datetime.now();
        this.myArray[i]['approved'] = now.timestamp();
    }
}

myObj = new myClass("myCSV.csv");
myString.then(myObj.myFunction);

It keeps saying

(node:3196) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'myArray' of undefined
    at myFunction (D:projectsnewprojectindex.js:20:30)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:3196) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:3196) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

But as you can clearly see, this.myArray is clearly defined well on line 10.

What is going on?

I’m pretty new to javascript classes and objects, so I’m sorry if I looks dumb.

Also, any ideas how i can make line 11-17 better? I’m just putting the csv into an array but I don’t know if that’s the best way to do it.

Change the scroll bar width, color and height of specific container with overflow property

I want to change the width color and height of the scroll bar only of my sidebar in the dashboard. I have seen in the many pages that browser scrollbar and specific container(with overflow property) differs. when i try to change the scroll bar property of it, browsers scrollbar changes too. So anybody please help me to change the propety of specific container scrollbar. Thankyou.