Category: javascript

I’m having trouble figuring out what this error means but i’m sure it can be resolved with another “easy hack”….. As everything lately to do with web tech stacks seems to be fixed with another little “easy hack”…….

Getting this error for some dumb reason i’m sure.

Uncaught ReferenceError: exports is not defined

at app.js:2

(anonymous) @ app.js:2

all i did was export a function to test typescript out.

core/CoreTest.ts

export function testFunction () : void {

console.log("This is a core test");

}

and then i called it here…

app.ts

import { testFunction } from './core/CoreTest.js';

testFunction();

I have one component in which we have file upload facility. I need to add one additioonal input filed so when user clicks on the upload button one input filed and one file should be sent to server.
since its class component I am not able to use hook. its legacy application.

import axios from 'axios';

import React,{Component} from 'react';

class App extends Component {

    state = {

    // Initially, no file is selected
    selectedFile: null
    };
    
    // On file select (from the pop up)
    onFileChange = event => {
    
    // Update the state
    this.setState({ selectedFile: event.target.files[0] });
    
    };
    
    // On file upload (click the upload button)
    onFileUpload = () => {
    
    // Create an object of formData
    const formData = new FormData();
    
    // Update the formData object
    formData.append(
        "myFile",
        this.state.selectedFile,
        this.state.selectedFile.name
    );
    
    // Details of the uploaded file
    console.log(this.state.selectedFile);
    
    // Request made to the backend api
    // Send formData object
    axios.post("api/uploadfile", formData);
    };
    
    // File content to be displayed after
    // file upload is complete
    fileData = () => {
    
    if (this.state.selectedFile) {
        
        return (
        <div>
            <h2>File Details:</h2>
            
<p>File Name: {this.state.selectedFile.name}</p>

            
<p>File Type: {this.state.selectedFile.type}</p>

            
<p>
            Last Modified:{" "}
            {this.state.selectedFile.lastModifiedDate.toDateString()}
            </p>

        </div>
        );
    } else {
        return (
        <div>
            <br />
            <h4>Choose before Pressing the Upload button</h4>
        </div>
        );
    }
    };
    
    render() {
    
    return (
        <div>
            <h3>
            File Upload using React!
            </h3>
            <div>
                <input type="file" onChange={this.onFileChange} />
                <button onClick={this.onFileUpload}>
                Upload!
                </button>
            </div>
        {this.fileData()}
        </div>
    );
    }
}

export default App;

I tried a lot but it is not working properly. if you need I can put the modified code. since its quite messy I put only working code without input field.
Could you please help me to add one input field, please.

It’s easy to make a simple progress bar like this one. It looks smooth enough: https://jsfiddle.net/H4SCr/

—
Also shown below:

var d = document.getElementById('child');

function run(div,i){
i += 1;
div.style.width = i+'px';
 if(i > 200) i = 200;
div._timer = setTimeout(function () {
run(div,i)
 },100);

}

run (d,0);

#bar{
    width:200px;
    height:20px;
    background-color:black;
    position:relative;
}
#child{
    position:abosoute;
    top:0px;
    left:0px;
    background-color:red;
    height:20px;
}

<div id="bar">
    
    <div id="child"></div>
    
</div>

However, in the example, it’s only smooth because I’m incrementing by one. If I chose to increment by 50 or 30, it is really choppy and doesn’t look smooth.
I’m recieving the progress amount from a third party API, so this is how the progress will look as I recieve the data:
5%, 23%, 72%, 77%, and 100%

Instead of incrementing the progress bar by 1, I have 5 different progress statuses. How do I make large increments and still make it look smooth?

TXT records can enter the keywords below.

a-z  
A-Z  
0-9  
Space  
- (hyphen)  
! " # $ % & ' ( ) * + , - / : ; < = > ? @ [  ] ^ _ ` { | } ~ .  

What is the regular expression that allows you to enter only this?

The bottom is what I made.

const txt_rex = /[#&\+-%@=/\:;,.'"^`~_|!/?*$#<>()[]{}]/i;

i use leaflet, geoserver and js. And also using tomcat

I have more than 400 users and each has its own role, adding more than 400 users to geoserver and configuring them individually is too long.

The user is currently logged in like this:

The question is, if there is any way to get the data of an authorized user and apply roles and filters to it?

I will also say that the users are in the postgres database

I’m using the bootstrap dropdown select to get a list of data to my form. The code is as below

jQuery(async function () {
  await LocationService.getOnlineLocations();
  let allLocations = LocationService.getAllLocationsAsArray();
  console.log(allLocations);
  $("#bookingFromInput").ready(function () {
    let text = "";
    allLocations.forEach((element) => {
      text += `<option value="${element.name}">${element.name}</option>`;
    });
    console.log(text);
    $("#bookingFromInput").html(text);
  });
});

<select class="form-select" id="bookingFromInput" name="from" aria-label="Default select example" autofocus>
  <option></option>
</select>

I’m trying to figure out a way to add the placeholder=”From” but the placeholder attribute doesn’t seem to work. Is there a fix for this?

The currently implemented code shows the modal when clicking the button. However, I would like the modal to be displayed when moving to the main page after logging in. (using Django)

JavaScript’s window.open is not what I want because it prints a new window. I want the modal window to be displayed automatically when the main page is reached upon successful login. Is there a way?

[index.html]

<div class="modal fade" id="quality" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">Quality</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body row">
      <div class="col-sm-12">
        {% include 'pages/quality_POPUP.html' %}
      </div>
    </div>
  </div>
</div>

<button type="button" class="btn pull-right" data-toggle="modal" data-target="#quality">POP UP</button>

I just want to start out by saying I’m a javascript newbie – this is for an addon to a .NET project I’m working on. Also I’ve read through a dozen related questions – most of them relate to the poster trying to access the fetch response outside of the asynchronous handler, which I’m not.

This is pretty barebones – I’m asking the javascript to request a string from the server given some variables (here order and hidelots). I’ve confirmed server-side that it’s sending the correct requested data. Since I’m new to js, I’m trying to confirm in the javascript that it’s receiving the data. I’m using this line:

let promise =  fetch(window.location.origin + '/OrderData/?order=' + params.get(""order"") + '&hidelots=' + (this.checked ? 1 : 0))
.then(response => window.alert('Returning: ' + response.text()));

The goal is to just give an alert with the text returned a the time it’s returned. The popup says “Returning: [object Promise]”. It does wait until the server responds – I’ve delayed the server to test that. But I can’t figure out how to access the string.

For the sake of completeness – response.status returns “200”, response.statusText returns “OK” and response.url returns “http://192.168.1.180:1932/OrderData/?order=385&hidelots=1”. The expected text() is the innerhtml of a table body – “lorem ipsum”

How do I access the string?

I want to make a variable that you can use to return a new Script object for my application’s scripting system but I want it to take in arguments to setup and define the script object. This is what I am using currently in Java

context.getBindings("js").putMember("createScript", this);

this returns the script object, I want to make it to where in JavaScript you need to do it like this

var script = createScript({
    name: "Example Script",
    description: "Example description",
    author: "GMania"
});

How do I make it take in arguments?

let url= 'https://newsapi.org/v2/top-headlines?country=in&category=business&apiKey=68e660a9b23745329c93e83f10ee38b2&page=${this.state.page+1}'

Adding $ is not helping me to add props within a className.

Please help me

class A {
  data1 = 1;
  constructor(){
    this.data2 = 2;
  }
  test() { console.log(this) }
}
class B extends A {
  constructor() {
    super();
  }
  funcA() { this.test() }
  funcB() { super.test() }
}
let foo = new B()
foo.funcA();
foo.funcB();

what’s the difference between funcA() and funcB() while calling, or they are exactly the same thing?
BTW, what’s the difference between data1 and data2 declared in and out the constructor, which is preferred

I have the following switch statement. All the cases work including the ‘custom’ case. the only challenge is that I am unable to return the radval from the ‘custom’ case. It shows the right value if I do it in the console log. I have tried several options mentioned in the comment below but none works.

    document.body.addEventListener('change', function (e) {
            let target = e.target;
            let responsible;
            let radval = 0.5;;
            let yourshare;
            switch (target.id) {
            case '100':
                    radval = 100/100;
                    break;
            case '50':
                    radval = 50/100;
                    break;
            case '25':
                    radval = 25/100;
                    break;
            case '75':
                    radval = 55/100;
                    break;

            case '33':
                    radval = 33/100;
                    break;
            case '0':
                    radval = 0;
                    break;
            case 'custom': 
                    document.getElementById('customsplit').onchange = function () {
                            let custval = document.getElementById("customsplit");
                            radval = custval.value / 100;
                            return(radval);  
// Also tried return radval and tried a function outside the switch statement that was called here.  But no success.
                    }
                   break;

    }

I am using the TaylanTatli
/Halve template and I followed the instructions. But when I compile the code in google it generates these errors:

Google Chrome:

Error with Permissions-Policy header: Unrecognized feature: ‘interest-cohort’.
onavarrete04.github.io/:1 GET https://onavarrete04.github.io/ 404
onavarrete04.github.io/:1 Refused to load the image ‘https://www.gstatic.com/images/branding/product/2x/translate_24dp.png’ because it violates the following Content Security Policy directive: “img-src data:”.
onavarrete04.github.io/:1 Refused to load the image ‘https://www.gstatic.com/images/branding/product/2x/translate_24dp.png’ because it violates the following Content Security Policy directive: “img-src data:”.

Firefox:

Content Security Policy: The options for this page have blocked the loading of a resource at https://onavarrete04.github.io/favicon.ico (img-src).

url template = https://taylantatli.github.io/Halve/ -> works correctly
url github = https://github.com/TaylanTatli/Halve

my url = https://onavarrete04.github.io/ -> does not work
my github = https://github.com/onavarrete04/onavarrete.github.io

My interest was to use this template to show my little progress while I continue learning python, I don’t know much about the code of this helve template, so I don’t know what to modify. If someone can help me, or on the contrary can share me a template while for my use, I would be grateful.

I am learning so far, and I only know a little bit of python. Thanks

I’m trying to open some .js files and I get this error message:
enter image description here

I’m trying to sort through an array for artists that lived through the twentieth century. The numbers in the year property of the array are strings rather than numbers:
"years" : "1471 - 1528"
So I’m trying to split all the years, convert them to numbers, then compare the numbers that way. But when I log to console, I get an error that says “array[i].split is not a function”. I’ve tried array.years.split(" ") and gotten an error as well. I’m just learning JS so bear with me if it’s an obvious mistake, but can anyone tell me what I’m doing wrong?

function get20s (array) {
 const newArray = [];
  for (let i = 0; i < array.length; i++) {
   const splitYears = array[i].split(" ");
   splitYears.splice("-")
   Math.floor(splitYears);
    if (splitYears[0] > 1900 && splitYears[1] < 2000) {
      return newArray.push(array[i].name);
    }
  }
  return newArray;
}