Category: javascript

Error:
Application ‘navigation’ died in status LOADING_SOURCE_CODE: Unable to resolve bare specifier ‘react’ from https://localhost:3200/shared-lib/[email protected]

Import Map looks like:

    {
      "imports": {},
      "scopes": {
        "https://localhost:4000/ui/": {
          "react": "https://localhost:3200/shared-libs-ui/[email protected]",
          "react-dom": "https://localhost:3200/shared-libs-ui/[email protected]"
        }
      }
    }

I have a component that generates input in Form. I’m trying to pass a function to OnChange event, but always getting error

import {  FormGroup, FloatingLabel, FormControl } from "react-bootstrap";

const FormInput = (props) =>{ 

return(

    <FormGroup controlId={props.controlId} className="mb-3"> 
    <FloatingLabel label={props.label}>
        <FormControl type={props.type} name={props.controlId} placeholder={props.label} onChange={props.onChange} />
    </FloatingLabel>
</FormGroup>
)

}

export default FormInput;

And in my App I’m passing props to Component. Can’t figure out how to pass function to get value on input

import React, { Component } from "react";
import {
Container,
Row,
Form,
Button,

} from "react-bootstrap";
import FormInput from "./FormInput";
import {  FormGroup, FloatingLabel, FormControl } from "react-bootstrap";


class AddRecipe extends Component {
constructor() {
super();
this.state = {
  recipeImage: "",
  recipeName: "",
  recipeIngredients: "",
};


this.handleChange = this.handleChange.bind(this);

}
handleChange = (e) =>{
this.setState({
  [e.target.name]: e.target.value,
});

}

render() {
return (
  <Container>
    <Row>

    
      <Form inline="true" className="mt-5">
        <FormInput
          controlId="recipeImage"
          label="Image URL"
          type="url"
          handleChange={this.handleChange}
        />
        <FormInput
          controlId="recipeName"
          label="Recipe Name"
          type="text"
          handleChange={this.handleChange}
        />
        <FormInput
          controlId="recipeIngredients"
          label="Ingredients"
          type="textarea"
          handleChange={this.handleChange}
          
        />

        <Button>Add</Button>
      </Form>
    </Row>
  </Container>
);
}
}

export default AddRecipe;

How to pass handleChange function as props, so I can write value to my state?

This is the problem that i encountered:

I have an api that makes an Ajax.GET and in the success function, creates a button, a div, and a bunch of span with information in it, and a class for each one of them.
That same GET, shows all the info of the db correctly inside of a already existing div in the HTML document, but when i want to make a function which the result does a “console.log(“clicked”)”, it doesn’t recognize the data from the get.

If I make a button with a class, it does recognize it tho.

What am i doing wrong? Thanks in advance!

Me and my friends build this project on face detection and tracking using opencv,flask, python and mediapipe. We deployed our project on Heroku (https://face1-detection.herokuapp.com/) but found out that video = VideoCapture(0) does not work when hosted. I tried searching on Stackoverflow but they did not worked for me. I am just beginner in socket.io and other such stuff.I have no idea regarding how to solved this problem.
Please help me to resolve this issue. It helps a lot.
Thank you.

I am looking to replicate a website https://www.pays4ever.com
Is there a way to replicate it’s Code along with all the functions?

I’ve tired downloading the website and going through it but no luck.
Thanks in advance

I have two javascript libraries: interact.js and sortable.js, the first is used to resize html elements like div, the second is used to order html elements in screen like a list.

Libraries works fine in Chrome and Edge but in Firefox sortable.js is working and interact.js is not working, if i change to touch simulation mode in Firefox (like tablet touch screen) now interact.js is working and sotable.js not (reverse effect).

Firefox developer console shows nothing, i have no clue about a possible error or debug information.

I would like to know:

1. Is there any software tool or browser developer tools option to
   visualize any library conflict or firefox diference compared with
   chrome ? in order to detect and solve this issue.
2. Why Firefox manage methods not exactly like Chrome ?, what could be happen in this case ?
3. There is probably a click conflict since we use click to drag element and order in the list (sortable.js) and the same click in corner to resize elements (interact.js), how can i get debug information from this in order to solve in Firefox ???

Regards

sorry for my english first.
I have the following problem: i have some buttons named stripe_pro_new, stripe_pro_new2, stripe_pro_new3 etc.
And i have 2 functions that return 2 attributes. how can i return the attribute of the button that i press? (current function return the attributes for “stripe_pro_new

button example:

<button id="stripe_pro_new" name="pro_plan" data-name="<?php echo __( 'Month' );?>" data-price="<?php echo (float)$config->basic_pro_plan;?>" class="btn stripe valign-wrapper"><?php echo __( 'buy_now' );?> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M20,8H4V6H20M20,18H4V12H20M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z"></path></svg></button>

functions that return the attribute stripe_pro_new:

function getDescription()
   {
        var val = document.getElementById("stripe_pro_new").getAttribute("data-name");  
        return val;
   }
   function getPrice()
   {
        var val1 = document.getElementById("stripe_pro_new").getAttribute("data-price");  
        return val1;

   }

I host a static html file on netlify here is the url…

https://laughing-lewin-eb42f8.netlify.app/

How can I code these download function, because if I define the image url with https://cors-anywhere.herokuapp.com like… var url = 'https://cors-anywhere.herokuapp.com/https://c4.wallpaperflare.com/wallpaper/203/636/834/minimalism-landscape-digital-windows-11-hd-wallpaper-preview.jpg';
Then I’m successfully download the images but when I trying to open the image file it show that it appears that we don’t support this file format

And if I define the url without https://cors-anywhere.herokuapp.com like…var url = 'https://c4.wallpaperflare.com/wallpaper/203/636/834/minimalism-landscape-digital-windows-11-hd-wallpaper-preview.jpg';Then it’s throw CORS error Access Control Allow Origin error and onething that I did not access the server side to configure Access Control Allow Origin because I host this site
on platform like github page, netlify or google blogger so how can I do that….

Can any one please give any idea…….

I’m trying to add a child node using node-html-parser

my html file looks like this:

...

 <tbody>
    <tr></tr>
   ...
 </tbody>
    

and node.js app:

const parse = require('node-html-parser').parse;

...

  const doc = parse(fs.readFileSync('./myfile.html','utf8'));
  doc.querySelector("tbody").appendChild("<tr></tr>");

but it’s giving an error:

Cannot create property 'parentNode' on string '<tr></tr>'

I have a word file, which I need to read, but using doc.getFullText() newlines are not read.

How can I do?

<script src="https://cdnjs.cloudflare.com/ajax/libs/docxtemplater/3.8.0/docxtemplater.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.6.1/jszip.js"></script>

const reader = new FileReader();
reader.onload = async (e) => {
 const text = e.target.result;
 const zip = new JSZip(text);
 const doc = new window.docxtemplater().loadZip(zip).setOptions({ linebreaks:true });
 const t = doc.getFullText();
 console.log(t)
};
reader.readAsBinaryString(files[0]);

if I have in one section 3 sliders on top of each other with position absolute and each slider has different height how can I prevent the next section from going inside the one slider who has longer content?

const next = document.querySelector('button')

let wr = document.querySelectorAll('.wrapper')


let count = 2

next.addEventListener('click' ,()=>{
    document.querySelector('.wrapper.show').classList.remove('show')
    document.querySelector(`.wrapper-${count}`).classList.add('show')
    count++
    if(count>3){
        count =1
    }
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper-container {
  position: relative;
  height: 150px;
}

.wrapper {
  position: absolute;
  opacity: 0;
}

.show {
  opacity: 1;
}

<!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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

  <section>
  
      <button>next</button>
    
    <div class="wrapper-container">
      <div class="wrapper wrapper-1 show">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
        </p>
      </div>

      <div class="wrapper wrapper-2">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
        </p>
      </div>
      <div class="wrapper wrapper-3">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque.
        </p>
      </div>
    </div>

  </section>


  <section>

    <h2>title one </h2>

  </section>
  <script src="./script.js"></script>
</body>
</html>

and if I make wrapper-container with more height it would be more space between one slider and next section

I have a function that creates a Dropdown list using kendo react from a list ‘lista’. Each element of the list is a dictionary with a key ‘Region’ and a value ‘Tile’.

function Menu (Auser){
let lista = []
// Here I have a series of loops that read lista and tiles using a command similar to lista.push({Region:users.userList[i].locations[j].region, Tile:users.userList[i].locations[j].tile});

const [state, setState] = useState({
    value: lista[0],
});

const handleChange = (event) => {
setState({
    value: event.target.value,
}); 
}
  
return (
    <form>
    <p>Avaliable regions</p>
    <div>
    Selected Value: {JSON.stringify(state.value.Tile)} // Here I print my variable of interest
    </div>
    <DropDownList className="dropdown-content" data={lista} 
    textField="Region"
    dataItemKey="Tile"
    value={state.value}
    onChange={handleChange}
    />
</form>
);
}
export default Menu; 

In order to create, and update, another component in my App.js file, I need to pass the variable state.value.Tile which is the ‘Tile’ of the element selected in the Dropdown list, in the Menu function, to another component in App.js. The problem is that I don’t know how to call or extract this variable from the Menu function.

import Menu from './components/menu';
import SecondElement from './components/secondelement';
class App extends Component { // This is an example of my structure

  render (){
    return (
          <header className="App-header">
            <h3>
              Hello world!
            </h3>
            <Menu Auser={user.attributes.name}/>
            <SecondElement SelectedTile={state.value.Tile}/> // I should be able to put the variable state.value.Tile, from the Menu function here.
      )}
      </Authenticator>  
    );
  }
}

export default App;

I am basically new to React so I’ve been having problems and I don’t understand several things, any help you can give me will be appreciated.

I have a dependent dropdown list which is created from an array. The menus are fine but I would like to add an alteration.

If there are no options available on the second menu, rather than be blank, I would like to say ‘no options available’

Here’s where I filter the array data:

function mediaMenu(arrayOfArrays){
    arrayOfValues = arrayOfArrays.filter(function(r){return true;});
    // console.log(arrayOfValues);
    var servicesOffered = document.getElementById("services").value;
    var mediaType = document.getElementById("media-type");
    var filteredArrayOfValues = arrayOfValues.filter(r => r[5].includes(servicesOffered));
    showFilteredDropdownMenuOptions(mediaType, filteredArrayOfValues, 0);
  }

This is the line that filters the info.

var filteredArrayOfValues = arrayOfValues.filter(r => r[5].includes(servicesOffered));

If make a selection on the first menu that does includes certain text i.e. Banner, I get this response.

If I make a section and there is no match i.e Business Stationery, I get this:

I can’t figure out how to do my IF statement.

Here’s my attempt:

function mediaMenu(arrayOfArrays){
    arrayOfValues = arrayOfArrays.filter(function(r){return true;});
    var servicesOffered = document.getElementById("services").value;
    var mediaType = document.getElementById("media-type");
    var filteredArrayOfValues = arrayOfValues.filter(r => r[5].includes(servicesOffered));
    console.log(filteredArrayOfValues);
    if(filteredArrayOfValues === []) {
      alert('No match');
      noMatchDropdownMenuOptions(mediaType, filteredArrayOfValues, 0);
    } else {
      alert('match');
      showFilteredDropdownMenuOptions(mediaType, filteredArrayOfValues, 0);
    }
  }

function noMatchDropdownMenuOptions(el, arrayOfArrays, index) {
    el.innerHTML = '';
    var option = document.createElement("option");
    option.value = "";
    option.textContent = 'No Match';
    el.appendChild(option);
  }

function showFilteredDropdownMenuOptions(el, arrayOfArrays, index) {
    var currentlyAdded = []
    el.innerHTML = '';
    var option = document.createElement("option");
    option.value = "";
    // option.attr('disabled hidden');
    option.textContent = 'Please Select';
    el.appendChild(option);
    arrayOfArrays.forEach(function(r){
      if(currentlyAdded.indexOf(r[index]) ===-1) {
        var option = document.createElement("option");
        option.textContent = r[index];
        el.appendChild(option);
        currentlyAdded.push(r[index]);
      }
    });
  }

I get ‘match’ no matter what I select.

I also need to create an attribute ‘disabled hidden’ to the No Match option so it can’t be selected. I’ve tried this:

option.attr('disabled hidden');

The script fails with the error option.attr is not a function, I thought you could use attr?

I have one problem. I am making JavaScript app which basically works similar to PayPal. However I faced a problem. My files are divided like in MVC architecture. I have login view, which check user credentials and then it runs a transactions view (view for transactions) which creates new html markup and display it with “insertAdjacentHTML” and it works good. Login view just gets class hidden. However, when I delete account, it should remove that account, remove all html with —.remove() and display login view again with just removing hidden class. That works good as well. Now when I log with another account, it makes exact same two html for transactions. If I repeat this process it will make 3,4,5 html. I am looking half day at this and can’t find problem.
I would be grateful if someone message me or even want more details.
Thank you,
Regardless

I have been having a little issue combining array of Objects based on ids. I have three data sets (removed data to reduce length)

Set One

[
   {
      "id":1,
      "name":"Some Name",
      "description":"Some description",
      "currency":"USD",
      "price":"350",
      "created_at":"2021-12-08T17:53:12.000Z",
   },
   {
      "id":2,
      "name":"Some Name",
      "description":"Some description",
      "currency":"USD",
      "price":"12",
      "created_at":"2021-12-08T17:53:12.000Z",
   },
]

Set Two

[
   {
      "id":1,
      "resultOneId":1,
      "startDate":"2022-02-01T16:00:00.000Z",
      "endDate":"2022-02-08T18:00:00.000Z",
      "created_at":"2021-12-08T17:53:12.000Z",
   },
   {
      "id":2,
      "resultOneId":1,
      "startDate":"2021-02-08T09:00:00.000Z",
      "endDate":"2021-02-17T18:00:00.000Z",
      "created_at":"2021-12-08T17:53:12.000Z",
   },
    {
      "id":3,
      "resultOneId":2,
      "startDate":"2021-02-08T09:00:00.000Z",
      "endDate":"2021-02-17T18:00:00.000Z",
      "created_at":"2021-12-08T17:53:12.000Z",
   },
]

Set Three

[
    {
        "id": 1,
        "resultTwoId": 1,
        "Job": "Technician",
    },
    {
        "id": 2,
        "resultTwoId": 1,
        "Job": "Electrician",
    },
    {
        "id": 3,
        "resultTwoId": 2,
        "Job": "Painter",
    },
    {
        "id": 4,
        "resultTwoId": 3,
        "Job": "Painter",
    },
    ...
]

Essentially, Set Two is a child of Set One, and Set Three is a chile of Set Two. The output I am aiming for is something like this

[
   {
      "id":1,
      "name":"Some Name",
      "description":"Some description",
      "currency":"USD",
      "price":"350",
      "created_at":"2021-12-08T17:53:12.000Z",
      "resultTwos": [
          {
              "id":1,
              "resultOneId":1,
              "startDate":"2022-02-01T16:00:00.000Z",
              "endDate":"2022-02-08T18:00:00.000Z",
              "created_at":"2021-12-08T17:53:12.000Z",
              "resultThress": [
                {
                    "id": 1,
                    "resultTwoId": 1,
                    "Job": "Technician",
                },
                {
                    "id": 2,
                    "resultTwoId": 1,
                    "Job": "Electrician",
                },
              ]
           },
           {
              "id":2,
              "resultOneId":1,
              "startDate":"2021-02-08T09:00:00.000Z",
              "endDate":"2021-02-17T18:00:00.000Z",
              "created_at":"2021-12-08T17:53:12.000Z",
               "resultThress": [
                {
                    "id": 3,
                    "resultTwoId": 2,
                    "Job": "Painter",
                },
              ]
           },
      ]
   },
   {
      "id":2,
      "name":"Some Name",
      "description":"Some description",
      "currency":"USD",
      "price":"12",
      "created_at":"2021-12-08T17:53:12.000Z",
      "resultTwos": [
            {
              "id":3,
              "resultOneId":2,
              "startDate":"2021-02-08T09:00:00.000Z",
              "endDate":"2021-02-17T18:00:00.000Z",
              "duration":"5 hours",
              "created_at":"2021-12-08T17:53:12.000Z",
               "resultThress": [
                {
                    "id": 3,
                    "resultTwoId": 2,
                    "Job": "Painter",
                },
           },
      ]
   },
]

So I have the first part sorted, this puts the resultsTwos within the first results.

resultOnes.map( one => {return { ...one, resultTwos: resultTwos.filter(two => two.resultOneId === one.id)}})

I am struggling however with getting the resultThress to be part of the resultTwos, like in my example output above.

How could this be achieved? Been trying to do a nested map but cant seem to get it working.

Any advice appreciated

Thanks