Category: javascript

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?

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 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?

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;
}

I am having a problem in vscode where I can not see the defined jsdocs in a js class when importing that class in another js file. Not when hovering or using the vscode shortcuts.

./src/person/index.js

/**
* This is a person class.
*/
export default class Person{

    /**
    * Person constructor
    * @param {string} Name of the person
    * @param {number} Age of the person
    */
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
}

./src/index.js

import { Person } from './src/person/index.js'

const jim = new Person(jim, 88) // jsdoc is not recognized

The problem I am running into is either my lack of understanding in how webpack works or something wrong with my setup.

I have as simple project where I am using npm module webdriver in src/contentScript.js as below(it is just one line for now):

const driver = require("WebDriver");

and this is my package.json says:

{
  "name": "foo-chrome-extension",
  "private": true,
  "scripts": {
    "watch": "webpack --mode=development --watch --config config/webpack.config.js",
    "build": "webpack --mode=production --config config/webpack.config.js"
  },
  "devDependencies": {
    "copy-webpack-plugin": "^6.4.1",
    "css-loader": "^4.3.0",
    "file-loader": "^6.2.0",
    "mini-css-extract-plugin": "^0.10.1",
    "size-plugin": "^2.0.2",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-merge": "^5.8.0"
  },
  "dependencies": {
    "webdriver": "^7.16.13"
  }
}

and when I run the command npm run build it shows below errors (there are more but I trimmed to keep the post short);

ERROR in ./node_modules/cacheable-lookup/source/index.js Module not
found: Error: Can’t resolve ‘dns’ in
‘/Users/john/workspace/chrome-extension-cli/foo-chrome-extension/node_modules/cacheable-lookup/source’

ERROR in
./node_modules/@wdio/config/build/lib/FileSystemPathService.js Module
not found: Error: Can’t resolve ‘fs’ in
‘/Users/john/workspace/chrome-extension-cli/foo-chrome-extension/node_modules/@wdio/config/build/lib’

ERROR in ./node_modules/@wdio/logger/build/node.js Module not found:
Error: Can’t resolve ‘fs’ in
‘/Users/john/workspace/chrome-extension-cli/foo-chrome-extension/node_modules/@wdio/logger/build’

If my understanding of how webpack works is correct, it should install these dependencies required by webdriver module but it is not and showing these errors. Why is that? Anything wrong with my webpack setup?

This is my config/webpack.config.js says:

'use strict';

const { merge } = require('webpack-merge');

const common = require('./webpack.common.js');
const PATHS = require('./paths');

// Merge webpack configuration files
const config = (env, argv) => merge(common, {
  entry: {
    popup: PATHS.src + '/popup.js',
    contentScript: PATHS.src + '/contentScript.js',
    background: PATHS.src + '/background.js',
  },
  devtool: argv.mode === 'production' ? false : 'source-map'
});

module.exports = config;

config/webpack.common.js: It is too big, so created pastebin

node version: v16.13.1

In javascript, when opening a file via a button returns a Blob object (e.g. blob1).
I can then get the actual data of the blob via blob1ArrayBuffer = blob1.arrayBuffer();

When the Blob object (e.g. blob1) is created, does it load all the bytes into memory?
Or does it just returns the address so that later the actual bytes can be read via blob1.arrayBuffer() ?

I’m working on a full-stack project where for front-end I use next.js application while for api I use node / express server. frontend and backend operate on different ports. My application is configured as in the picture:

I’m new to next js and this would be of great benefit to me

I am trying to call a function from an external file using child_process, but, it is returning to me an unexpected message and doesn’t even run the target function.

index.ts

import { fork } from 'child_process';

var cards = fork(`${__dirname}/workers/shuffleCards.js`, []);
cards.on("message", msg => { console.log(`Received message`, msg) });
cards.on("error", msg => { console.log(`Received error`, msg) });
cards.send("test");

shuffleCards.js

import cardShuffler from "../components/cardShuffler";

function shuffleCards() {
    const pid = process.pid;
    console.log(`Received process: ${pid}`);

    var action_cards = cardShuffler.shuffleActions();
    var property_cards = cardShuffler.shuffleProperties();
    var money_cards = cardShuffler.shuffleMoney();
    var rent_cards = cardShuffler.shuffleRent();
    var wild_cards = cardShuffler.shuffleWilds();

    var parsed_cards = [];
    [action_cards, property_cards, money_cards, rent_cards, wild_cards].map(card => {
        card.forEach(sub_card => {
            parsed_cards.push(sub_card)
        });
    });

    console.log(parsed_cards)

    return parsed_cards;
}

process.once("message", shuffleCards);

Message on console.log

Received message {
  compile: 'C:\Users\USER\source\repos\Will\src\components\cardShuffler.ts',
  compiledPath: 'C:\Users\USER\AppData\Local\Temp\.ts-nodeeyTUFf\compiled\src_components_cardShuffler_ts_7ae359b0420e1268f12c87be4bf028cb159f9cb115715422295351cb6494e318.js'
}

So it is returning me this compile and compiledPath message and it does not execute the shuffleCards() function

As of right now, I’m working on a 2D web game. I want to make it multiplayer so I can play it with my friends. So far I have only imported socket.io and have gotten stuck figuring out where to start. Could someone please just point me in the right direction? Here is what I have got so far. https://github.com/sherbitfish/web-game