n.store.forEach is not a function while using the autoComplete.js

I am using WordPress ajax and autoComplete.js on my page.

I am getting below error in the console when I type anything in the input field

Uncaught (in promise) TypeError: n.store.forEach is not a function

I have the below code on my page and it’s working. I haven’t added the ajax code

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/dist/css/autoComplete.02.min.css">
<input name="getname" id="autoComplete" type="search" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off" autocapitalize="off">
<button type="submit" class="btn bg-darkBlue  border-0" name="searchdata" id="searchdata"><span>SEARCH</span></button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/dist/autoComplete.min.js"></script>


<script type="text/javascript">
$("#searchdata").click(function() {
  allList();
});

allList();

function allList() {
  var id = jQuery("#autoComplete").val();

  jQuery.ajax({
    url: "/wp-admin/admin-ajax.php",
    type: "post",
    datatype: "json",
    data: {
      action: "getname",
      keyword: id
    },
    success: function(data) {
      console.log(data);
      //var country_list1 =data; // ajax response ["Test One","Test Two","Test Three","Test Four"];

      var country_list2 = ["Test One", "Test Two", "Test Three", "Test Four"]; // static data here

      const autoCompleteJS = new autoComplete({
        data: {
          src: country_list2,
          cache: true,
        },
        resultItem: {
          highlight: true
        },
        events: {
          input: {
            selection: (event) => {
              const selection = event.detail.selection.value;
              autoCompleteJS.input.value = selection;
            }
          }
        }
      });


    }
  });
}

Now I have the issue with the below code in ajax success. There are two variables created.

  1. One is country_list1 and the ajax output is shown in the comment.
  2. Second is country_list2 and I have added the same output which I am getting from ajax.

console.log(data);

 var country_list1 =data; // ajax response ["Test One","Test Two","Test Three","Test Four"];

 var country_list2 = ["Test One", "Test Two", "Test Three", "Test Four"]; // static data here

If I run the page with country_list2 then it’s working and If I use country_list1 then I am getting the issue.

Any idea what is the issue here?

where to store currentUser

I have a simple login system and when a user logs in in I store the users data in sessionStorage as "currentUser". But I discovered that it can be edited. I use google firebase by the way.

Updating data on child components from a parent component in Vue 3

I’m migrating an application from KnockoutJS to VueJS. I’m having difficulty translating a template to a component. It’s similar to a tab structure where only 1 item can be active which was controlled using an observable called isActive that I’ve changed to a ref. When a user clicks on an item I want to loop through the child components in a list on the parent and set the isActive value to false before setting isActive on the clicked item to true.

I have been able to update the clicked item’s isActive value but I can’t see the isActive ref values on the parent. How can I get the child components and their data from the parent?

I have an example of what the code looks like here. DEMO

Javascript: How to count the length of multiple arrays dynamically

How to count length of all arrays in variant object dynamically? Is there any best to do achieve this dynamically?

const variants = {
  cars: ["ford", "honda", "bmw"],
  bikes: ["ducati", "yamaha"],
  colors: ["red", "blue", "yellow"]
}

Current implementation as in below:

const totalCars = variants.cars.length;
const totalBikes = variants.bikes.length;
const totalcolors = variants.colors.length;

console.log(totalCars + totalBikes + totalcolors)
// result: 8

CodeSanBox Example react-to-print in PC working but laptop not show data

I’m following the example codesanbox with react-to-print :https://codesandbox.io/s/kmmw7l39y7?file=/index.js
The PC working Okay but the laptop not work
I don’t now why my laptop is not working
Please help me check it
thanks very much
My PC and Driver
enter image description here
enter image description here
My laptop :
enter image description here
enter image description here

I just also excute with difference devices
but some of them also don’t show data

webpack and importing js files to scripts and bundling up

I’m pretty inexperienced with webpack. I’m actually using Cloudflare Wrangler, which I believe uses Webpack 4 under the hood. In any case I have an src/index.js file and a helpers/script.js file.

my index.js file works fine, builds and compiles etc etc.
When I copy the content of helpers/script.js into the top of the index.js file, again all is good and works.

When I import script.js with either of

import human from "../helpers/script"
const human = require("../helpers/script")

then I use a webpack.config.js file that looks like

module.exports = {
    target: 'webworker',
    context: __dirname,
    entry: './src/index.js',
    mode: 'production',
    module: {
      rules: [
        {
          test: /.index.js$/,
          use: { loader: 'worker-loader' }
        }
      ],
  },
  resolve: {
    extensions: ['.js'],
  },
};

I can’t seem, no matter what I do to get it to ‘like’ the imported script file.

I continually get:

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
...
Error: webpack returned an error. Try configuring `entry` in your webpack config relative to the current working directory, or setting `context = __dirname` in your webpack config.

Can anyone help me understand the requirements for being able to import a file to another js. Its amazing how hard this is to do :joy:

Save input to html list when page is reloaded

I am creating a to do list and I want users to be able to enter items and for them to be saved in local storage and be present when the page is reloaded.
I am using using unordered list tags and the html and js is shown below.

 <div id="myDIV" class="header">
   <h2 style="margin:5px">My To Do List</h2>
   <input type="text" id="myInput" placeholder="Enter items here...">
   <span onclick="newElement()" class="addBtn">Add</span>
 </div>
 <div id="toDoList">
   <ul id="myUL">
                     
   </ul>
 </div>


// Create a new list item when clicking on the "Add" button
function newElement() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("myInput").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === '') {
    alert("You must write something!");
  } else {
    document.getElementById("myUL").appendChild(li);
  }
  document.getElementById("myInput").value = "";

  var span = document.createElement("SPAN");
  var txt = document.createTextNode("u00D7");
  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }
}

How would i use local storage to be able to save and retrieve the inputs from the user? any tips would be appreciated

Change bottom shape of map pins with CSS

I am trying to achieve the below image with few divs, round background with similar to V-shape ( as shown in image below).
So Far I have tried this but could not achieve as in the image. I have added both before and after psuedo code for it. Any Help will be much Appreciated.

// Want to Achieve this:

enter image description here

enter image description here

//So far I have done this:

<template>
  <div>
    <div class="markar-container">
      <button>
        <h1>Pin 4</h1>
        <div class="outer-circle">
          <div class="inner-circle">
            <div class="text">AA</div>
          </div>
        </div>
      </button>
    </div>
  </div>
</template>

CSS:

<style scoped>
.outer-circle {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 40px;
  background-color: #fff;
  box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.3);
}

.inner-circle {
  width: 70px;
  height: 70px;
  border-radius: 35px;
  background: #3ac371;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.text {
  position: absolute;
  left: 18px;
  top: 21px;
  font-size: 24px;
  color: white;
}

.outer-circle::before {
  content: "";
  top: 75px;
  left: 24px;
  border-width: 16px;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
  /* box-shadow: 2px rgba(0, 0, 0, 0.3); */
  box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.91);
  position: absolute;
  transform: rotate(-90deg);
}

.dl-outer-circle::after {
  /* position: absolute;
  content: "";
  top: 73px;
  left: 30px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent #3ac371 transparent transparent;
  transform: rotate(-90deg); */
}
</style>


// and my pin looks like this:

enter image description here

How to after opening my site realize redirection in another sitе?

How do after opening my site realize redirection in another sitе, and at the same time load my javascript code to change the style of the site to which I redirect?

My site should redirect to this
http://elct.lnu.edu.ua/rozk/create_query.php?dayall=all&day%5B%5D=1&day%5B%5D=2&day%5B%5D=3&day%5B%5D=4&day%5B%5D=5&numall=all&num%5B%5D=0&num%5B%5D=1&num%5B%5D=2&num%5B%5D=3&num%5B%5D=4&num%5B%5D=5&stream=%B2&kurs=1&num_gr=1&objall=all&obj=&audall=all&aud=&teachall=all&teach=&search=Search

How do I download javascript code after redirecting to change the styles of the site I’m redirecting to?

Just copy the site I’m redirecting to is not the best way because it changes the content.

Any solid, successful implementations of Shopify cookie blocking?

My problem arises from Shopify’s customer privacy API. Shopify serves, what we can call, “Performance” cookies (first-party analytics used in Shopify itself) and “Targeting” cookies (third-party data). Since setTrackingConsent(consent, cb) from the API only takes a true or false value for consent, it prevents us from providing the user an option of only allowing performance cookies, only targeting cookies, etc. – which is my requirement in this case.

I was wondering if anyone has seen a solid implementation of this and who was able to do it. For some examples, our third-party partners have been unable to block these cookies: _y, _s, _shopify_s, _shopify_y, localization, etc. through the traditional script blocking methods. I am not exactly sure where these cookies come from.

How to re-render child component which update state of Parent Component in react?

I have following component hierarchy :

Component Parent –> Component Child

Component A :

export const Parent = () =>{
    const handleDeleteRow = (index) = >{
         data.splice(index,1)
         setData(data)
    }

    return (
         <Child handleDeleteRow={handleDeleteRow} data={data}/>
    )
}

const Child = ({handleDeleteRow,data}) =>{

    return (
         <div>
              <button onClick={()=>handleDeleteRow(index)}>Delete</button>
              {
                data.map((element) =>{
                    {`${data.firstname} ${data.lastname}`}
                })
              }
         </div>
    )
}


Currently, When I click on delete button, element gets deleted from data, but UI is not getting updated. data(parent component state) is array elements which can have multiple array elements.

Too many renderers when using useState for spinner

there. I need to make loading spinner with hook, while my component counts some data.
And when it’s done it spinner should stop.
But when i set useHook to true, i recieve infinite re-renderers.

const myCard = () => {
  [loading, setLoading] = useState()
  if (condition) {
    setLoading(true)
   
   //Some countiong


   // When it's over set loading
   setLoading(false)
  }

  return (
    <Card loading={loading}>
       ...Some card content
    </Card>
  )
}

Could anyone tell me what am i doing wrang here ?