Category: javascript

I using a Macbook Pro M1 and decided to do start developing mobile app using Meteorjs framework, since I’ve used the framework for web development. I’ve followed a tutorial online on how to get that going but currently facing a problem:

Status of the individual requirements:        
✓ Java JDK                                    
✓ Android SDK                                 
✗ Android target: Command failed with exit code 1: avdmanager list target
            Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
                at com.android.repository.api.SchemaModule$SchemaModuleVersion.<init>(SchemaModule.java:156)
                at com.android.repository.api.SchemaModule.<init>(SchemaModule.java:75)
                at com.android.sdklib.repository.AndroidSdkHandler.<clinit>(AndroidSdkHandler.java:81)
                at com.android.sdklib.tool.AvdManagerCli.run(AvdManagerCli.java:213)
                at com.android.sdklib.tool.AvdManagerCli.main(AvdManagerCli.java:200)
            Caused by: java.lang.ClassNotFoundException: javax.xml.bind.annotation.XmlSchema
                at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:641)
                at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:188)
                at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:520)
                ... 5 more
✓ Gradle

It seems that there’s only one requirement that failed, and I’ve searched for the solution but couldn’t find anything that resembles a similar problem that I’m facing. Hoping for you to help point me to the right direction.

I have installed the Android Studio, uninstalled and reinstalled the Android SDK Build-Tools 32, Android SDK Command-line Tools, Android SDK Platform-Tools, and Android Emulator.

Currently, my ~/.bashrc file setup is like this:

export ANDROID_HOME=$HOME/Android/Sdk
export ANDROID_SDK_ROOT=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest/bin

…and my ~/.bash_profile:

export JAVA_HOME=$(/usr/libexec/java_home)
export PATH=$JAVA_HOME/bin:$PATH
export CLASS_PATH=$JAVA_HOME/lib

and I’ve got Gradle working just fine. Tested building a generic Android app using one of the samples in Android Studio. The build was successful.

But I can’t get the meteor add-platform android to pass the checks. Anyone?

I have declared some private methods in my Javascript class. When I use that piece of code on my machine it is working fine, but whenever some of my user use the same code It throws reference error.

I use MongoDB+Mongoose with Node.js. The question I’m facing is… If the person who set some kind of product into the cart, deleted the project for some reason, and the buyer who applied this item to the cart before the item was deleted comes to the cart, the program fails because the cart array is corrupted since there is no such product anymore…

My idea and it might be a bad idea, but nevertheless, was when the buyer click to the link to the cart page, node.js in the backend checks all products, matches it with the products in the cart, and each time it finds match pushes this match into array and then this array we match with the request. It might be a horrible idea, because the time of the request so far was quite long, and besides I cannot finish my asynchronous method… So far I done this…:

mongo db object structure for product:

{"_id":{"$oid":"61cc5e20ace8b042b739e8e3"},
"title":"fhgfjhgfjhj",
"price":12,"description":"hgfjhfjhfjhf",
"imageUrl":"images\20211229T130952.jpg",
"userId":{"$oid":"61cc5df4ace8b042b739e8d9"},"__v":0}

mongodb structure for the user which includes the cart:

{"_id":{"$oid":"61cc5df4ace8b042b739e8d9"},
"email":"[email protected]",
"password":"$2a$12$FUrAK/E8AtSvadX5m45BNu086/5MVasOAsdvwjdwv6KClpxgHJHh.",
"cart":{"items":[{"productId":{"$oid":"61cc5e20ace8b042b739e8e3"},"quantity":3,"_id":{"$oid":"61cc62c9ce1642aea120dacd"}},{"productId":{"$oid":"61cc642af0886f1e3086ff3e"},"quantity":1,"_id":{"$oid":"61cc88b19101f6fbde25c1e7"}}]},"__v":5}

exports.getCart = (req, res, next) => {
  const unchecked_products = req.user.cart.items;
  const checked_cart = [];
  Product.find()
    .then((products) => {
      products.forEach((product) => {
        unchecked_products.forEach((unchecked_product) => {
          if (
            unchecked_product.productId.toString() === product._id.toString()
          ) {
            checked_cart.push(unchecked_products);
          }
        });
      });
      return (req.user.cart.items = checked_cart);
    })
    .then((result) => {
      req.user
        .populate("cart.items.productId")
        .then((user) => {
          const products = user.cart.items;
          res.render("shop/cart", {
            pageTitle: "Your Cart",
            path: "/cart",
            products: products, //cartProducts
          });
        })
        .catch((err) => {
          console.error(err);
          const error = new Error(err);
          error.httpStatusCode = 500;
          return next(error);
        });
    });

I make raw mistake somehow. I tried to match and form new array for the cart… req.user.cart and checked_cart after I pushed there objects, they are one to one match structurally to each other, so I think and it suppose to work like this I will just equal them so I renew req.user.cart to the new data which is not corrupted. (All object which are deleted from products are ignored and not pushed to the new array of objects)…

And then I would do: req.user.populate(‘cart.items.productId’)… But something happens at this point and I lose my array and data becomes empty…

I use async with then blocks… And I tried to set req.user… inside and outside then block, but nothing good happens… I’m studying node.js and obviously I don’t see some mistake I made…

I want to intercept all XHR requests being sent, and change their URL and headers before the request gets sent.
Found this similar question but there are no answers there.

I tried hooking XMLHttpRequest.prototype.open (and send), But it only gives me access to the response:

(function () {
    var origOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function () {
        console.log(arguments);
        console.log(this);
        this.addEventListener('load', function () {
            console.log('request completed!');
        });
        origOpen.apply(this, arguments);
    };
})();

Also tried hooking XMLHttpRequest.prototype.setRequestHeader, but it only gives me access to each header value being set, one by one, and I can’t associate it to the URL of the request:

(function () {
    var origSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
    XMLHttpRequest.prototype.setRequestHeader = function (header, value) {
        console.log("header", header);
        console.log("value", value);
        origSetRequestHeader.apply(this, arguments);
    };
})();

How can I accomplish this?

I know that executeScript() function of JavascriptExecutor interface in selenium requires no signalling mechanism and it executes javascript inside it as synchronous(single threaded).

While executeAsyncScript() function of JavascriptExecutor interface requires signalling mechanism in the form of callback i.e. arguments[arguments.length-1] and it executes javascript inside it as asynchronously(multithreaded) without blocking main selenium code.

This means that if there is sleep in executeScript() javascript code then it will wait for that sleep time then execute further selenium statements. While if there is sleep in executeAsyncScript(), it will execute main selenium code in parallel to that sleep without blocking main code.

Now consider following code:

public static void main(String args[]) {
        
        WebDriverManager.chromedriver().setup();
        
        WebDriver driver=new ChromeDriver();
        JavascriptExecutor js=(JavascriptExecutor)driver;
        
    
        System.out.println("1");
        String javascript="var callback=arguments[arguments.length-1]; window.setTimeout(callback,15000);";  //callback has no problem here. Statement:1
        js.executeScript(javascript);  //Statement:2
        
        System.out.println("2");
        driver.quit();
    }

Now when I execute this code it does not wait for 15 sec sleep and immediately prints 2 and quit the browser while ideally it should behave synchronously i.e. it should block the main thread for 15 sec and after that it should print the 2 and quit the browser.

Now if I replace the statements 1 and 2 in above code with:

String javascript="var callback=arguments[arguments.length-1]; window.setTimeout(callback,15000);";
js.executeAsyncScript(javascript);

as:

public static void main(String args[]) {
        
        WebDriverManager.chromedriver().setup();
        
        WebDriver driver=new ChromeDriver();
        JavascriptExecutor js=(JavascriptExecutor)driver;
        
    
        System.out.println("1");
    
    String javascript="var callback=arguments[arguments.length-1]; window.setTimeout(callback,15000);";
    
    js.executeAsyncScript(javascript);
    
    System.out.println("2");
    
    driver.quit();
    }

If I run above code it waits for 15 sec sleep and print 2 after 15 sec and quit the browser after printing 2 after that 15 sec sleep.

Why they are behaving oppositely?

I have 2 select lists in html, place to enter a number and second place to show the result. It works like a conversion, so when you choose milimeters from the first list and meters from the second it will show you number you entered x 0.001. There is no problem with small numbers (up to 9 digits – I can round these), but when I’m trying to do 1 milimeter to 1 yoctometer (1.0 × 10-21 millimeters) sometimes it is correct, sometimes not. If I add zeros to yoctometer sometimes it will show something like 0.1 + 0.2 = 0.30000000000000004. The problem is I can’t round it, because someone can enter like 1000 yoctometers and it won’t work. Is there a way to fix this? (look at milimeters -> centimeters, Math.pow)

const config = {
    "milimeters": {
        "milimeters": v => v * 1,
        /* this is only an example */
        "centimeters": v => v * Math.pow(10, -21),
        "decimeters": v => v * 0.01,
        "meters": v => v * 0.001,
        "dekameters": v => v * 0.0001,
        "hectometers": v => v * 0.00001,
        "kilometers": v => v * 0.000001,
        "inches": v => v * 0.0393700787,
        "feet": v => v * 0.0032808399,
        "yards": v => v * 0.0010936133,
        "miles": v => v * 0.000000621371192, 
    },
}

function calculate() {
    const listFromV = document.getElementById("listFrom").value;
    const listToV = document.getElementById("listTo").value;
    const inputPlace = parseFloat(document.getElementById("inputPlace").value);

    const fn = config[listFromV][listToV];
    document.getElementById("resultPlace").innerHTML = fn(inputPlace);

    if (document.getElementById("inputPlace").value == "") {
        document.getElementById("resultPlace").innerHTML = "0.00";
    }

};

I use a Bootstrap modal to create a popup and when it closes, all the click events of my documents are deleted, included the one I have just clicked.
Could you help me, please?

To activate the modal, I click on a button with the id “btnAddPortfolio”.

function initBtnPortfolioMainContentAddPortfolio(){
    let btnAddPortfolio = document.getElementById("btnAddPortfolio");
    btnAddPortfolio.addEventListener("click", () => {
        displayPopUpLoadFileCreatePortfolio();
     });
}

function displayPopUpLoadFileCreatePortfolio(){
    let root = document.getElementById("root");
    let html = [];
    
    if (document.getElementById("PopUpLoadFileCreatePortfolio") === null){
        html.push('<div id="PopUpLoadFileCreatePortfolio" class="modal" tabindex="-1">',
                    '<div class="modal-dialog modal-dialog-centered">',
                      '<div class="modal-content">', 
                        '<div class="modal-header bg-info">', 
                          '<h5 class="modal-title">Créer un nouveau portefeuille</h5>', 
                          '<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>', 
                        '</div>', 
                        '<div class="modal-body">', 
                          '<div class="mb-3">', 
                            '<label for="formFile" class="form-label">Sélectionner le fichier à importer:</label>', 
                            '<input class="form-control" type="file" id="formFile">', 
                          '</div>', 
                        '</div>', 
                        '<div class="modal-footer">', 
                          '<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>', 
                          '<button type="button" class="btn btn-primary">Valider</button>', 
                        '</div>', 
                      '</div>', 
                    '</div>', 
                  '</div>', 
        );
        strHTML = html.join('n');
        root.innerHTML += strHTML;
    }
    let PopUp = new bootstrap.Modal(document.getElementById('PopUpLoadFileCreatePortfolio'), {
      keyboard: false
    });
    PopUp.show();
}

I’m working on an e-book shopping website and what I’m trying to do now is when someone chooses the books he wants to buy than goes into the shopping cart to validate his purchase by clicking on a buy button , a receipt with his information shows up for him to either print it or save it .

the receipt contains his address , the books he chose with amount and price , and a total price. how can I make that dynamic .

I’m stuck in the beginning , I have no clue how to do it . I don’t know how to look for what I’m trying to do online so I created this thread so maybe someone could link stack overflow threads that tackle this

I want the button inside the .container to be clickable, even though it has the pointer-events:none property.

The context is this: in my real code, I must prevent that a parent div (something to the style of the div that has the class .container) cannot be dragged, or click pressed and dragged somewhere.

I think if there is a way to solve this, my problem is solved.
this is my code:

function myFunction(){
 alert("click")
}

.container{
  width:30vh;
  height:30vw;
  background:red;
  display:flex;
  justify-content:center;
  align-items:center;
  pointer-events:none;
}

<div class="container">
  <button onclick="myFunction()">click</button>
</div>

I am trying to change the string displayed in the frontend by using function in javascript.

let displayword = document.getElementById(“displayword”)
console.log(displayword.innerText) //apple

Say, I want the change the letter “l” to something else say “i” but keep the rest of the letters unchanged how do I go around this?

Things I have tried

displayword.innerText[3] = “i”           // -----does nothing----

I am confused why the above code using index does nothing, while the below does something

dash.innerText += “i”      //applei

Extra question: Why does the above code using =+ change the formatting of the innerText? I want to keep the large font but it changes to regular font of the element (here I am using h1).

Thank you:)

I made this website with an accordion menu in a sidebar on mobile, and there is one little problem i can not solve.

If you look at the page https://lieth-schule.de and open the sidebar on a mobile device (button underneath the image banner) you can see the accordion menu. If you now open a submenu, you can only scroll if you exactly hit the scrollbar of the whole sidebar.

What do I have to change in order to be able to scroll the entire sidebar, when touching and holding anywhere inside it? Like you would do on a mobile touch device?

I am writing an VueJS app that displays a map using MapboxGL API, but I struggle when using their direction API.
When I try to install the package with the npm i @mapbox/mapbox-gl-directions, it displays this error:

(base) alexlbr client (master) >> npm install @mapbox/mapbox-gl-directions
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/mapbox-gl
npm ERR!   mapbox-gl@"^2.6.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer mapbox-gl@"^0.41.0 <2.0.0" from @mapbox/[email protected]
npm ERR! node_modules/@mapbox/mapbox-gl-directions
npm ERR!   @mapbox/mapbox-gl-directions@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/alexlbr/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/alexlbr/.npm/_logs/2021-12-29T14_50_37_269Z-debug.log

No matter what I try, I do not manage to use the mapbox-direction plugin.
Tell me if you have an idea.

Thanks for your help.

I have changed the value of dialogVisible to true, but the dialog box just doesn’t display

I modified the dialogVisible value of the subcomponent to true through ref, and passed the ID of each piece of data through props. I think there is nothing wrong with what I did. Originally, I wanted to implement the modification function, but now I can’t even display the dialog box. Can someone help me?

parent component

<template>
<div>
  <NavMenu></NavMenu>
  <listQuery></listQuery>
  <DialogAddAffairsType></DialogAddAffairsType>
  <el-table :data="tableData" stripe fit class="el-table" :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
    <el-table-column prop="id" label="ID" width="180">
    </el-table-column>
    <el-table-column prop="typename" label="类型名称" width="180">
    </el-table-column>
    <el-table-column prop="createdAt" label="创建时间">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="mini" @click="handleEdit(scope.row.id)">编辑(edit)</el-button>
        <el-button size="mini" type="danger" @click="handleDelete(scope.row.id, scope.$index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 前组件后数据 -->
  <editAffairsType :editAffairsType="affairsTypeId" ref="editAffairsType"></editAffairsType>
  <Pager></Pager>
</div>
</template>

<script>
import axios from "axios";
import ListQuery from "@/components/ListQuery/index.vue";
import DialogAddAffairsType from "@/components/DialogAddAffairsType/index.vue";
import Pager from "@/components/Pager/index.vue";
import NavMenu from "@/components/NavMenu/index.vue";
import editAffairsType from "@/components/DialogAffairsType/index.vue";

export default {
  name: 'AffairsTypeList',
  components: {
    ListQuery,
    DialogAddAffairsType,
    Pager,
    NavMenu,
    editAffairsType,
  },
  methods: {
    getAllAffairsTypes() {
      axios({
        method: 'GET',
        url: 'http://localhost:8080/api/affairsType/allAffairsTypes'
      }).then(response => {
        const data = response.data;
        console.log("是否取到数据", data);
        this.tableData = data;
      })
    },
    handleDelete(id, index) {
      this.$confirm("永久删除该事务类型, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          axios({
            method: 'DELETE',
            url: 'http://localhost:8080/api/affairsType/deleteById',
            params: {
              id: id
            }
          }).then(response => {
            if (response.status == 200) {
              this.tableData.splice(index, 1);
            }
          })
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleEdit(id) {
      this.affairsTypeId = id;
      this.$refs.editAffairsType.dialogVisible = true;

      console.log("数据准备成功")
      console.log(this.change[0])

      return this.affairsTypeId;
    }
  },
  // 在实例创建完成后被立即同步调用(https://cn.vuejs.org/v2/api/#created)
  created() {
    this.getAllAffairsTypes();
  },
  data() {
    return {
      tableData: [],
      affairsTypeId: "",
    }
  }
}
</script>

<style>
.el-table {
  margin: 0 auto;
}
</style>

child component

<template>
<div>
  <el-dialog title="修改事务类型" :visible.sync="dialogVisible" width="35%">
    <span>
      <el-form :model="AffairsType" :label-position="labelPosition" label-width="auto">
        <el-form-item label="类型名称" required>
          <el-input v-model="AffairsType.typename" :placeholder="placeholder.typename" style="width:50%"></el-input>
        </el-form-item>
      </el-form>
    </span>
    <span slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: "editAffairsType",
  // https://www.bilibili.com/video/BV1Zy4y1K7SH?p=66
  props: {
    affairsTypeId:{
      // type:Number,
      // required:true,
    }
  },
  data() {
    return {
      dialogVisible: false,
    }
  },
  methods: {
    // change() {
    //   this.dialogVisible = this.changeAffairsType.dialogVisible;
    // },
  },
  created(){
  },
}
</script>

<style>

</style>

Right now, this regex is doing the opposite of what I want. It’s removing everything that’s inside double quotes:

  const text = `"This is inside quotes."
  
This is outside quotes.
  
"This is inside quotes," I said.`
  
const quotesRegex = /((")[^"n]*)("|n)/g
const result = text.replace(quotesRegex, '')
  
console.log(result)

How can invert this regex so it removes everything that’s NOT inside double quotes? In other words, in my example, only "This is inside quotes." and "This is inside quotes," will remain.

Note: the regex might not be perfect, but it has worked for me for years.

Note 2: it also matches when there’s an opening quote and a new line without a closing quote.

How Can I set the antd Datepicker language to french?

I tried this :

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import moment from "moment";
import { DatePicker, Space, ConfigProvider } from "antd";
import frFR from "antd/lib/locale/fr_FR";

function onChange(date, dateString) {
  console.log(date, dateString);
}

ReactDOM.render(
  <Space direction="vertical">
    <ConfigProvider locale={frFR}>
      <DatePicker
        onChange={onChange}
        defaultValue={moment("2015-01-01", "YYYY-MM-DD")}
      />
    </ConfigProvider>
  </Space>,
  document.getElementById("container")
);

The preview language is still in English.

Here is a running code:
https://codesandbox.io/s/basic-antd-datepicker-language-n9ue7