Category: javascript

Category Added in a WPeMatico Campaign

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

Creating an input for a dice roller in React (javascript)

I am making a dice roller in javascript with React. Basically, I have an array with dice values and a loop that runs through them to render dice for the user to roll. I’m now trying to create an input so the user can make a new die with any number of sides, but I’m having trouble connecting that input to the rest of my code. Please let me know if you have any ideas about how I could do this with javascript! Thanks!

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function RenderButtons(props){
  return(
      <button className="center" data-index={props.index} id="roller" onClick={props.onClick}>
        {props.value.current} /{props.value.max}
        </button>
  )
}

class Roller extends React.Component {
  constructor(props) {
    super(props);
    this.roll = this.roll.bind(this)
    this.state = {
      diceValues: [
        {max:100, current:100},
      ],
    }
  }

  roll(evt) {
    let min = 1;
    let max = this.state.diceValues[evt.target.dataset.index].max
    let result = Math.floor(Math.random() * (max - min) + min);

    const diceValues = this.state.diceValues.slice();
    diceValues[evt.target.dataset.index].current = result + 1;
    this.setState({diceValues: diceValues});
  }

  makeDie(i) {
    return(
      <RenderButtons
      key = {i}
      onClick = {this.roll}
      value = {this.state.diceValues[i]}
      index = {i}
      />
    )
  }
  render() {
    let buttonsToMake = [];
    for (let i = 0; i < 1; i++){
      console.log("rendering buttons")
      buttonsToMake.push(this.makeDie(i))
      return (
        <div>
          <input
          type="number"
          placeholder="Custom Dice"
          ></input>
          <button
          // id="input"
          // value={this.state.value}
          // onChange={console.log(this.state.value)}
          // {this.handleChange}
          >
          Generate Die
          </button>
          {buttonsToMake}
        </div>
        )
    }
  }
}

ReactDOM.render(
  <Roller />,
  document.getElementById('root')
);

e.preventDefault and onSubmit does not prevent page from reloading on react [duplicate]

i have a form that has only a select option, i am using mantine component there is no button on the form, so when i select an option and hit enter it submits. The problem is that the entire page refreshes. I have added e.preventDefault and even e.stopPropagation and the page still refreshes when i press enter. To get the form to even submit i had to use ref and onKeyUp to call the submit function. How do i prevent the page from refreshing and still submit.

Submit function

  const selectForm = useRef(null);
  function handleSubmit(e) {
    
    e.preventDefault();
    e.stopPropagation();
    if (e.keyCode === 13) {
      e.preventDefault();
      e.stopPropagation();
    selectForm.current.submit();
    }
    
    setJoblist("");
    console.log(joblist);
    setLoading(true);
    const uu = {
      jobs: joblist,
    };
    console.log(uu);
    console.log(api.jobs);
  }

My form

 <form ref={selectForm} onKeyUp={handleSubmit} tabIndex={0}>
        <Select
          label="Your favorite framework/library"
          placeholder="Pick one"
          searchable
          clearable
          nothingFound="No options"
          value={joblist}
          onChange={setJoblist}
          data={[
            { value: "react", label: "React" },
            { value: "ng", label: "Angular" },
            { value: "svelte", label: "Svelte" },
            { value: "vue", label: "Vue" },
          ]}
          style={{
            width: "608px",
            marginLeft: "294px",
            marginTop: "-100px",
          }}
        />
  </form>

What does [, mean in javascript method signature documentation?

I’m reading a blog article about how to use the forEach() method in javascript, and what it gives to explain which parameters this method takes is this:

array.forEach(callback(currentVal [, index [, array]])[, thisVal])

what’s the correct way to read these “structures”:

currentVal [, index [, array]] and [, thisVal]

Why does it look like currentVal, index, and array are in a nested structure?

Why not just use , instead of [,. I’m sure there’s a good reason, but I just don’t know what it is. I see this format a bunch in documentation all the time, but have never picked up why it’s written like this.

React resizing img not working (Material UI useStyles)

I am trying to resize an image in React, but for some reason changing the height and width of the tag via useStyles does not make the image smaller, but simply shifts it around in the page.

Code:

import { makeStyles } from "@material-ui/core/styles";
import { SvgIcon, Typography } from "@mui/material";
import { Icon } from "@mui/material";

const useStyles = makeStyles((theme) => ({
  pageContainer: {
    display: "block",
    marginTop: 120,
    justifyContent: "center",
    alignItems: "center",
  },
  logo: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    width: "50%",
    height: "50%",
  },
  info: {
    display: "block",
    justifyContent: "center",
    alignItems: "center",
  },
  iconContainer: {
    display: "flex",
    height: "20vh",
    width: "auto",
  },
}));

const teamNames = [
  "Name1",
  "Name2",
  "Name3",
  "Name4",
];

export default function () {
  const classes = useStyles();
  return (
    <div className={classes.pageContainer}>
      <div className={classes.logo}>
        <img src={process.env.PUBLIC_URL + "/myLogo.png"}></img>
      </div>
      <div className={classes.info}>
        <Typography variant="h3" display="block" align="center">
          About the Team
        </Typography>
        {teamNames.map((personName) => (
          <Typography variant="h5" display="block" align="center">
            {personName}
          </Typography>
        ))}
      </div>
    </div>
  );
}

I’m not quite sure what is the issue, all I really want to do is to make the image smaller proportionally and put it at the center of the page.