Category: javascript

I need to affect some branding tweaks on an embedded DocuSign form & for the life of me I can’t find any actual documentation on the front-end bundle referred to here:

https://developers.docusign.com/docs/esign-rest-api/esign101/concepts/embedding/#docusign-js

Specifically, I need to change the wording on the other buttons (aside from style.signingNavigationButton.finishText which is in all the examples).

Searching the internet and combing DocuSign’s dev documentation for hours.

The page, link, for Instagram API requires to do a lot. Could anyone provide any URL, blog or information with minimal steps to request Instagram access token, post images and get the insights of the same.

My project ( https://github.com/Aleksandr-P/django-audio-recorder2024 ) works well on a local computer under Windows 10.
If I run by:
python manage.py runserver

After making changes in the file ..web_projectsettings.py:

ALLOWED_HOSTS = []

to:

ALLOWED_HOSTS = ['*']

And run server by:

python manage.py runserver 0.0.0.0:80

JavaScript stops working.

How to fix it?

I checked in the browser, the file
audio_recorderstaticaudio_recorderrecorder.js
available. But it doesn’t work.

I am trying to follow a React Documentation for leaning ReactJS.
While coding I came upon this problem.

What should I do here to make the JavaScript part get highlighted? The code is working fine.

I have a very basic Cypress component test that intercepts an API request. The request response includes the URL of an image which is rendered in the component being tested. This response is saved as a state object called selectedLogo, and the src of the image being displayed is taken from the value of selectedLogo.url. I’ve saved a copy of the image to the fixtures folder – how do I get Cypress to display it in place of the original one?

This is the test:

import React from 'react';
import Logo from '../../src/logo/logo';

const allApiInterceptors = () => {
  cy.intercept('/logos/123456', {
    id: 5295911,
    url: '../fixtures/Banner.jpg' // this doesn't work
  });
};

describe('Logo', () => {
  beforeEach(() => {
    allApiInterceptors();
  });
  it('mounts', () => {
    cy.mount(<Logo />);
  });
});

In the React component being tested, a state object is created:

const [selectedLogo, setSelectedLogo] = useState(null);

The response to the API request is saved to the state object:

setSelectedLogo(response);

An image in the component picks up it’s src from the state object:

{selectedLogo && (
   <img src={selectedLogo.url} />
)}

I am currently working on a website project where I need to detect if a user is using the Edge browser with Copilot enabled and Context Reading enabled. (This feature allows Copilot to access the website content of the pages that are open inside the browser).

Does anyone have any idea how to detect this? I have researched and tested various fingerprinting methods with the result that I cannot find any parameters that change with an active Copilot. Maybe anybody has an idea?

Any advice would be appreciated, thanks in advance!

firebae.jsx

import { initializeApp } from "firebase/app";
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";


const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth();

export const register = async (email, password) => {
  const { user } = await createUserWithEmailAndPassword(auth, email, password);
  return user;
};

export default app;

.env.development

 REACT_APP_API_KEY= A*************

how can i described process. it s give me error message. i cant fix it it.

const post = useSelector((state) => state.posts.searchResults)
    const dispatch = useDispatch()
    const navigate = useNavigate()
    const classes = useStyles()
    const {id} = useParams()

    console.log(typeof id)

    if(id) {
      console.log("hello")
      dispatch(getPost(id))
    }

    useEffect(() => {
      console.log("useEffect triggered with id:", id);
      if (id) {
          console.log("Dispatching getPost action...");
          dispatch(getPost(id));
      }
  }, [id,dispatch]);
    console.log("thiis is inside the postdetila",post)
  return (
    <>
    <div className={classes.card}>
        <div className={classes.section}>
          <Typography variant="h3" component="h2">{post.title}</Typography>
          <Typography gutterBottom variant="h6" color="textSecondary" component="h2">{post.tags && post.tags.map((tag) => `#${tag} `)}</Typography>
          <Typography gutterBottom variant="body1" component="p">{post.message}</Typography>
          <Typography variant="h6">Created by: {post.name}</Typography>
          <Typography variant="body1">{moment(post.createdAt).fromNow()}</Typography>
          <Divider style={{ margin: '20px 0' }} />
          <Typography variant="body1"><strong>Realtime Chat - coming soon!</strong></Typography>
          <Divider style={{ margin: '20px 0' }} />
          <Typography variant="body1"><strong>Comments - coming soon!</strong></Typography>
          <Divider style={{ margin: '20px 0' }} />
        </div>
        <div className={classes.imageSection}>
          <img className={classes.media} src={post.selectedFile || 'https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png'} alt={post.title} />
        </div>
      </div>
    </>
  )
}

export default PostDetails

When user clicks on it get user to next page based upon id, when i use useffect hook for performing that action, useffect effect fails to run. Can be achieved using only ‘if state’ or i can directly dispatch the action, however the drawback of using is server is getting crashed and redux state are not overwriting, there might be some bug or error in the logic.

const initialState = {
    isDeleted: false,
    posts: [],
    searchResults : [],
    isLiked: false,
    currentPage: null,
    numberofPages: null

}

const postSlice = createSlice({
    name: 'posts',
    initialState,
    reducers: {
        setPosts(state, action) {
            state.posts = action.payload.data
            state.currentPage =  action.payload.currentPage
            state.numberofPages = action.payload.numberofPage
        },

        setPost(state,action) {
            console.log("Payload received:", action.payload);
            state.searchResults = action.payload;
        },
        
});

export const { setPosts, setPost } = postSlice.actions;
export default postSlice.reducer;

export const getPost = createAsyncThunk('posts/id/getPost', async (id, { dispatch }) => {
    console.log("idk dummy qwertyuiop",id)
    try {
        
        const { data } = await fetchPost(id);
        dispatch(setPost(data));
        console.log("see i'm side the redux reducer of serach posts joijsdfdjasdjdfjksdfjk",data)
    } catch (error) {
        console.log(error.message);
    }
});


export const getPosts = createAsyncThunk('posts/getPosts', async (page, { dispatch }) => {
    console.log("see i'm side the redux reducer of serach posts joijsdfdjasdjdfjksdfjk")
    try {
        
        const { data } = await fetchPosts(page);
        dispatch(setPosts(data));
        console.log(data)
    } catch (error) {
        console.log(error.message);
    }
});

How to handle server crashs or is there any other way to handle useffect hook?

I am attempting to read the data from this URL:

https://environment.data.gov.uk/flood-monitoring/id/measures/681210-level-stage-i-15_min-m/readings?_sorted&_limit=3

The URL returns:

{
   "@context":"http://environment.data.gov.uk/flood-monitoring/meta/context.jsonld",
   "meta":{
      "publisher":"Environment Agency",
      "licence":"http://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/",
      "documentation":"http://environment.data.gov.uk/flood-monitoring/doc/reference",
      "version":"0.9",
      "comment":"Status: Beta service",
      "hasFormat":[
         "http://environment.data.gov.uk/flood-monitoring/id/measures/681210-level-stage-i-15_min-m/readings.csv?_sorted&_limit=3",
         "http://environment.data.gov.uk/flood-monitoring/id/measures/681210-level-stage-i-15_min-m/readings.rdf?_sorted&_limit=3",
         "http://environment.data.gov.uk/flood-monitoring/id/measures/681210-level-stage-i-15_min-m/readings.ttl?_sorted&_limit=3",
         "http://environment.data.gov.uk/flood-monitoring/id/measures/681210-level-stage-i-15_min-m/readings.html?_sorted&_limit=3"
      ],
      "limit":3
   },
   "items":[
      {
         "@id":"http://environment.data.gov.uk/flood-monitoring/data/readings/681210-level-stage-i-15_min-m/2024-02-15T12-15-00Z",
         "dateTime":"2024-02-15T12:15:00Z",
         "measure":"http://environment.data.gov.uk/flood-monitoring/id/measures/681210-level-stage-i-15_min-m",
         "value":1.043
      },
      {
         "@id":"http://environment.data.gov.uk/flood-monitoring/data/readings/681210-level-stage-i-15_min-m/2024-02-15T12-00-00Z",
         "dateTime":"2024-02-15T12:00:00Z",
         "measure":"http://environment.data.gov.uk/flood-monitoring/id/measures/681210-level-stage-i-15_min-m",
         "value":1.05
      },
      {
         "@id":"http://environment.data.gov.uk/flood-monitoring/data/readings/681210-level-stage-i-15_min-m/2024-02-15T11-45-00Z",
         "dateTime":"2024-02-15T11:45:00Z",
         "measure":"http://environment.data.gov.uk/flood-monitoring/id/measures/681210-level-stage-i-15_min-m",
         "value":1.058
      }
   ]
}

I am using this to loop through the records from the items section:

let url = "https://environment.data.gov.uk/flood-monitoring/id/measures/681210-level-stage-i-15_min-m/readings?_sorted&_limit=3";

var request;
if(window.XMLHttpRequest) {
    request = new XMLHttpRequest();
} else {
    request = new ActiveXObject("Microsoft.XMLHTTP");
}

request.open('GET', url);
request.onreadystatechange = function() {
    if ((request.status === 200) && (request.readyState === 4)) {
        var info = JSON.parse(request.responseText);
        var output = "";
        for (var i = 0; i <= info.items.length-1; i++) {
            for(var key in info.items[i]) {
                console.log(info.items[i]['value']);
            }
        }
    }
}

request.send();

The following is written to the console:

1.043
1.043
1.043
1.043
1.05
1.05
1.05
1.05
1.058
1.058
1.058
1.058

I presume that’s because each record in the item contains 4 elements / attributes (sorry I don’t know the correct term to use) – for example:

"@id":"http://environment.data.gov.uk/flood-monitoring/data/readings/681210-level-stage-i-15_min-m/2024-02-15T12-00-00Z",
"dateTime":"2024-02-15T12:00:00Z",
"measure":"http://environment.data.gov.uk/flood-monitoring/id/measures/681210-level-stage-i-15_min-m",
"value":1.05

How could I change the loop so that only 3 records are returned, accessing the value attribute only?

I would prefer to use vanilla JS rather than jQuery.

Sorry for not knowing the answer, I will probably be downvoted for that. I have spent all morning trying to work it out but I have not been able to.

Background- A beginner at JavaScript, who works with CRM platforms.

Requirement: Based on a look up field value on a form show a tab on the form within a entity in a CRM application, else hide the form.

I managed to achieve this in different ways, but I am trying to understand the best practice when writing the code.

Please see both my code examples below. Is it better to use variables to check if a value is null? Or is it better just check the value is null in the IF statement?

Code Snippet One

function ShowHideTabs(executionContext) {
    var formContext = executionContext.getFormContext();
    var tab = formContext.ui.tabs.get("showhidetab");

    //Check Tab Exisits On The Form

    if (tab == null || tab == undefined) return

    if (formContext.getAttribute("dp_lookup").getValue() != null && formContext.getAttribute("dp_lookup").getValue()[0].id === "{FC52C2B5-3ECB-EE11-9079-000D3A4B4D34}")
    {
        tab.setVisible(true);
    }
    else {
        tab.setVisible(false);
    }
}

Code Snippet Two

function ShowHideTabs(executionContext) {
    var formContext = executionContext.getFormContext();
    var tab = formContext.ui.tabs.get("showhidetab");
    var LookupID = formContext.getAttribute("dp_lookup").getValue();

    // Check Lookup ID Exisits 
    if (LookupID == null || LookupID == undefined) {
        tab.setVisible(false)
        return;
    }

    var LookupIDValue = LookupID[0].id;

    //Check Tab Exisits On The Form

    if (tab == null || tab == undefined) return;


    if (LookupIDValue === "{FC52C2B5-3ECB-EE11-9079-000D3A4B4D34}") {
        tab.setVisible(true);
    }
    else {
        tab.setVisible(false);
    }
}

I don’t have any idea what programming language the ServiceNow application is using. However, I am trying to create a knowledge base in ServiceNow wherein it has link to an excel file, in which stored in a document management software (iManage), then once the use clicks the “download” link, the excel file should be downloaded instead on opening in a new window.

The screenshot attached shows what the knowledge base looks like which showing the “Download” link.
enter image description here

This is the code that I have only. I am not sure, but I think, the ServiceNow is using Javascript as programming language.

<p>Job Information Change Mass Upload Template - <a href="https://emea-bm.imanage.work/work/web/r/libraries/EMEA_DMS/folders/EMEA_DMS!9377538?p=1&amp;selectedItem=EMEA_DMS!436639153.1/" target="_blank" rel="noopener noreferrer nofollow">Download</a></p>

With these codes, once I click the “Download” link, it will open in a new window, but it’s just literally viewed the file. However, I wanted the file to be downloaded and will not open to view.

I am sorry for asking all your expert help. But I am not really a programmer. Hope you could help me. Thank you so much!

I can’t seem to format my array that is being saved to localStorage.
Can you change the index value of an array?
I have an array object like this:

const myArray = [{id: 41, name: "x"}, {id: 42, name: "y"}]

But I want to make it like this:

const myArray = [ 41: {id:41, name:"x" }, 42: {id:41, name:"y" }}

So the id of the object becomes the index of the array

If that is not possible then like this should be fine:

const myArray = [ {41: {id:41, name:"x"} }, {42: {id:41, name:"y"}}]

So basically the id of the object becomes either the index or a container object for that object.

The why:
On Messenger, when I’m done with a partucilar convo for the time being, I remove it from main list by archiving, to only keep unanswered messages visible, but it gets tedious doing it manually, I’d rather run a bookmarklet script that autoarchives a certain number of read messages one by one.

The how:
The archiving button is in a context menu, that appears after pressing “3 dot button”, which itself apears after a mouseover on the message element.

I don’t know how to

1. simulate mouseover on the element so that the “3 dot button” appears
2. locate and click that button to show context menu

How to switch between lottie animations without “blank” lag?
When i anim.destroy() and create new animation, my animated character disappears for a second. How to fix that?

function play_anim_win() {

    let anim = lottie.loadAnimation({
        name: "pig3",
        container: document.getElementById('piggy-visual'),
        renderer: 'svg',
        loop: false,
        autoplay: false,
        path: "/anim/pig3.json"
    });

    anim.addEventListener('complete', function() {
        anim.destroy();
        play_anim_sleep();
    })
}

function play_anim_sleep() {

    let anim = lottie.loadAnimation({
        container: document.getElementById('piggy-visual'),
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: "/anim/pig1.json"
    });
}

I want to create a fade in/out carousel. Everything works fine but the image appears instantly instead of fading in

// JavaScript for the fade carousel
const slides = document.querySelectorAll('.carousel-slide');
let currentSlide = 0;

// Show the first slide initially
slides[currentSlide].style.display = 'block';

function nextSlide() {
  slides[currentSlide].style.display = 'none';
  currentSlide = (currentSlide + 1) % slides.length;
  slides[currentSlide].style.display = 'block';
}

// Automatically switch slides every 3 seconds
setInterval(nextSlide, 3000);

.carousel-container {
  position: relative;
  max-width: 600px;
  margin: auto;
  overflow: hidden;
}

.carousel-slide {
  display: none;
  width: 100%;
  height: 100%;
}

<div class="carousel-container">
  <img class="carousel-slide" src="https://fakeimg.pl/600x200?text=Nurses" alt="Slide 1">
  <img class="carousel-slide" src="https://fakeimg.pl/600x200?text=Barbers" alt="Slide 2">
  <img class="carousel-slide" src="https://fakeimg.pl/600x200?text=Receptionist" alt="Slide 3">
</div>