Category: javascript

Category Added in a WPeMatico Campaign

Discord JS: Cannot find Module

I’m working on implementing slash commands to my bot. For that I made a deploy-commands.js which is located in ./src/deploy-commands.js. My commands are located in ./src/commands/. At the moment my only command is a simple ping.js. With the following code I’m trying to read the commands in my commands folder and push them into an array.

require("dotenv").config()
const fs = require("fs")
const { REST } = require("@discordjs/rest")
const { Routes } = require('discord-api-types/v9')
const commands = []

const CommandFiles = fs.readdirSync("./src/commands").filter(file => file.endsWith(".js"))

CommandFiles.forEach(commandFile => {
    const command = require(`.commands/${commandFile}`)
    commands.push(command.data.toJSON())
})


const restClient = new REST({version: "9"}).setToken(process.env.DISCORD_BOT_TOKEN)



restClient.put(Routes.applicationGuildCommands(process.env.DISCORD_APPLICATION_ID, process.env.DISCORD_GUILD_ID),
{body: commands})
.then(() => console.log("Commands wurden geladen!"))
.catch(console.error)

Also I created a script in my package.json to easily run the deploy-commands.js file. Now when I run my script via npm run deployCommands I get the following error:

Error: Cannot find module '.commands/ping.js'
Require stack:
- C:UsersnilsiDesktopDiscord Botsrcdeploy-commands.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at C:UsersnilsiDesktopDiscord Botsrcdeploy-commands.js:13:21
    at Array.forEach (<anonymous>)
    at Object.<anonymous> (C:UsersnilsiDesktopDiscord Botsrcdeploy-commands.js:12:14)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Module.load (node:internal/modules/cjs/loader:981:32) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ 'C:\Users\nilsi\Desktop\Discord Bot\src\deploy-commands.js' ]
}

Issue with Mongodb pre-defined javascript

I keep getting, Missing ";" before statement error in Mongodb Atlas Online. I am new to this, and I fail to see why the following lines gives this error:

const counter = await counterCollection.findOneAndUpdate({_id: changeEvent.ns },{ $inc: { seq_value: 1 }}, { returnNewDocument: true, upsert : true});

AND:

const updateRes = await targetCollection.updateOne({_id: docId},{ $set: doc});

Full code:

exports = function(changeEvent) {
  const docId = changeEvent.fullDocument._id;
  
  const counterCollection = context.services.get("Cluster0").db(changeEvent.ns.db).collection("counters");
  const targetCollection = context.services.get("Cluster0").db(changedEvent.ns.db).collection(changeEvent.ns.coll);
  const counter = await counterCollection.findOneAndUpdate({_id: changeEvent.ns },{ $inc: { seq_value: 1 }}, { returnNewDocument: true, upsert : true});
  
  const doc = {};
  doc[`${changeEvent.ns.coll}Id`] = counter.seq_value;
  const updateRes = await targetCollection.updateOne({_id: docId},{ $set: doc});
  console.log(`Updated ${JSON.stringify(changeEvent.ns)} with counter ${counter.seq_value} result: ${JSON.stringify(updateRes)}`);
};

enter image description here

get cells in range and paste as values Apps script

I have a range A2:Z5000 that i am trying to paste as values in the same exact range (turn formulas into fixed values)

In range A2 i have a ImportData formula fetching data from a csv file.

My script goes like:

var sheet = SpreadsheetApp.getActive().getSheetByName('MYSQLimport');
sheet.getRange("A2:Z5000").copyTo(sheet.getRange("A2:Z5000"), {contentsOnly:true});

but it erases the content instead of setting it as values…

JS alter JSON value to match key

I have the following JSON and I am trying to alter it to have the same key and value string:

var icons = {
      "123": 63103,
      "alarm-fill": 61697,
      "alarm": 61698
}

I’m trying the following code:

var newIcons = [];

for (var key in icons) {
    if (icons.hasOwnProperty(key)) {
        newIcons.key = key;
    }
}

console.log(newIcons);

It should return the following:

{
  "123": "123",
  "alarm-fill": "alarm-fill",
  "alarm": "alarm"
}

How to retrieve email and password from key parent that is assigned to an user while making an account

I want to get the points and show to the owner of that account when he is logged in I tried reading firebase documentation but I couldn’t made it here is the code that I use for assigning the random key and saving the child data

const autoid = firebase.database().ref("user").push().key;
firebase.database().ref("user").child(autoid).set({

Email :email,
Password : password,
Points :”500″

})
As in the image shown i want logged in user to get their respective points shown in their profile.

How destructure an object starting from a constant?

I have a utils/constant.js file with:

// Key of total elements in remote collection
export const TOTAL_ELEMENTS = "totalElements";

I need to access to totalElements via the constant.

import { TOTAL_ELEMENTS } from "./constants.js";
[...]
let data = {
    content: "foo",
    totalElements: 54
};

if(TOTAL_ELEMENTS in data) {
    // pseudocode, of course it doesn't work.
    // of course in my case need to return 54
    const { TOTAL_ELEMENTS } = data;
    return TOTAL_ELEMENTS;
}

cann’t fill the value of the inputs by jquery

I want to fill the value of the rows of a table into textboxes by clicking a button. this is what I have done

  <table id="tbl_Features" class="col-md-12 table table-bordered table-hover  table-condensed table-responsive">
                                <thead>
                                    <tr>
                                        <th>
                                            Name
                                        </th>
                                        <th>
                                            Value
                                        </th>
                                        <th>

                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach (var item in Model)
                                    {
                                        <tr >
                                            <td id="displayName@{@item.Id}">
                                                @item.DisplayName
                                            </td>
                                            <td  id="Value@{@item.Id}">
                                                @item.Value
                                            </td>
                                            <th>
                                                <div class="dropdown">
                                                    <button class="btn bg-blue dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        Operation
                                                    </button>
                                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">                                                            

                                                        <a href="#" onclick="FillFeaturetoEdit(@item.Id)" class="dropdown-item">edit</a>

                                                    </div>
                                                </div>
                                            </th>
                                        </tr>
                                    }
                                </tbody>
                            </table>

This is the jquery for that

  function FillFeaturetoEdit(id){
        debugger;
         var row = $("#displayName"+id);   
         var valueItem= row.text();
         $("#txtDisplayName").val(valueItem);
         row = $("#Value"+id);  
         valueItem= row.text();
         $("#txtValue").val(valueItem);
    }

but anytime I click the edit button although the row.text() and ValueItem show the right value but inputs(txtDisplayName and txtValue) value are empty

React JS – Best way to have coninues results for every key stroke using a REST calls to server?

In short we have a massive database and need to provide results as the user types them in the search box. It is impossible for us to preload queries and attempt to match that way.

Currently we send a request to the server with the new query string every 2 chars or 5 seconds. This is a bit of a mess however, so I’m looking to see if there is a faster/better way of doing this.

Previous solutions I’ve seen would require pre-feteching which in our case is not possible and considering the size of the return too costly.

how to check if a phone number is valid whatsapp number in PHP?

so I have a text field that will be used as a view to get phone number from user, say if the phone number is +25678****** , I want to check if this number is a valid whatsapp number or not,i want to restrict the user to input fake whatsapp number, how to do that ?

I have searched every where on google but failed to get a solution

HTML onClick node js function loading ‘require’ another module in the onClick function not working

I have code like:

<!DOCTYPE html>
<html>
<body>

<h1>HTML DOM Events</h1>
<h2>The onclick Event</h2>

<p>The onclick event triggers a function when an element is clicked on.</p>
<p>Click to trigger a function that will output "Hello World":</p>

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

<script>
function myFunction() {
  const os = require('os')
  document.getElementById("demo").innerHTML = "Hello World";
}
</script>

</body>
</html>

The code works when I remove:
const os = require('os')

I however need to load a module in this function that is being used for the onClick event.

Please note that I am a noob to javascript.
Any and all assistance / guidance will be much appreciated.

Thanks.

Once a draggable elements has been appended how to get the next one to be positioned at the same place?

Once a draggable element’s been dropped into a valid target i.e the user’s answered the question correctly s/he can move on to the next one. I’d like the next question to be positioned at the exact same place as the previous one. In order to do so I’ve created the newElement() function. But it’s not working as it should be. I’ve tried to use different methods such as insertBefore() but the console keep throwing message like: “Uncaught DOMException: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node”. appendChild() isn’t working either. I know it’s something to do with DOM manipulation but I haven’t the foggiest how to go about solving this issue. Help please.

const questionQuiz = document.querySelector(".question");
const answerChoices = document.querySelector(".answerchoices");
const allChoices = Array.from(document.querySelector(".answerchoices").children);
const choiceA = document.querySelector(".choiceA");
const choiceB = document.querySelector(".choiceB");
const choiceC = document.querySelector(".choiceC");
const start = document.querySelector(".start");
const quizSection = document.querySelector(".quizSection");
const choices = document.querySelectorAll(".choice");
const answerSection = document.querySelector(".answerSection");
const counter = document.querySelector(".counter");
const timerBar = document.querySelector(".timerBar");
const finalScore = document.querySelector(".finalScore");
const parent = document.querySelector(".parent");
console.log(quizSection)

let questions = [

  {
    question: "How many Grand Slam men's singles titles has he won?",
    choiceA: 10,
    choiceB: 15,
    choiceC: 20,
    questionImg: "url(images/federer.jpeg)",
    correctAnswer: 20,
  },

  {
    question: "How many Formula One World Championship has he won?",
    choiceA: 5,
    choiceB: 7,
    choiceC: 10,
    questionImg: "url(images/hamilton.jpeg)",
    correctAnswer: 7,
  },

  {
    question: "How many NBA title has Lebron won?",
    choiceA: 6,
    choiceB: 3,
    choiceC: 4,
    questionImg: "url(images/LeBron.png)",
    correctAnswer: 4,
  },

  {
    question: "How many Ballon D'or has the Argentinina won?",
    choiceA: 5,
    choiceB: 6,
    choiceC: 7,
    questionImg: "url(images/LeBron.png)",
    correctAnswer: 7,
  },

]

let lastQuestion = questions.length - 1;
let activeQuestion = 0;
let count = 0;
let score = 0;
let x = 0;
let timeUp = 10;
let timerBarLength = 800;
let unitBar = timerBarLength / timeUp;
let dragged;

start.addEventListener("click", startQuiz)

function startQuiz() {
  start.style.visibility = "hidden";
  parent.style.visibility = "visible";
  renderQuestion();
  progressBar();
  setInterval(timerBarFunction, 1000);
  setInterval(counterFunction, 1000);
}

function timerBarFunction() {
  if(count < timeUp) {
    timerBar.style.width = `${count*unitBar}px`
    count++;
  } else {
    count = 0;
  }
}

function progressBar() {
  for(var questionIndex = 0; questionIndex < questions.length; questionIndex++) {
    answerSection.innerHTML += `<div class="progress-boxes" id=${questionIndex}></div>`
  }
}

function counterFunction() {
  if(x <= timeUp) {
    counter.innerHTML = x;
    x++;
  } else {
    x = 0;
    nextQuestion();
    wrongAnswer();
  }
}

function renderQuestion() {
  let q = questions[activeQuestion]
  choiceA.innerHTML = q.choiceA;
  choiceB.innerHTML = q.choiceB;
  choiceC.innerHTML = q.choiceC;
  questionQuiz.innerHTML = q.question;
  // document.body.style.backgroundImage = q.questionImg
}



questionQuiz.addEventListener("drag", function(e) {

})

questionQuiz.addEventListener("dragstart", function(e) {
  console.log("start");
  dragged = e.target;
  console.log(dragged.innerHTML)
});

questionQuiz.addEventListener("dragend", function() {
  console.log('end')
});

allChoices.forEach((choice) => {
  choice.addEventListener("dragover", dragOver)
});

allChoices.forEach(choice => {
  choice.addEventListener("dragenter", dragEnter)
});

allChoices.forEach(choice => {
  choice.addEventListener("dragleave", dragLeave)
});

allChoices.forEach(choice => {
  choice.addEventListener("drop", drop)
})


function dragOver(e) {
  e.preventDefault()
  console.log("dragover")
}

function dragEnter(e) {
  e.preventDefault();
  console.log("dragenter");
}

function dragLeave() {
  console.log("dragleave")
}

function drop(e) {
  e.preventDefault()
  if(parseInt(e.target.innerHTML) !== questions[activeQuestion].correctAnswer) {
    wrongAnswer();
    nextQuestion()
  } else {
    correctAnswer();
    score++;
    e.target.appendChild(dragged);
    nextQuestion();
    newElement();

  }
}

function correctAnswer() {
  document.getElementById(activeQuestion).style.backgroundColor = "green";
}
function wrongAnswer() {
  document.getElementById(activeQuestion).style.backgroundColor = "red";
}

function nextQuestion() {
  count = 0;
  if(activeQuestion < lastQuestion) {
    activeQuestion++
    renderQuestion();
  } else {
    renderScore();
  }
}

function renderScore() {
  finalScore.innerHTML = score;
  finalScore.style.visibility = "visible";
}

function newElement() {
  let newDiv = document.createElement("div");
  newDiv.setAttribute("class", "question");
  newDiv.setAttribute("draggable", "true");
  newDiv.innerHTML = questions[activeQuestion].question;
  parent.appendChild(newDiv);
  // document.body.insertBefore(newDiv, answerChoices.nextSibling);
}
body {
  background-repeat: no-repeat;:
}

.answerchoices > *{
  margin-bottom: 15px;
}

.answerSection {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
}

.start {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.finalScore {
  visibility: hidden;
}


.quizSection {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.question,
.answerchoices > *{
  height: 100px;
  width: 100px;
  border: 1px black solid;
}

.progress-boxes {
  height: 30px;
  width: 30px;
  color: grey;
  background-color: grey;
  margin: 10px;
}

.timerBar {
  height: 5px;
  /* width: 800px; */
  color: blue;
  background-color: purple;
  border: 1px black solid;
}

.parent {
  visibility: hidden;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="index.css">
    <title>Drag And Drop</title>
  </head>
  <body>

    <div class="parent">
      <div class="quizSection">
        <div class="question" draggable="true"></div>
        <div class=answerchoices>
          <div class="choiceA">choiceA</div>
          <div class="choiceB">choiceB</div>
          <div class="choiceC">choiceC</div>
        </div>
      </div>

      <div class="answerSection"></div>
      <div class="counter"></div>
      <div class="timerBar"></div>
      <div class="finalScore"></div>
    </div>

    <div class="start">Cick here to start quizz</div>

    <script src="index.js" type="text/javascript"></script>

  </body>
</html>

Adding options in Dropdown dynamically

I am trying to include countries’ name with their flags in the dropdown. I am using select2 library. The code below shows names in the dropdown but its width is too low to see anything, seems I am doing very silly mistake and missing something.

$(document).ready(function() {
  var isoCountries = [{
      id: 'AF',
      text: 'Afghanistan'
    },
    {
      id: 'AX',
      text: 'Aland Islands'
    },
    {
      id: 'AL',
      text: 'Albania'
    },
    {
      id: 'DZ',
      text: 'Algeria'
    },
    {
      id: 'AS',
      text: 'American Samoa'
    },
    {
      id: 'AD',
      text: 'Andorra'
    },
    {
      id: 'AO',
      text: 'Angola'
    },
    {
      id: 'AI',
      text: 'Anguilla'
    },
    {
      id: 'AQ',
      text: 'Antarctica'
    },
    {
      id: 'AG',
      text: 'Antigua And Barbuda'
    },
    {
      id: 'AR',
      text: 'Argentina'
    },
    {
      id: 'AM',
      text: 'Armenia'
    },
    {
      id: 'AW',
      text: 'Aruba'
    },
    {
      id: 'AU',
      text: 'Australia'
    },
    {
      id: 'AT',
      text: 'Austria'
    },
    {
      id: 'AZ',
      text: 'Azerbaijan'
    },
    {
      id: 'BS',
      text: 'Bahamas'
    },
    {
      id: 'BH',
      text: 'Bahrain'
    },
    {
      id: 'BD',
      text: 'Bangladesh'
    },
    {
      id: 'BB',
      text: 'Barbados'
    },
    {
      id: 'BY',
      text: 'Belarus'
    },
    {
      id: 'BE',
      text: 'Belgium'
    },
    {
      id: 'BZ',
      text: 'Belize'
    },
    {
      id: 'BJ',
      text: 'Benin'
    },
    {
      id: 'BM',
      text: 'Bermuda'
    },
    {
      id: 'BT',
      text: 'Bhutan'
    },
    {
      id: 'BO',
      text: 'Bolivia'
    },
    {
      id: 'BA',
      text: 'Bosnia And Herzegovina'
    },
    {
      id: 'BW',
      text: 'Botswana'
    },
    {
      id: 'BV',
      text: 'Bouvet Island'
    },
    {
      id: 'BR',
      text: 'Brazil'
    },
    {
      id: 'IO',
      text: 'British Indian Ocean Territory'
    },
    {
      id: 'BN',
      text: 'Brunei Darussalam'
    },
    {
      id: 'BG',
      text: 'Bulgaria'
    },
    {
      id: 'BF',
      text: 'Burkina Faso'
    },
    {
      id: 'BI',
      text: 'Burundi'
    },
    {
      id: 'KH',
      text: 'Cambodia'
    },
    {
      id: 'CM',
      text: 'Cameroon'
    },
    {
      id: 'CA',
      text: 'Canada'
    },
    {
      id: 'CV',
      text: 'Cape Verde'
    },
    {
      id: 'KY',
      text: 'Cayman Islands'
    },
    {
      id: 'CF',
      text: 'Central African Republic'
    },
    {
      id: 'TD',
      text: 'Chad'
    },
    {
      id: 'CL',
      text: 'Chile'
    },
    {
      id: 'CN',
      text: 'China'
    },
    {
      id: 'CX',
      text: 'Christmas Island'
    },
    {
      id: 'CC',
      text: 'Cocos (Keeling) Islands'
    },
    {
      id: 'CO',
      text: 'Colombia'
    },
    {
      id: 'KM',
      text: 'Comoros'
    },
    {
      id: 'CG',
      text: 'Congo'
    },
    {
      id: 'CD',
      text: 'Congo}, Democratic Republic'
    },
    {
      id: 'CK',
      text: 'Cook Islands'
    },
    {
      id: 'CR',
      text: 'Costa Rica'
    },
    {
      id: 'CI',
      text: 'Cote D'Ivoire'
    },
    {
      id: 'HR',
      text: 'Croatia'
    },
    {
      id: 'CU',
      text: 'Cuba'
    },
    {
      id: 'CY',
      text: 'Cyprus'
    },
    {
      id: 'CZ',
      text: 'Czech Republic'
    },
    {
      id: 'DK',
      text: 'Denmark'
    },
    {
      id: 'DJ',
      text: 'Djibouti'
    },
    {
      id: 'DM',
      text: 'Dominica'
    },
    {
      id: 'DO',
      text: 'Dominican Republic'
    },
    {
      id: 'EC',
      text: 'Ecuador'
    },
    {
      id: 'EG',
      text: 'Egypt'
    },
    {
      id: 'SV',
      text: 'El Salvador'
    },
    {
      id: 'GQ',
      text: 'Equatorial Guinea'
    },
    {
      id: 'ER',
      text: 'Eritrea'
    },
    {
      id: 'EE',
      text: 'Estonia'
    },
    {
      id: 'ET',
      text: 'Ethiopia'
    },
    {
      id: 'FK',
      text: 'Falkland Islands (Malvinas)'
    },
    {
      id: 'FO',
      text: 'Faroe Islands'
    },
    {
      id: 'FJ',
      text: 'Fiji'
    },
    {
      id: 'FI',
      text: 'Finland'
    },
    {
      id: 'FR',
      text: 'France'
    },
    {
      id: 'GF',
      text: 'French Guiana'
    },
    {
      id: 'PF',
      text: 'French Polynesia'
    },
    {
      id: 'TF',
      text: 'French Southern Territories'
    },
    {
      id: 'GA',
      text: 'Gabon'
    },
    {
      id: 'GM',
      text: 'Gambia'
    },
    {
      id: 'GE',
      text: 'Georgia'
    },
    {
      id: 'DE',
      text: 'Germany'
    },
    {
      id: 'GH',
      text: 'Ghana'
    },
    {
      id: 'GI',
      text: 'Gibraltar'
    },
    {
      id: 'GR',
      text: 'Greece'
    },
    {
      id: 'GL',
      text: 'Greenland'
    },
    {
      id: 'GD',
      text: 'Grenada'
    },
    {
      id: 'GP',
      text: 'Guadeloupe'
    },
    {
      id: 'GU',
      text: 'Guam'
    },
    {
      id: 'GT',
      text: 'Guatemala'
    },
    {
      id: 'GG',
      text: 'Guernsey'
    },
    {
      id: 'GN',
      text: 'Guinea'
    },
    {
      id: 'GW',
      text: 'Guinea-Bissau'
    },
    {
      id: 'GY',
      text: 'Guyana'
    },
    {
      id: 'HT',
      text: 'Haiti'
    },
    {
      id: 'HM',
      text: 'Heard Island & Mcdonald Islands'
    },
    {
      id: 'VA',
      text: 'Holy See (Vatican City State)'
    },
    {
      id: 'HN',
      text: 'Honduras'
    },
    {
      id: 'HK',
      text: 'Hong Kong'
    },
    {
      id: 'HU',
      text: 'Hungary'
    },
    {
      id: 'IS',
      text: 'Iceland'
    },
    {
      id: 'IN',
      text: 'India'
    },
    {
      id: 'ID',
      text: 'Indonesia'
    },
    {
      id: 'IR',
      text: 'Iran}, Islamic Republic Of'
    },
    {
      id: 'IQ',
      text: 'Iraq'
    },
    {
      id: 'IE',
      text: 'Ireland'
    },
    {
      id: 'IM',
      text: 'Isle Of Man'
    },
    {
      id: 'IL',
      text: 'Israel'
    },
    {
      id: 'IT',
      text: 'Italy'
    },
    {
      id: 'JM',
      text: 'Jamaica'
    },
    {
      id: 'JP',
      text: 'Japan'
    },
    {
      id: 'JE',
      text: 'Jersey'
    },
    {
      id: 'JO',
      text: 'Jordan'
    },
    {
      id: 'KZ',
      text: 'Kazakhstan'
    },
    {
      id: 'KE',
      text: 'Kenya'
    },
    {
      id: 'KI',
      text: 'Kiribati'
    },
    {
      id: 'KR',
      text: 'Korea'
    },
    {
      id: 'KW',
      text: 'Kuwait'
    },
    {
      id: 'KG',
      text: 'Kyrgyzstan'
    },
    {
      id: 'LA',
      text: 'Lao People's Democratic Republic'
    },
    {
      id: 'LV',
      text: 'Latvia'
    },
    {
      id: 'LB',
      text: 'Lebanon'
    },
    {
      id: 'LS',
      text: 'Lesotho'
    },
    {
      id: 'LR',
      text: 'Liberia'
    },
    {
      id: 'LY',
      text: 'Libyan Arab Jamahiriya'
    },
    {
      id: 'LI',
      text: 'Liechtenstein'
    },
    {
      id: 'LT',
      text: 'Lithuania'
    },
    {
      id: 'LU',
      text: 'Luxembourg'
    },
    {
      id: 'MO',
      text: 'Macao'
    },
    {
      id: 'MK',
      text: 'Macedonia'
    },
    {
      id: 'MG',
      text: 'Madagascar'
    },
    {
      id: 'MW',
      text: 'Malawi'
    },
    {
      id: 'MY',
      text: 'Malaysia'
    },
    {
      id: 'MV',
      text: 'Maldives'
    },
    {
      id: 'ML',
      text: 'Mali'
    },
    {
      id: 'MT',
      text: 'Malta'
    },
    {
      id: 'MH',
      text: 'Marshall Islands'
    },
    {
      id: 'MQ',
      text: 'Martinique'
    },
    {
      id: 'MR',
      text: 'Mauritania'
    },
    {
      id: 'MU',
      text: 'Mauritius'
    },
    {
      id: 'YT',
      text: 'Mayotte'
    },
    {
      id: 'MX',
      text: 'Mexico'
    },
    {
      id: 'FM',
      text: 'Micronesia}, Federated States Of'
    },
    {
      id: 'MD',
      text: 'Moldova'
    },
    {
      id: 'MC',
      text: 'Monaco'
    },
    {
      id: 'MN',
      text: 'Mongolia'
    },
    {
      id: 'ME',
      text: 'Montenegro'
    },
    {
      id: 'MS',
      text: 'Montserrat'
    },
    {
      id: 'MA',
      text: 'Morocco'
    },
    {
      id: 'MZ',
      text: 'Mozambique'
    },
    {
      id: 'MM',
      text: 'Myanmar'
    },
    {
      id: 'NA',
      text: 'Namibia'
    },
    {
      id: 'NR',
      text: 'Nauru'
    },
    {
      id: 'NP',
      text: 'Nepal'
    },
    {
      id: 'NL',
      text: 'Netherlands'
    },
    {
      id: 'AN',
      text: 'Netherlands Antilles'
    },
    {
      id: 'NC',
      text: 'New Caledonia'
    },
    {
      id: 'NZ',
      text: 'New Zealand'
    },
    {
      id: 'NI',
      text: 'Nicaragua'
    },
    {
      id: 'NE',
      text: 'Niger'
    },
    {
      id: 'NG',
      text: 'Nigeria'
    },
    {
      id: 'NU',
      text: 'Niue'
    },
    {
      id: 'NF',
      text: 'Norfolk Island'
    },
    {
      id: 'MP',
      text: 'Northern Mariana Islands'
    },
    {
      id: 'NO',
      text: 'Norway'
    },
    {
      id: 'OM',
      text: 'Oman'
    },
    {
      id: 'PK',
      text: 'Pakistan'
    },
    {
      id: 'PW',
      text: 'Palau'
    },
    {
      id: 'PS',
      text: 'Palestinian Territory}, Occupied'
    },
    {
      id: 'PA',
      text: 'Panama'
    },
    {
      id: 'PG',
      text: 'Papua New Guinea'
    },
    {
      id: 'PY',
      text: 'Paraguay'
    },
    {
      id: 'PE',
      text: 'Peru'
    },
    {
      id: 'PH',
      text: 'Philippines'
    },
    {
      id: 'PN',
      text: 'Pitcairn'
    },
    {
      id: 'PL',
      text: 'Poland'
    },
    {
      id: 'PT',
      text: 'Portugal'
    },
    {
      id: 'PR',
      text: 'Puerto Rico'
    },
    {
      id: 'QA',
      text: 'Qatar'
    },
    {
      id: 'RE',
      text: 'Reunion'
    },
    {
      id: 'RO',
      text: 'Romania'
    },
    {
      id: 'RU',
      text: 'Russian Federation'
    },
    {
      id: 'RW',
      text: 'Rwanda'
    },
    {
      id: 'BL',
      text: 'Saint Barthelemy'
    },
    {
      id: 'SH',
      text: 'Saint Helena'
    },
    {
      id: 'KN',
      text: 'Saint Kitts And Nevis'
    },
    {
      id: 'LC',
      text: 'Saint Lucia'
    },
    {
      id: 'MF',
      text: 'Saint Martin'
    },
    {
      id: 'PM',
      text: 'Saint Pierre And Miquelon'
    },
    {
      id: 'VC',
      text: 'Saint Vincent And Grenadines'
    },
    {
      id: 'WS',
      text: 'Samoa'
    },
    {
      id: 'SM',
      text: 'San Marino'
    },
    {
      id: 'ST',
      text: 'Sao Tome And Principe'
    },
    {
      id: 'SA',
      text: 'Saudi Arabia'
    },
    {
      id: 'SN',
      text: 'Senegal'
    },
    {
      id: 'RS',
      text: 'Serbia'
    },
    {
      id: 'SC',
      text: 'Seychelles'
    },
    {
      id: 'SL',
      text: 'Sierra Leone'
    },
    {
      id: 'SG',
      text: 'Singapore'
    },
    {
      id: 'SK',
      text: 'Slovakia'
    },
    {
      id: 'SI',
      text: 'Slovenia'
    },
    {
      id: 'SB',
      text: 'Solomon Islands'
    },
    {
      id: 'SO',
      text: 'Somalia'
    },
    {
      id: 'ZA',
      text: 'South Africa'
    },
    {
      id: 'GS',
      text: 'South Georgia And Sandwich Isl.'
    },
    {
      id: 'ES',
      text: 'Spain'
    },
    {
      id: 'LK',
      text: 'Sri Lanka'
    },
    {
      id: 'SD',
      text: 'Sudan'
    },
    {
      id: 'SR',
      text: 'Suriname'
    },
    {
      id: 'SJ',
      text: 'Svalbard And Jan Mayen'
    },
    {
      id: 'SZ',
      text: 'Swaziland'
    },
    {
      id: 'SE',
      text: 'Sweden'
    },
    {
      id: 'CH',
      text: 'Switzerland'
    },
    {
      id: 'SY',
      text: 'Syrian Arab Republic'
    },
    {
      id: 'TW',
      text: 'Taiwan'
    },
    {
      id: 'TJ',
      text: 'Tajikistan'
    },
    {
      id: 'TZ',
      text: 'Tanzania'
    },
    {
      id: 'TH',
      text: 'Thailand'
    },
    {
      id: 'TL',
      text: 'Timor-Leste'
    },
    {
      id: 'TG',
      text: 'Togo'
    },
    {
      id: 'TK',
      text: 'Tokelau'
    },
    {
      id: 'TO',
      text: 'Tonga'
    },
    {
      id: 'TT',
      text: 'Trinidad And Tobago'
    },
    {
      id: 'TN',
      text: 'Tunisia'
    },
    {
      id: 'TR',
      text: 'Turkey'
    },
    {
      id: 'TM',
      text: 'Turkmenistan'
    },
    {
      id: 'TC',
      text: 'Turks And Caicos Islands'
    },
    {
      id: 'TV',
      text: 'Tuvalu'
    },
    {
      id: 'UG',
      text: 'Uganda'
    },
    {
      id: 'UA',
      text: 'Ukraine'
    },
    {
      id: 'AE',
      text: 'United Arab Emirates'
    },
    {
      id: 'GB',
      text: 'United Kingdom'
    },
    {
      id: 'US',
      text: 'United States'
    },
    {
      id: 'UM',
      text: 'United States Outlying Islands'
    },
    {
      id: 'UY',
      text: 'Uruguay'
    },
    {
      id: 'UZ',
      text: 'Uzbekistan'
    },
    {
      id: 'VU',
      text: 'Vanuatu'
    },
    {
      id: 'VE',
      text: 'Venezuela'
    },
    {
      id: 'VN',
      text: 'Viet Nam'
    },
    {
      id: 'VG',
      text: 'Virgin Islands}, British'
    },
    {
      id: 'VI',
      text: 'Virgin Islands}, U.S.'
    },
    {
      id: 'WF',
      text: 'Wallis And Futuna'
    },
    {
      id: 'EH',
      text: 'Western Sahara'
    },
    {
      id: 'YE',
      text: 'Yemen'
    },
    {
      id: 'ZM',
      text: 'Zambia'
    },
    {
      id: 'ZW',
      text: 'Zimbabwe'
    }
  ];

  function formatCountry(country) {
    if (!country.id) {
      return country.text;
    }
    var $country = $(
      '<span class="flag-icon flag-icon-' + country.id.toLowerCase() + ' flag-icon-squared"></span>' +
      '<span class="flag-text">' + country.text + "</span>"
    );
    return $country;
  };


  $("[name='country']").select2({
    placeholder: "Select a country",
    templateResult: formatCountry,
    data: isoCountries
  });

});
.flag-text {
  margin-left: 10px;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.28.0/feather.min.js"></script>
<link href='https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css' rel='stylesheet' />

<select name="country">
</select>

Update value in span periodically

React/JS newbie here.

I’ve got a simple react app with the page fetching a number from ItemCounter API-Gateway. The code works right now and it’s able to fetch a value from the lambda/apig url.

import React, { useState, useEffect } from "react";

const Stats = () => {
  const [ItemsSupplied, setItemsSupplied] = useState(0);
  
  useEffect(async () => {
    signIn();
  }, []);

  async function signIn() {
    // Async Signin functions and calls, followed by getData() call
    getData();
  }

  async function getData() {
    let url = "https://re1szvliqk.execute-api.us-east-2.amazonaws.com/ItemCounter";
    const response = await fetch(url);
    const number = await response.json();
    setItemsSupplied(number);
  }
  return (
    <div>
        <span> Items Supplied: {ItemsSupplied} </span>
    </div>
  );
};

export default Stats;

I’m looking for a way to refresh/update this value periodically, let’s say every 5 seconds, but couldn’t figure it out.

Tried this: Change text every 3 seconds React useEffect, but couldn’t merge this with my page and ran into errors. Errors had something to do with the fact that signIn() and consequently getData() are already being called in a useEffect().

Hoping someone can help me out, Thanks!

Why inpage.js reloads content in React?

I have a login form in a dialog, when it success it should open an other dialog.

Login form triggers an axios call. Unfortunatelly at completing the axios call inpage.js triggers to reload the whole page, and so page loose the states, and next dialog will not be opened, why inpage.js initiates a reload of the page?

Also a ? is get appended to the url. Strange.

enter image description here