Category: javascript

In a functional component I want to access props inherited from the parent functional component. To get an idea what I mean, I have the following snippet:

function MainApp(props) {
    const { classes } = props;
    const [content, setContent] = useState("");

    return (
        <div className={classes.root}>
            <AppBar position="fixed" className={classes.appBar}>
                <Toolbar className={classes.toolbar}>
                    <Typography variant="title" color="inherit" fontWeight="bold">
                        CashCo
                    </Typography>
                    <ToolbarActions className={classes.toolbarActions} />
                </Toolbar>
            </AppBar>
            <main className={classes.appContent}>
                <PageContent content={content} />
            </main>
        </div>
    );
}

function App(props) {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<MainApp />}></Route>
            </Routes>
        </BrowserRouter>
    );
}

I want to pass the props argument in the App() function to the MainApp(), such that I don’t have to access properties like props.props.some_property. How can I do that correctly? Cause passing props like this <MainApp props={props} /> means I have to access the properties like props.props.some_property in MainApp(), that’s not what I want. I want to access the props like props.some_property in MainApp().

How can I add new <tr> after a clicked <tr>. On click of this <tr> and remove now created when click other <tr> (with repeat 1st scenario) by jQuery?

I tried like this, but it does not work:

$("#test_table tr").click(function() {
  $(this).prev().remove();
  $(this).closest('tr').append('<tr><td>2.2</td></tr>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="test_table">
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
</table>

I am new to node js and I generated the models using sequelize-auto
I am encountering this error when I follow the recommendation of this link https://github.com/sequelize/sequelize-auto . if you i need more explanation

please here are my codes

my controller

var jwtutils = require ('../util/jwt');
var db = require ('../routes/bd');
const multer = require ('multer');
var jwt = require ('jsonwebtoken'); 
const base64 = require ('node-base64-image');
const mime = require ('mime');
const base64Img = require ('base64-img');
var initModels = require("../models/init-models");
var models = initModels(sequelize);

exports.get_publication = function (req, res) {
  models.publications
  .findAll ({
    where: {
      $and: [
        {'$users.ID_USER$': '$publications.ID_USER$'},
        {'$publications.ID_QUARTIER$': '$quartiers.ID_QUARTIER$'},
        {'$publications.ID_PRODUIT$': '$produits.ID_PRODUIT$'},
        {'$publications.ID_TYPE_PUB$': '$type_pub.ID_TYPE_PUB$'},
        {'$publications.ID_TYPE$': '$type_produits.ID_TYPE$'},
        {'$publications.ID_PUBLICATION$': '$images_pub.ID_PUBLICATION$'},
      ],
    },
    include: [
      {
        model: users,
        required: false,
      },
      {
        model: pays,
        required: false,
      },
      {
        model: produits,
        required: false,
      },
      {
        model: type_pub,
        required: false,
      },
      {
        model: images_pub,
        required: false,
      },
    ],
  })
  .then (data_pub => {
    return res.json ({
      statut: true,
      data_pub: data_pub,
    });
  })
  .catch (function (err) {
    console.log (err);
  });
};

my models publications

const Sequelize = require('sequelize');
module.exports = function(sequelize, DataTypes) {
  return sequelize.define('publications', {
    ID_PUBLICATION: {
      autoIncrement: true,
      type: DataTypes.INTEGER,
      allowNull: false,
      primaryKey: true
    },
    ID_PRODUIT: {
      type: DataTypes.INTEGER,
      allowNull: false,
      references: {
        model: 'produits',
        key: 'ID_PRODUIT'
      }
    },
    ID_USER: {
      type: DataTypes.INTEGER,
      allowNull: false,
      references: {
        model: 'users',
        key: 'ID_USER'
      }
    },
    ID_QUARTIER: {
      type: DataTypes.INTEGER,
      allowNull: false,
      references: {
        model: 'quartiers',
        key: 'ID_QUARTIER'
      }
    },
    ID_TYPE_PUB: {
      type: DataTypes.INTEGER,
      allowNull: false,
      references: {
        model: 'type_pub',
        key: 'ID_TYPE_PUB'
      }
    },
    CONTENU_PUB: {
      type: DataTypes.TEXT,
      allowNull: false
    },
    TITRE_PUB: {
      type: DataTypes.STRING(255),
      allowNull: false
    },
    PRIX_PRODUIT: {
      type: DataTypes.DECIMAL(11,0),
      allowNull: false
    },
    NOMBRE_PIECE: {
      type: DataTypes.INTEGER,
      allowNull: false
    },
    SUPERFICIE: {
      type: DataTypes.DECIMAL(11,0),
      allowNull: false
    },
    ETAT_PUB: {
      type: DataTypes.BOOLEAN,
      allowNull: false
    },
    DATE_PUB: {
      type: DataTypes.DATE(6),
      allowNull: false,
      defaultValue: "current_timestamp(6)"
    },
    DATE_MODIF_PUB: {
      type: DataTypes.DATE(6),
      allowNull: false,
      defaultValue: "current_timestamp(6)"
    }
  }, {
    sequelize,
    tableName: 'publications',
    timestamps: false,
    indexes: [
      {
        name: "PRIMARY",
        unique: true,
        using: "BTREE",
        fields: [
          { name: "ID_PUBLICATION" },
        ]
      },
      {
        name: "I_FK_PUBLICATIONS_PRODUITS",
        using: "BTREE",
        fields: [
          { name: "ID_PRODUIT" },
        ]
      },
      {
        name: "I_FK_PUBLICATIONS_USERS",
        using: "BTREE",
        fields: [
          { name: "ID_USER" },
        ]
      },
      {
        name: "I_FK_PUBLICATIONS_QUARTIERS",
        using: "BTREE",
        fields: [
          { name: "ID_QUARTIER" },
        ]
      },
      {
        name: "I_FK_PUBLICATIONS_TYPE_PUB",
        using: "BTREE",
        fields: [
          { name: "ID_TYPE_PUB" },
        ]
      },
    ]
  });
};

init-model file

var DataTypes = require("sequelize").DataTypes;
var _commentaires = require("./commentaires");
var _images_pub = require("./images_pub");
var _localite = require("./localite");
var _notifications = require("./notifications");
var _pays = require("./pays");
var _produits = require("./produits");
var _publications = require("./publications");
var _quartiers = require("./quartiers");
var _regions = require("./regions");
var _roles = require("./roles");
var _type_pub = require("./type_pub");
var _users = require("./users");

function initModels(sequelize) {
  var commentaires = _commentaires(sequelize, DataTypes);
  var images_pub = _images_pub(sequelize, DataTypes);
  var localite = _localite(sequelize, DataTypes);
  var notifications = _notifications(sequelize, DataTypes);
  var pays = _pays(sequelize, DataTypes);
  var produits = _produits(sequelize, DataTypes);
  var publications = _publications(sequelize, DataTypes);
  var quartiers = _quartiers(sequelize, DataTypes);
  var regions = _regions(sequelize, DataTypes);
  var roles = _roles(sequelize, DataTypes);
  var type_pub = _type_pub(sequelize, DataTypes);
  var users = _users(sequelize, DataTypes);

  quartiers.belongsTo(localite, { as: "ID_LOCALITE_localite", foreignKey: "ID_LOCALITE"});
  localite.hasMany(quartiers, { as: "quartiers", foreignKey: "ID_LOCALITE"});
  regions.belongsTo(pays, { as: "ID_PAYS_pay", foreignKey: "ID_PAYS"});
  pays.hasMany(regions, { as: "regions", foreignKey: "ID_PAYS"});
  publications.belongsTo(produits, { as: "ID_PRODUIT_produit", foreignKey: "ID_PRODUIT"});
  produits.hasMany(publications, { as: "publications", foreignKey: "ID_PRODUIT"});
  commentaires.belongsTo(publications, { as: "ID_PUBLICATION_publication", foreignKey: "ID_PUBLICATION"});
  publications.hasMany(commentaires, { as: "commentaires", foreignKey: "ID_PUBLICATION"});
  images_pub.belongsTo(publications, { as: "ID_PUBLICATION_publication", foreignKey: "ID_PUBLICATION"});
  publications.hasMany(images_pub, { as: "images_pubs", foreignKey: "ID_PUBLICATION"});
  notifications.belongsTo(publications, { as: "ID_PUBLICATION_publication", foreignKey: "ID_PUBLICATION"});
  publications.hasMany(notifications, { as: "notifications", foreignKey: "ID_PUBLICATION"});
  publications.belongsTo(quartiers, { as: "ID_QUARTIER_quartier", foreignKey: "ID_QUARTIER"});
  quartiers.hasMany(publications, { as: "publications", foreignKey: "ID_QUARTIER"});
  localite.belongsTo(regions, { as: "ID_REGION_region", foreignKey: "ID_REGION"});
  regions.hasMany(localite, { as: "localites", foreignKey: "ID_REGION"});
  users.belongsTo(roles, { as: "ID_ROLE_role", foreignKey: "ID_ROLE"});
  roles.hasMany(users, { as: "users", foreignKey: "ID_ROLE"});
  publications.belongsTo(type_pub, { as: "ID_TYPE_PUB_type_pub", foreignKey: "ID_TYPE_PUB"});
  type_pub.hasMany(publications, { as: "publications", foreignKey: "ID_TYPE_PUB"});
  commentaires.belongsTo(users, { as: "ID_USER_user", foreignKey: "ID_USER"});
  users.hasMany(commentaires, { as: "commentaires", foreignKey: "ID_USER"});
  notifications.belongsTo(users, { as: "ID_USER_user", foreignKey: "ID_USER"});
  users.hasMany(notifications, { as: "notifications", foreignKey: "ID_USER"});
  publications.belongsTo(users, { as: "ID_USER_user", foreignKey: "ID_USER"});
  users.hasMany(publications, { as: "publications", foreignKey: "ID_USER"});

  return {
    commentaires,
    images_pub,
    localite,
    notifications,
    pays,
    produits,
    publications,
    quartiers,
    regions,
    roles,
    type_pub,
    users,
  };
}
module.exports = initModels;
module.exports.initModels = initModels;
module.exports.default = initModels;

error

E:Mes CoursMes projetProjet nodeJSImmoMarketControllersPubController.js:9
var models = initModels(sequelize);
^

ReferenceError: sequelize is not defined
at Object. (E:Mes CoursMes projetProjet nodeJSImmoMarketControllersPubController.js:9:25)

Currently trying to download image from GitHub locally. Everything seems to work, the fetch goes through with a 200 OK response, however, I don’t understand how to store image itself:

const rawGitLink = "https://raw.githubusercontent.com/cardano-foundation/CIPs/master/CIP-0001/CIP_Flow.png" 

const folder = "/Folder"
const imageName = "/Test"
const imageResponse = await axios.get(rawGitLink)


 fs.writeFileSync(___dirname + folder + imageName, imageResponse, (err) => {
   //Error handling                    
 }
)

enter image description here
I just started react native and following the doc steps properly still can’t figure out what’s happening

I’m totally new to jquery, but trying my best.

I have an asp.net mvc project with page full of x-editable inputs.
I made this simple button

<input type="button" class="btn btn-info" id="validate" value="Validate document" />

What I want to achieve is after inputs has been filled by the user, I want him/her to push the button and check if all fields has been filled.
I made this jquery:

 $('.editable').ready(function () {
        $('.editable').editable('option', 'validate', function (v) {
            if (!v) return 'Field required!';
        });
    })

When I push enter on an empty field it triggers validation.

What I need is to highlight all empty x-editable fields on the page when the #validate is clicked and show “Field required!” message.

Any help would be appreciated

I am working with the blob API in the latest Chrome and would like to have the following XML DOM added to a new empty object URL:

<root>
  <Title>
   <H1>A Title</H1>
   <H2>A Subtitle</H2>
   Some text or other elements<BR/>
  </Title>
</root>

This piece of XML is selected by the user with their mouse from a content editable DIV. Then I convert that selection into an XML DOM like so:

var n_parser = new DOMParser; //new parser
var small_xml_string = "<root>" + window.getSelection() + "</root>"; //add a root node
var small_xml_obj = n_parser.parseFromString(small_xml_string.toString().replace(/n/g, ""), "text/xml"); //convert user selection to string then to an XML DOM while removing some expected newlines below the selection

The parser however fails to convert any nodes that would have any HTML tags in them, resulting in the following DOM:

<root>
  </Title>
</root>

I’ve tried escaping the the HTML entities but the parser still behaves the same. This was the code I created to try and deal with entities:

var unencoded_title =
  small_xml_string.toString().substring(
    small_xml_string.toString().indexOf("<Title>") + 7,
    small_xml_string.toString().indexOf("</Title>")
    );//Find the string between the title tags
var encoded_title_lt = unencoded_title.replace(/</g, "&lt;");//replace the "<" with "&lt;"
var encoded_title = encoded_title_lt.replace(/>/g, "&gt;");//replace the ">" with "&gt;"
xml_dom.getElementsByTagName("Title")[0].childNodes[0].nodeValue = encoded_title //Add the encoded string to the node, replacing what's there

Note that “xml_dom” is a ready DOM that looks like this:

<root>
    <Title>Example
    </Title>
</root>

The resulting DOM though is exactly the same as if I’d passed the HTML tags in.
Users will be adding HTML tags like
and to the input. How can I process HTML tags in the user input, ready to pass to the blob api?

{"holders": [{
  "address": "0xbe0eb53f46cd790cd13851d5eff43d12404d33e8",
  "balance": 8.623839536582375e24,
  "share": 52.02
},{
  "address": "0xf977814e90da44bfa03b6295a0616a897441acec",
  "balance": 4.5e24,
  "share": 27.14
}]};

The above is a json data, stored in a file, now what I want to do is to loop over this whole file which has 2000 of such entries, get just the address part of each entry and append it in a url, so how would I do the looping part??
Any code Snippet for javaScript would be lovely.
Cudos.

I tried many things but only what I founded is how to press enter with JQuery but I don’t have it(Because I’m making a script)

I have a branch.io app with example.app.link as domain and bunch of links got created where
it opens “ExampleApp” in appstore or playstore.

Now due to some reason i need to change the domain(newexample.app.link or new.example.com) of the link(either sub domain or a new domain completly if subdomain doesn’t work) along with the redirection configurations.
So my new redirection is “ExampleAppNew“

Will the previously created links will open the old app or new app or error page?

Hello i am trying to send a message in a code block but the bot is not sending it. Here is the code:

message.channel.send({ content: `Hi`, code: "js" })

So I’ve created a “falling snow” effect using canvas and JS, it starts with a small amount on the screen and as the user clicks more are added – they’re animated to gently fall and it all works fine and looks great.

The problem came when I tried to add a second canvas underneath without the interactivity but still with some of the moving snow effects, just to make it look a bit better and have some continuity throughout the page. I re-used the code for the first effect while changing the array, identifiers and function names etc.

I just can’t seem to get the second effect to animate no matter what I try. It’s getting the correct amount of “snowflakes” on screen but they’re just static. The same animation code works on the first one so I can’t see why it isn’t on the second. No errors in the console either since everything is named separately and it can read both arrays. I’ve been stuck on this for the best part of two days so any help would be great!

The top canvas JS which animates perfectly:

const canvas = document.getElementById("topCanvas");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const c = canvas.getContext("2d");


function Circle(x, y, dx, dy, radius) {
  this.x = x;
  this.y = y;
  this.dx = dx;
  this.dy = dy;
  this.radius = radius;

  this.draw = function() {
    c.beginPath();
    c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    c.strokeStyle = "#E2EAFC";
    c.fill();
    c.fillStyle = "#EDF2FB";
    c.stroke();
  }

  this.update = function() {

    if (this.x + this.radius > innerWidth ||
      this.x - this.radius < 0) {
      this.dx = -this.dx;
    }

    this.x += this.dx;
    this.y += this.dy;

    this.draw();
  }
}


const circleArray = [];

for (i = 0; i < 100; i++) {
  radius = (Math.random() * 1);
  x = Math.random() * (innerWidth - radius * 2) + radius;
  y = Math.random() * (innerHeight - radius * 2) + radius;
  dx = (Math.random() - 0.1) * 0.05;
  dy = (Math.random() - 0.2) * 0.1;
  circleArray.push(new Circle(x, y, dx, dy, radius));
}

console.log(circleArray);

function animate() {
  requestAnimationFrame(animate);
  c.clearRect(0, 0, innerWidth, innerHeight);

  for (i = 0; i < circleArray.length; i++) {
    circleArray[i].update();
  }
}

canvas.addEventListener('click', function() {
  for (i = 0; i < 80; i++) {
    radius = (Math.random() * 2);
    x = Math.random() * (innerWidth - radius * 2) + radius;
    y = Math.random() * (innerHeight - radius * 2) + radius;
    dx = (Math.random() - 0.2) * 0.05;
    dy = (Math.random() - 0.2) * 0.1;
    circleArray.push(new Circle(x, y, dx, dy, radius));
  }
});

animate();

And the second one which doesn’t:

const background = document.getElementById("backgroundEffect");

background.width = window.innerWidth;
background.height = window.innerHeight;

const b = background.getContext("2d");


function Drawing(x, y, dx, dy, radius) {
  this.x = x;
  this.y = y;
  this.dx = dx;
  this.dy = dy;
  this.radius = radius;

  this.draw = function() {
    b.beginPath();
    b.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    b.strokeStyle = "#E2EAFC";
    b.fill();
    b.fillStyle = "#EDF2FB";
    b.stroke();
  }

  this.update = function() {

    if (this.x + this.radius > innerWidth ||
      this.x - this.radius < 0) {
      this.dx = -this.dx;
    }

    this.x += this.dx;
    this.y += this.dy;

    this.draw();
  }
}


const backgroundArray = [];

for (i = 0; i < 200; i++) {
  radius = (Math.random() * 2);
  x = Math.random() * (innerWidth - radius * 2) + radius;
  y = Math.random() * (innerHeight - radius * 2) + radius;
  dx = (Math.random() - 0.2) * 0.1;
  dy = (Math.random() - 0.2) * 0.4;
  backgroundArray.push(new Drawing(x, y, dx, dy, radius));
}

console.log(backgroundArray);

function animateBackground() {
  requestAnimationFrame(animate);
  b.clearRect(0, 0, innerWidth, innerHeight);

  for (i = 0; i < backgroundArray.length; i++) {
    backgroundArray[i].update();
  }
}

background.addEventListener('click', function() {
  for (i = 0; i < 80; i++) {
    radius = (Math.random() * 2);
    x = Math.random() * (innerWidth - radius * 2) + radius;
    y = Math.random() * (innerHeight - radius * 2) + radius;
    dx = (Math.random() - 0.2) * 0.1;
    dy = (Math.random() - 0.2) * 0.4;
    backgroundArray.push(new Circle(x, y, dx, dy, radius));
  }
});

animateBackground();

These are in different JS files and both are being read and executed fine aside from the animation itself. To try and illustrate I’ve attached two pictures – before clicking and after clicking. Top canvas the particles move about but bottom one they don’t

I want create new number object with own properties from new Number constructor.
But when assign a number value to my variable, my variable turn to Number(primitive wrapper object).and loss own properties.How can I prevent this?
Example

class Fnumber extends Number {
  value = 0;
  [Symbol.toPrimitive](hint) {
    if (hint === 'object') {
      return this;
    }
    return this.value;
  };
  //I don't want use Number.prototype.add method because this effect all Number values.
  add = function(...v) {
    this.value += Array.prototype.slice.call(arguments).reduce((o, v) => o + v)
  }
}
var nmbr = new Fnumber();
nmbr.add(4, 2, 4);
console.log(nmbr); //return a Object
console.log(nmbr + 4); //return 14 is number
nmbr = 14;
console.log(nmbr); //return not a Object its Primative number value
console.log(nmbr + 4); //return 14 a number
nmbr.add(4, 2, 4); //raise error.

This is the html i want to write in queryselector

<a id="foo" (click)="jump('labeled')">Labeled</a>

And below is the wrong selector i wrote :

var indicator = document.querySelector(".indexing a[(click)=jump(" + sectionId + ")] ");

Labeled is the sectionId

I’m not quite sure why the click event is not working.
I simply trying the use a responsive accessible navigation but looks like I’m missing something in the constructor or I’m not firing the function properly?
I have the feeling that my es6 constructor is not right.
Please let me know if you could help me

import React, { Component} from "react";
import {hot} from "react-hot-loader";
import { Link } from "react-router-dom";

import "../styles/navbar.scss"
import cart from '../assets/images/cart.png'


class NavBar extends Component{

  constructor(props){
    super(props);
    this.responsiveNav = this.responsiveNav.bind(this);
  
  }
responsiveNav(){
  const primaryNav = document.querySelector(".nav-items");
  const navToggle = document.querySelector(".mobile-nav-toggle");
  
  navToggle.addEventListener("click", () => {
    console.log('click')
    const visibility = primaryNav.getAttribute("data-visible");
  
    if (visibility === "false") {
      primaryNav.setAttribute("data-visible", true);
      navToggle.setAttribute("aria-expanded", true);
    } else if (visibility === "true") {
      primaryNav.setAttribute("data-visible", false);
      navToggle.setAttribute("aria-expanded", false);
    }
  });
  
  }

 

  render(){
    return(
      <div id={this.props.id} className="navbar">
        

        <button  className="mobile-nav-toggle" aria-controls="nav-items" aria-expanded="false">
        <span className="sr-only">Menu</span>
        </button>
        <nav className="nav">
          <div className="nav-menu flex-row">
            <div className="nav-brand">
                <h2><Link to="/">APP</Link></h2>
            </div>

            <ul className="menu" data-visible="false" className="primary-nav flex">
                <li>
                  <Link to="/">Products</Link>
                </li>
                <li>
                  <Link to="/">News</Link>
                </li>
                <li>
                  <Link to="/">Content</Link>
                </li>
                <li>
                  <Link to="/cart"><img src={cart} alt="cart icon"/><div id="yourcart">Your Cart</div></Link>
                </li>
              </ul>
          </div>
        </nav>
      </div>
    );
  }
} 

export default hot(module)(NavBar);