Category: javascript

I am trying to connect my Expo Facebook Login app to my Firebase profile. I managed to get Facebook login working, moreover added the config to Firebase and enabled the OAuth URL redirect.

However…
When I try to SignInWithCredentials with my token from FacebookAuthProvider, my app says that the credentials I try to log in is incorrect. I that function is checking if username and password is correct, right? Do I have to use another method?

const facebook_login = async() => {
    try {
        await Facebook.initializeAsync({
          appId: FBAPPID,
        });
        const { type, token, expirationDate, permissions, declinedPermissions } =
          await Facebook.logInWithReadPermissionsAsync({
            permissions: ['public_profile', 'email'],
          });
        if (type === 'success') {
          const credential = FacebookAuthProvider.credential(token)

          //ERROR HERE, GIVING USERNAME PW WRONG DIALOG
          const {result} = await signInWithCredentials(credential)
        } else {
          // type === 'cancel'
        }
      } catch ({ message }) {
        Alert.alert(`Hiba a Facebook bejelentkezés közben: ${message}`);
      }
}

I have a local website which has loads of elements triggered by different actions and I was wondering if am I doing it right.

So for instance there is a button that has a function called open() and a completely empty element with an id such as “foo”.

The open() function does the following: It gets the element of id “foo” and sets its innerHTML to a bunch of elements for example creates a with few input fields in it and so on. So it relativey writes a large amount of elements in it.

Honestly I don’t think that this is the proper way to create elements inside an element and manipulate them or add custom attributes or whatever.

I also tried to create a new .html file which has the elements that I wanted to write inside the element with the id “foo” and then on the open() function it would just simply loads the .html file into the “foo” element but I’ve dropped this idea because of the various security risks.

My question is the following:
Is there any optimized and/or more professional way to create/manipulate elements without the INNERHTML or the .HTML() method?

The basics of the code that I tried to explain:

const element = document.getElementById(‘foo’);

function open() {
   element.innerHTML = ‘a bunch of html elements that I dont want to list here’;
}

The second method that I tried:

const element = document.getElementById(‘foo’);

function open(){
   element.html(htmlelements.html);
}

The htmlelements.html contains a bunch of DOM elements.

I’m making a recipe blog website using mongoose, nodejs and express. I am making a search form, but the text search not giving the correct output.

In Recipe.js schema I added the following parameters, that in which values I want to search, I’m added the following ones: recipeSchema.index({ name: 'text', description: 'text', ingredients: 'text', categoryByNationality: 'text', categoryByServing: 'text'});

When I started this project, i had only recipeSchema.index({ name: 'text', description: 'text',}); and it’s worked, but after a few months later I added the ingredients, categoryByNationality and categoryByServing and when I search for category, not finding any recipe. If I search for name and description, its working fine. When I delete all this recipeSchema.index({.......}) code, working with the name and with description again.

What is causing this problem, any idea?

Controller.js

exports.searchRecipe = async(req, res) => {

    //searchTerm
    try {
        let searchTerm = req.body.searchTerm;
        let recipe = await Recipe.find({ $text: { $search: searchTerm, $diacriticSensitive: true } });
        res.render('search', { title: 'Cooking Blog - Search', recipe });
    } catch (error) {
        res.status(500).send({message: error.message || "Error Occured"});
    }
}

Recipe schema

const mongoose = require('mongoose');

const recipeSchema = new mongoose.Schema({
    name: {
        type: String,
        required: 'This field is required.'
    },
    description: {
        type: String,
        required: 'This field is required.'
    },
    servings: {
        type: Number,
        required: 'This field is required.'
    },
    quantity: {
        type: Array,
        required: 'This field is required.'
    },
    ingredients: {
        type: Array,
        required: 'This field is required.'
    },
    categoryByServing: {
        type: String,
        enum: ['Reggeli', 'Ebéd', 'Vacsora', 'Desszert', 'Levesek', 'Egyéb'],
        required: 'This field is required.'
    },
    categoryByNationality: {
        type: String,
        enum: ['Thai', 'Kínai', 'Indiai', 'Olasz', 'Angol', 'Magyar', 'Egyéb'],
        required: 'This field is required.'
    },
    image: {
        type: Array,
        required: 'This field is required.'
    },
    comments: [
        {
            username: String,           
            comment: String,          
            date: {
                type: Date,
                default: Date.now
            },           
            rating: Number,
        },{
            timestamps: true
        }
    ],
    count: {
        type: Number
    },
    likes: {
        type: Number
    },
    ratingAvg: {
        type: Number
    },
    recipe_id: {
        type: String
    }

});

recipeSchema.index({ name: 'text', description: 'text', ingredients: 'text', categoryByNationality: 'text', categoryByServing: 'text'});


module.exports = mongoose.model('Recipe', recipeSchema);

search.ejs

<h1 class="pb-4">Search result</h1>

<div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <% if(typeof recipe !== 'undefined' && recipe.length > 0) { %>
      <% recipe.forEach(function(recipe, index){ %>
      <a href="/recipe/<%= recipe._id %>" class="col text-center category_link">
        <div class="category_img category__img--large shadow">
          <img src="/uploads/<%= recipe.image %>" alt="<%= recipe.name %>" loading="lazy">
        </div>
        <div class="pt-1"><%= recipe.name %></div>
      </a>
      <% }) %>
    <% } else { %>
      <p>Cant find any recipe</p>
    <% } %>
</div>

Sample data for Recipe database

{
    "_id": {
        "$oid": "6228ce14b72c51796e00b8ce"
    },
    "name": "Test recipe",
    "description": "test test test",
    "servings": {
        "$numberInt": "6"
    },
    "quantity": ["12", "20", "2"],
    "ingredients": ["l water", "g salt", "l milk"],
    "categoryByServing": "Ebéd",
    "categoryByNationality": "Indiai",
    "image": ["1646744388278274327802_7801262463232661_4968108751943235625_n.jpg"],
    "comments": [{
        "username": "First username",
        "comment": "First comment",
        "rating": {
            "$numberInt": "5"
        },
        "_id": {
            "$oid": "622753706aff227ef4b4460a"
        },
        "date": {
            "$date": {
                "$numberLong": "1646744433049"
            }
        }
    }, {
        "username": "Second username",
        "comment": "Second comment",
        "rating": {
            "$numberInt": "4"
        },
        "_id": {
            "$oid": "6227537e6aff227ef4b44615"
        },
        "date": {
            "$date": {
                "$numberLong": "1646744446326"
            }
        }
    }, {
        "username": "Third username",
        "comment": "Third comment",
        "rating": {
            "$numberInt": "3"
        },
        "_id": {
            "$oid": "622753896aff227ef4b44622"
        },
        "date": {
            "$date": {
                "$numberLong": "1646744458103"
            }
        }
    }, {
        "username": "Fourth username",
        "comment": "Fourth comment",
        "rating": {
            "$numberInt": "2"
        },
        "_id": {
            "$oid": "6227539e6aff227ef4b44631"
        },
        "date": {
            "$date": {
                "$numberLong": "1646744478781"
            }
        }
    }, {
        "username": "Fifth username",
        "comment": "Fifth comment",
        "rating": {
            "$numberInt": "1"
        },
        "_id": {
            "$oid": "622753a86aff227ef4b44642"
        },
        "date": {
            "$date": {
                "$numberLong": "1646744489088"
            }
        }
    }, {
        "username": "25",
        "comment": "gasss",
        "rating": {
            "$numberInt": "3"
        },
        "_id": {
            "$oid": "622796829f8062416492dcfd"
        },
        "date": {
            "$date": {
                "$numberLong": "1646761603076"
            }
        }
    }],
    "count": {
        "$numberInt": "120"
    },
    "likes": {
        "$numberInt": "0"
    },
    "ratingAvg": {
        "$numberDouble": "3.0"
    },
    "__v": {
        "$numberInt": "6"
    }
}

i want to load a picture form input type image and desplay it on my html page or at least get the path of that image

 <script>
function AddImg()
        {   
            const img = document.getElementById("image").value;
            console.log(text);
            var myImage = new Image(100, 200);
            myImage.src =img ;
            document.body.appendChild(myImage);
        }
</script>
<input type="file" accept="image/*" value="Add Images" style="margin-top: 30px;" id="image">
            <button onclick="AddImg();">Add image</button>

I’m trying to upload an image to firebase but I’m getting this error:

ApiError: The billing account for the owning project is disabled in state absent

I connected the project to a billing account in google cloud console

    admin
     .storage()
     .bucket()
     .upload(image.path, {
       contentType: image.mimetype,
       gzip: true,
     })
  .then((g) => {
    console.log(g);
  })

I am trying to sync hubspot and netsuite and in my user event script, I used a post request to send contact details from netsuite to hubspot but it isn’t working. The post request is not creating a new contact in hubspot. This is the code, can someone help me with this.

    const link = 'http://api.hubspot.com/crm/v3/objects/contacts';
        
        var response = http.request({
            method: http.Method.POST,
            url: link,
            headers:  { 'Authorization': 'Bearer '+ PRIVATE_APP_ACCESS ,
             'Content-Type': 'application/json',
            'Accept': "*/*" 
           },
           body: { "properties": {
            "email": "[email protected]",
            "firstname": "micheal"
          }}
        });

I’m trying to implement a functionality where if a user pastes text it should remove <>$ and ! while

function specialCharRestriction(){
                setTimeout(function(e){
                        $('input, textarea').bind("cut copy paste",function(e) {
                                e.preventDefault();
                        });
                        $('input:not([type=password]), textarea').on('keypress', function (e) {
                                var blockSpecialRegex = /[!$(){}[]:;<+?\>]/;
                                        var key = String.fromCharCode(!e.charCode ? e.which : e.charCode);
                                        console.log(key);
                                        if(blockSpecialRegex.test(key)){
                                        e.preventDefault();
                                        return false;
                                        }
                        });
                }, 500);
        }

The above code works on all inputs on page or a dom. Currently it disables the paste function, however I want something like this:

$('input').val().replace(regex, '')

so that it can be applied on all inputs and I don’t have to select all the inputs one by one. There are more than 100 fields declared in my project so pls help with a generic code which can be applied on all input fields.

I want to render star.png on html, using require called in Test.js inside components directory.
But it gives me error: Uncaught Error: Cannot find module './star.png' ....

My directory structure looks like:

• …
• public
• src
  • components
    • Test.js
  • images
    • star.png
  • index.js

My code:

src/components/Test.js:

import React from "react"

export default function Test(props){
    return (
        <div>
            <h1>{props.text}</h1>
            <img src={props.img && require(`../images/${props.img}`)} />
        </div>
    )
}

src/index.js:

import React from "react"
import ReactDOM from "react-dom"
import Test from "./components/Test"

function App(){
    let img = 'star.png'
    let text = 'Hello'

    return (
        <Test
            text={text}
            img={img}
        />
    )
}

ReactDOM.render(<App />, document.getElementById("root"))

FULL ERROR:

Uncaught Error: Cannot find module './star.png'
    at webpackContextResolve (.*$:10:1)
    at webpackContext (.*$:5:1)
    at Test (Test.js:8:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)

However it does work if I call require inside index.js and just pass the return value of require as props like:

src/index.js:

import React from "react"
import ReactDOM from "react-dom"
import Test from "./components/Test"

function App(){
    let img = require('./images/star.png')
    let text = 'Hello'

    return (
        <Test
            text={text}
            img={img}
        />
    )
}

ReactDOM.render(<App />, document.getElementById("root"))

AND src/components/Test.js:

import React from "react"

export default function Test(props){
    return (
        <div>
            <h1>{props.text}</h1>
            <img src={props.img && props.img} />
        </div>
    )
}

But I don’t want to do operations inside index.js, I only want to do it inside Test.js. How can I do that?

(Note: I have this seen thread but it’s completely different.)

I have a problem to click on div inside a shadow-root with puppeteer, I found on others forum an answer :

 const buttonHandle = await page.evaluateHandle(() => {
        return document.querySelector("beop-widget").shadowRoot.querySelector("div > div > div > div > div > div > div > div:nth-child(3) > div:nth-child(3) > div:nth-child(1) > div:nth-child(2) > div > div > div > div > div:nth-child(2) > div > div > div > div:nth-child(5) > div > div > div > div > div.BeOp__QuestionChoiceTextBlock > div")
    })

I get the selector with google chrome js path, But ButtonHandle is still null…

I try to click on one on these choices

If someone has an idea to help me 🙂

thanks in advance 🙂

https://www.republicain-lorrain.fr/sport/2022/03/08/football-quelle-rencontre-de-deuxieme-division-de-district-souhaitez-vous-que-l-on-aille-couvrir-ce-dimanche?fbclid=IwAR2Fhmv-1EQp-gajnOYvzWwWMtay8wfQi3kn9pr0mH7Rbng-SNIlQ5ravWQ

i should scrape messenger with selenium. In particular, I should make an element appear that only appears when you hover over it with the cursor. I leave some photos below.

when the cursor hovers over it

the cursor is not over the element

I’m trying to make that element appear without going over it, maybe with javascript if possible, or with some characteristics of selenium. Even using the mouse if neither of the above two options are available. Someone could help me pls.
Thanks in advance.

Same problem like this one:
Having trouble importing a library: cannot set properties of undefined (setting ‘noise’)

Unfortunately, I can’t upvote yet, and my comment asking whether he already found a solution was deleted.

I’m trying to implement https://github.com/josephg/noisejs in a three.js project based on this tutorial: https://hackernoon.com/how-to-draw-generative-nft-mushrooms-with-threejs
where it obviously worked. So, I have to assume that I did something wrong. Can you tell me what? Here’s the error:

perlin.js:18 Uncaught TypeError: Cannot set properties of undefined (setting 'noise')
    at perlin.js:18:29
    at perlin.js:310:3

These are the respective lines in perlin.js:

(function(global){
  var module = global.noise = {}; // l18
...

})(this); // l318

For now, I have tried importing noiseJS this way:

import * as NOISE from '../../../vendor/noisejs-master/perlin.js';

but I have already tried every other import style that I know of.

Any help would be highly appreciated.

const express = require("express");
const app = express();
const PORT = 3000;
require("dotenv").config();
const accountSid = process.env.TWILIO_ACCOUNT_SID;
const authToken = process.env.TWILIO_TOKEN;
const client = require("twilio")(accountSid, authToken);

client.messages
  .create({
    to: process.env.NUMBER,
    from: "+18598006707",
    body: "Hello Kashif",
  })
  .then((message) => console.log(message.sid));

app.listen(PORT, () => {
  console.log("server is at", PORT);
});

see image for accountSid
I am getting accountSid must start with AC even though my account sid starting with AC.

hello everyone i’m having problem in daterange filter datatables, like i choose date range from february 24 – february 25. why the data that appears only on the 25th of February and the 24th does not appear?

this my view HTML

 <label form="min_date">Start Date</label>  
   <div class="input-group date">
     <div class="form-line" >
       <input type="text" class="form-control" id="min_d" name="min_d"   >
         </div>
            </div>
                   
  <label form="max_date">End Date</label>  
    <div class="input-group date">
      <div class="form-line" >
        <input type="text" class="form-control" id="max_d" name="max_d"  >
            </div>
             </div>

this my Javascript

    $.fn.dataTable.ext.search.push(
        function( settings, data, dataIndex ) {
            var min = minDate.val();
            var max = maxDate.val();
            var date = new Date( data[4] );
     
             if (
                ( min === null && max === null ) ||
                ( min === null && date <= max ) ||
                ( min <= date   && max === null ) ||
                ( date >= min   && date <= max )
            ) {
                return true;
            }
            return false;
        }
    );
     
    $(document).ready(function() {
        
        minDate = new DateTime($('#min_d'), {
            format: 'D-MM-YYYY'
        });
        maxDate = new DateTime($('#max_d'), {
            format: 'D-MM-YYYY'
        });strong text
     
           
        var table = $('#transactions').DataTable();
     
        
        $('#min_d, #max_d').on('change', function () {
            table.draw();
        });
    });    

So I am using the Angular tree component defined here https://angular2-tree.readme.io/docs

I am trying to have a breadcrumbs path on search for single results from the root.
So searching something like “test” would yield results like the following, where ‘>’ represents a new root.

> A1 / A2 
    test
> B1 / B2 / B3
    test
> C3
    test

My idea is to hide all the subparents that are not the test leaf, but still have the leaf visible. I would also simply change the name of the root node to simulate breadcrumbs.

Is that possible to hide all the subparents except the final leaf, if so how would I do that?

Another possible idea I had was to move the final leaf node into the children of the root node, and do the same with the simulated breadcrumbs path. Although I am not sure how to restore the trees original structure upon clearing search.

Natural resource Depletion Survey link:
https://forms.gle/ThcwnYBoNvBs4iyk8