Category: javascript

How do I enable Autocomplete as well as costum inputs in the same input-field in Angular?
The user should have the option to input ” * ” for getting the autocomplete “All items” and he should be able to input ” * abc * ” and search for this specific value. However after inputing “*” the autocomplete gets triggered and the user cant go on typing.

a_enum contains a value “*” which means search for all items in a_enum.

Removing [value] in the visible input-field breaks the autocomplete. Items are not transferred to the visible input-field.

<input [id]="a" [value]="a_enum">
<input [id]="a" [value]="a_enum" hidden="hidden">
<div *ngFor="item of items">{{item}}<div>

Hi i am learning react and i got stuck on a problem. i have started working on routing but its not working at all. Code:

 import {Route} from 'react-router-dom'
import AllMeetupsPage from './pages/AllMeetups';
import NewMeetupsPage from './pages/NewMeetups';
import FavoritesPage from './pages/Favorites';


function App() {
  return (
      <div>
        <Route path = '/'>
          <AllMeetupsPage />
        </Route>
        <Route path = '/new-meetup'>
          <NewMeetupsPage />
        </Route>
        <Route path = '/favorites'>
          <FavoritesPage />
        </Route>
      </div>
  );
}

export default App;

i have a blank screen even though the pages should load. Each page when open should only print one line just to see that i can see routing working however all i see is a blank space meaning its not working correctly.You can view the full code here: https://github.com/Kroplewski-M/Routing
thank you in advance

I want to have similar feature like WordPress, where I can add meta tags or insert external script from front-end and it will injected to actual website.

Like I non programmer admin can add any third party script from admin panel and it will be inject to SSR nuxt application.

Please help it’s possible to to, I really appreciate

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;

    }