Category: javascript

Let’s supose I have a Toast (or Modal, or whateaver) component, and I want to render it doing something like:

return (
  <View>
    <TouchableOpacity onPress={() => Toast.show()}>
      <Text>Press</Text>
    </TouchableOpacity>
  </View>
);

I don’t want nothing else in my App component, just the import of the Toast, and the return with the button that calls the Toast rendering. Without, any conditional or state on my App component function, or any {Toast} (or {isVisible && } inside its return.

I know that is possible, because I already seen libraries like AntDesign (for React JS), which has the message component, that works like a function, you just calls message.success() in whateaver part of the code, and a Message is displayed in your screen, what should I do in my Toast component to get a similar result?

I want to embed a SCORM site in my application. Users can upload any SCORM content they have created, which will be stored in an S3 bucket and served through a CDN (CloudFront).

From a security perspective, I need the CDN alias to be a subdomain of the main site. This allows me to sign cookies for CDN authentication while blocking access to the main API cookies that are signed for the main domain. This precaution is necessary to prevent any malicious code that may be uploaded.

For example, let’s consider the following scenario: the main site is located at app.site.com, and it has cookies signed for domain=app.site.com to communicate with the inner API. The SCORM content is served from cdn.app.site.com, and the cookies for this subdomain are signed for domain=.app.site.com (note the dot at the start).

This setup works well, but it poses a challenge when trying to communicate with the SCORM API since the iframe that contains the SCORM is considered cross-origin with the main domain.

How can I communicate with the SCORM API on one hand and block access to the main API cookies on the other hand, without proxying the requests to a server (in order to leverage the CDN)?

hello i would like to know where could be a mistake in this is the code i get a error saying /home/runner/work/_temp/f7610f6f-2495-4196-8736-156d1c0a06ea.sh: line 1: syntax error near unexpected token `(‘
Error: Process completed with exit code 2.
im trying to get a mail when somebody presses a button on my website i have connected it with sendgrid but i still get the error please help thanks
this is the code
name: Email Notification

on:
push:
branches:
– main

jobs:
sendEmail:
runs-on: ubuntu-latest

steps:
  - name: Checkout repository
    uses: actions/checkout@v2

  - name: Set up Node.js
    uses: actions/setup-node@v2
    with:
      node-version: '16'

  - name: Install dependencies
    run: npm install

  - name: Install PowerShell
    run: |

      sudo apt-get update
      sudo apt-get install -y powershell
      pwsh --version  # Verify the installation

  - name: Capture form data
    id: capture-form-data
    run: |
      echo "::set-output name=data::$(echo '{"name": "'${{ env.INPUT_NAME }}'", "email": "'${{ env.INPUT_EMAIL }}'", "message": "'${{ env.INPUT_MESSAGE }}'"}')"

  - name: Send email
    env:
      TO_EMAIL: ${{ secrets.TO_EMAIL }}
      FROM_EMAIL: ${{ secrets.FROM_EMAIL }}
      SENDGRID_API_KEY: ${{ secrets.SENDGRID_API_KEY }}
    run: |
      const sgMail = require('@sendgrid/mail');

      sgMail.setApiKey(process.env.SENDGRID_API_KEY);

      const formData = JSON.parse(process.env.CAPTURE_FORM_DATA);

      const message = {
        to: 'spyfilip@gmail.com',  // Replace with your email address
        from: 'kontaktstranka@gmail.com',   // Replace with the sender email address
        subject: 'Form Submission',
        text: `A form submission was received:nnName: ${formData.name}nEmail: ${formData.email}nMessage: ${formData.message}`
      };

      sgMail.send(message)
        .then(() => {
          console.log('Email sent successfully');
        })
        .catch((error) => {
          console.error('Error sending email:', error);
        });

my loop doesn’t run, but the rest of the code runs.

const cards = document.getElementsByClassName("floating-cards");

console.log(randomcolor());

for (let i = 0; i < cards.length; i++) { 
    console.log(2);
    cards.style.backgroundColor = "rgb("+randomcolor()+","+randomcolor()+","+randomcolor()+")";
}

function randomcolor() {
    return Math.floor(Math.random() * 255);
}

I have generate the following the code where i am login with paypal but i got an error.Please let me known any help what’s wrong with my code.

  paypal.use( ['login'], function (login) {
      login.render ({
        "appid":"Here-i-put-my-client-from-get-paypal",
        "authend":"sandbox",
        "scopes":"openid",
        "containerid":"paypalLoginBtn",
        "responseType":"code id_Token",
        "locale":"en-us",
        "theme":"neutral",
        "buttonType":"LWP",
        "buttonShape":"pill",
        "buttonSize":"lg",
        "fullPage":"false",
        "returnurl":"https://russell-bike-adobe-collins.trycloudflare.com/admin/tracking"
      });
    });

I got an following error

Missing host query argument
Your app can only load if the URL has a host argument. Please ensure that it is set, or access your app using the Partners Dashboard Test your app feature

but i have check that i got correct parameters from login function like: code and id_token
then why it is get missing host query argument.

https://russell-bike-adobe-collins.trycloudflare.com/admin/tracking?code=&id_token=&scope=openid

hi Iam not good at javascript and have problem. I hope enyone can help me.
I want to get date from one input and change it to georgian and put it in another input.
and mix some code but didnt work

<input type="date" id="one" oninput="myFunction()">
<input  id="two">

<script>
window.onload = function() {
    var src = document.getElementById("one"),
        dst = document.getElementById("two");
        let text = src.toLocaleDateString('en-Us');
    src.addEventListener('input', function() {
        dst.value = text.value;
    });
};
</script>

thanks anyway

JSON return stored in data.userRegistrationDatas, how i search whole Object for email address and only match email address is can be stored in userRegistration.GridTableenter image description here

I tried forEach look . I want to search email address by entered email address in a JSON result and stored in Grid table

I’m using the wix-location module to redirect a Wix website page to an external page:

import wixLocation from 'wix-location'; 

$w.onReady(function () {
     wixLocation.to("http://www.my-new-url.com");
}) 

This waits for the page to load fully and then does a redirection. Is there a way to redirect without waiting for the whole page to load? Or alternatives to wixLocation.to()?

It isn’t a huge deal in my case because ended up clearing the entire Wix page of text/images so that it isn’t very obvious that the page loaded and then redirected; however, it would be nice if the redirection was faster and I was wondering if there’s any other way to do so.

Does anyone know how to display a £ sign in a confirm box in Javascript?

An example would be:

confirm("Please confirm price of £2.99")

When I try this the “£” sign is rendered as a ? in a black triangle?

const container= document.getElementById("container")
const path = document.getElementById("myPath")

path.onclick = (event) => {
    event.stopPropagation() // not working
    console.log("Path clicked !")
    }
    
container.onmousedown = (event) => {
    console.log("container clicked !")
    }

<div id="container">
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<path id="myPath" d="M10 80 Q 95 10 180 80" fill="none" stroke="black" stroke-width="5" />
</svg>
</div>

When I click to path not working event.stopPropagation(). I just want to run alert("Path clicked !"). But running both listeners. Where is problem in this codes ?

i used ajax for that , my item is being added in wishlist and remved also but color is not being changed . page is refreshing and color is set to default again.

i have passed data and fetching it from database.

   success: function (data) {
                        var heartIcon = $('a[data-data="' + linkData + '"] > i.fa.fa-heart');
                        if (data === '1') {
                            heartIcon.addClass("red-heart");
                        } else {
                            heartIcon.removeClass("red-heart");
                        }
                        console.log(data);

How to use jquery-connections library in angular application and use it in every files ?

Hi I have a requirement to connect the different div elements in my angular application using lines. I have identified that the jquery-connections npm package can do it.

Link : https://www.npmjs.com/package/jquery-connections

But I am unable to use it in my angular application. I have followed the below steps to use that library in my angular application:

step 1 : Installed the library using the command ‘ npm i jquery-connections ‘

step 2 : Added the jquery.connections.js file path in angular.json files scipts section as below :

angular.jaon file :

.
.
.
 "scripts": [ 
              "node_modules/@popperjs/core/dist/umd/popper.min.js",
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/jquery-connections/jquery.connections.js"
            ],
...

step 3 : reran the application using ng server command.

step 4 : In my component html may look loke below:

component.html file :

<div id="div1" class="border">I am one div</div>
<br /><br />

<button class="btn btn-primary">I am button</button><br /><br />

<div id="div2" class="border">I am second DIV</div>

step 5 : In my typescript file I tried to connect those two div elements according to the api document of ‘jquery-connections’ as below:

Link of Api documents of jquery-connections : https://github.com/musclesoft/jquery-connections/wiki/API

component.ts file :

import * as JQConnections from 'jquery-connections';

@Component({
  selector: 'componentSelector',
  templateUrl: '..component.html',
  styleUrls: ['...scss'],
})
export class component implements OnInit {

  ngOnInit(): void {
    JQConnections('#div1', '#div2').connections();
  }

This is what I have tried so far.

Problem :

When I the component get initialized the below erroe is displayed in the console :

re.js:6210 ERROR TypeError: jquery_connections__WEBPACK_IMPORTED_MODULE_5__ is not a function
 

So , someone please help to fix this issue and kindly let me konw, If I have done anything wrong.

If the approach is wrong then kindly tell me the correct procedure otherwise any alternative ways to acheive this behaviour in angular with ease.

Thanks in advance…

I have a problem. I need to download file with javascript. The problem is that I need to send POST request with http headers, so I can’t use tag or approach with form. Also, I don’t want to use ajax request, because I need to download very large file and I want to be shown default browser download progress. Is there a way to solve it?

A potential solution might involve modifying the backend to receive headers as query parameters, though this approach isn’t ideal. Given that I have the ability to configure NGINX to my liking, I wonder if there’s a method to convert query parameters into HTTP headers on the NGINX side. Also, I know about FileSystemWritableFileStream, and it seems as the best way, but it does not shows download progress too

I’m encountering a flashing problem randomly when switching between tabs in dark mode on my Tauri web app. The flash might be caused by the browser rendering or the operating system’s handling of tab switching. I suspect that the JavaScript code responsible for toggling between dark and light modes might be contributing to this issue. Secondly, the sidebar unexpectedly closes and opens again, during this weird bug.

Here’s an overview of the relevant Javascript:

const body = document.querySelector('body');
const sidebar = body.querySelector('nav');
const toggle = body.querySelector('.toggle');
const modeSwitch = body.querySelector('.toggle-switch');
const modeText = body.querySelector('.mode-text');

// Check if dark mode preference is stored in localStorage
const isDarkMode = localStorage.getItem('darkMode') === 'true';
// Check if sidebar preference is stored in localStorage
const isSidebarClosed = localStorage.getItem('sidebarClosed') === 'true';

// Set initial state based on stored preferences
if (isDarkMode) {
  body.classList.add('dark');
  modeText.innerText = 'Light mode';
} else {
  body.classList.remove('dark');
  modeText.innerText = 'Dark mode';
}

if (isSidebarClosed) {
  sidebar.classList.add('close');
} else {
  sidebar.classList.remove('close');
}

toggle.addEventListener('click', () => {
  sidebar.classList.toggle('close');
  // Store sidebar state in localStorage
  const isClosed = sidebar.classList.contains('close');
  localStorage.setItem('sidebarClosed', isClosed);
});

modeSwitch.addEventListener('click', () => {
  body.classList.toggle('dark');
  // Store dark mode state in localStorage
  const isDark = body.classList.contains('dark');
  localStorage.setItem('darkMode', isDark);

  if (isDark) {
    modeText.innerText = 'Light mode';
  } else {
    modeText.innerText = 'Dark mode';
  }
});

// Add the 'dark' class to the body element if dark mode preference is stored
if (isDarkMode) {
  body.classList.add('dark');
}

I would like to know if there’s a way to modify the JavaScript code or make any necessary adjustments to the CSS to mitigate the flashing issue and to ensure that the sidebar remains in its current state without closing and reopening. I want to ensure a smooth transition between tabs when in dark mode. Any insights or suggestions would be greatly appreciated and if you need any additional information or further clarification, please don’t hesitate to ask. Thank you!

As what I understand based on docs of next js with app router, I create a error.tsx page inside my app folder (app/[lang]/error.tsx) — the file consist the code that are shown in docs. also I have some api calls (fetch) inside a file in this route: src/api/categories/index.ts (because I want these apis call in server (SSG)) but if my api doesn’t resolve it shows me default error of next js like below:

but I don’t want this I need to show an error page for that. here is also my error page code:

"use client";

export default function Error({
 error,
 reset,
}: {
 error: Error;
 reset: () => void;
}) {
 console.log(error);
 return (
   <div>
     <h2>Something went wrong!</h2>
     <button onClick={() => reset()}>Try again</button>
   </div>
 );
}

I also tried to copy this file next to the index.ts (apis file) because as the docs says :

Next.js will forward the resulting Error object to the nearest
error.js file as the error prop

but dosn’t work. how can I do that?