Category: javascript

Category Added in a WPeMatico Campaign

I am calling a authentication token using an api call but it keeps returning new tokens

I am sending an api call to cognito to get a jwtToken in return. I am using hooks for the API call but the issue is that I am getting infinite number tokens in return as the API call keeps getting data.

useEffect(() => {
    Axios.post(`${apiUrl}/api/auth/login`, loginInfo).then((res) =>
      setToken(res.data.accessToken.jwtToken)
    );
    Axios.get(getEventsUrl, config).then((response) =>
      setEventsData(response.data)
    );
  }, [loginInfo]);

How do I end only one request?

Add div just below the td.button that called it

I have a table with some information, one of the columns has a button that when clicking displays a div, I need this div to be displayed below the td.button that invoked it

https://jsfiddle.net/L4jh0rsw/23/

I would like to use Jquery and/or JavaScript for the resolution

<html>
<table border="1">
<tr>
  <th>Button</th>
  <th>Column 1</th>
  <th>Column 2</th>
  <th>Column 3</th>
  <th>Column 4</th>
</tr>
<tr>
  <td class='class'>X</td>  
  <td>information</td>
  <td>information</td>
  <td>information</td>
  <td>information</td>
</tr><tr>
  <td class='class'>X</td>  
  <td>information</td>
  <td>information</td>
  <td>information</td>
  <td>information</td>
</tr><tr>
  <td class='class'>X</td>  
  <td>information</td>
  <td>information</td>
  <td>information</td>
  <td>information</td>
</tr><tr>
  <td class='class'>X</td>  
  <td>information</td>
  <td>information</td>
  <td>information</td>
  <td>information</td>
</tr>
</table>
</html>

<br>

<div id="div" style="display: none">
  information about that rowxcolumn
</div>

$(".class").on("click", function(){ 

    $("#div").show();   
  
});

Convert Javascript Date object to Excel serial number

So I have a Javascript date object with year, month, days, hours, minutes, seconds, and milliseconds data and I need to convert this object to an Excel serial number but I didn’t find a way to do that.
I found how to convert only a Date object but the way I found didn’t consider the time part.

Any suggestions?
Thank you,
Regards.

Axios POST request on iOS device times out but works fine on desktop

I’m working on a Nuxt JS application that uses the axios nodule and am experiencing a strange problem that appears to be intermittent but appears to only be happening on iOS devices and wondered if there’s any thing specific I could be checking.

My form submits data to a Laravel API and waits for a response, I’ve got a 50 second timeout baked into my client-side post request for axios and using the Laravel Telescope package I can see that the request was handled successfully and did return a response, despite this the client-side code still timed out.

My suspicion thus far is network or iOS/device/platform changes:

// submit application
this.$axios.post(`${this.$config.apiUrl}/api/application`, this.$store.state.application.application, {
  timeout: 50 * 1000
}).then(res => {

  // invalid (shows error screen and messages)
  if (!this.applicationSubmissionIsValid(res.data)) {
    return
  }

  // SUCCESS!
  this.configureApplicationPolling(res.data.threadID, res.data.check_frequency)
}).catch(err => {
  const status = err.response ? err.response.status : null
  this.setSubmissionErrors(4, status)
}).finally(() => {
  window.scrollTo(0, 0)
  this.meta.isSubmittingApplication = false
  this.meta.applicationSubmitted = true
})

Findings so far:

  • I’ve tried connecting my phone to my macbook and inspect the element, there’s no status code returned.
  • Out of a dozen attempts on iOS, it has worked once whilst continuing to work just fine on other devices
  • Requests handled correctly by the back-end
  • I’ve also had the timeout for the

Not sure what else to check

Looping eventListener?

Hi you guys I’m new to JS and programming in general. Just started learning and was wondering out of curiosity is there a way to loop through click eventListener. So Each time I click on my h1 header with a title id I get the innerHTML changed kind of like a infinite shuffle ?

const element = document.getElementById("title");


element.addEventListener("click", function(){
    element.innerHTML = "Cool Right?";

    element.addEventListener("click", function(){
        element.innerHTML = "SoundPad";
    });
});

Pass data of dropped files inside a div to another page

document.getElementById('drag_drop').ondrop = function(event)
{
    event.preventDefault();

    var form_data  = new FormData();
    var drop_files = event.dataTransfer.files;

    for(var count = 0; count < drop_files.length; count++)
        form_data.append("images[]", drop_files[count]);

    var ajax_request = new XMLHttpRequest();

    ajax_request.open("post", "upload.php");
    ajax_request.send(form_data);
}
#drag_drop{
  background-color : #f9f9f9;
  border : #ccc 4px dashed;
  line-height : 250px;
  padding : 12px;
  font-size : 24px;
  text-align : center;
}
<div id="drag_drop">Drag & Drop File Here</div>

This code allow you to upload files using the “drag and drop” function: I drop the files in the apposite div (#drag_drop) and with JS I create a POST request to the PHP file that will upload the files…

What I want to do is that as soon as the user drops the files redirect to ANOTHER html page containing the script and then send the request to the PHP file.
I have no idea how not to lose the data of the files dropped inside the div during the page change (maybe inserting form_data/drop_files in a localstorage item… (?)).

NO JQUERY.

Non-monotonic line chart

I’ve created a linechart in ExtJS but came accross an obstacle. I want to create a line chart that doesn’t go to each next point in a Monotonic fashion.
Let’s say I have the following dataset:

let testData = [{
        price: 500,
        date: '01-01-2021'
    }, {
        price: 200,
        date: '01-02-2021'
    }, {
        price: 1000,
        date: '02-09-2021'
    }];

When using this data in an ExtJS linechart it will create a diagonal line between the price of 200 and 1000, this data representation is incorrect since the price did not gradually rise in this time.

My question is: How can I achieve this using ExtJS charts?

Check the visual examples for the current and desirable result.

Please let me know if you need any extra information.

Monotonic (current result):
Monotonic linechart

Non-monotonic (Desirable result)
Non-monotonic

Javascript array in external file?

I have a large profanity list, as an array. Since this list is so big, I don’t want it in my main file, but externally. I want something like this:

const blacklist = require(./blacklist.js)

And currently it is something like this:

const blacklist = [
"1",
"2",
"3"
]

The rest of the code here is:

 blacklist.forEach((word) => {
      if (message.content.toLowerCase().includes(word));
      message.delete();
      message.channel.send("Let's try to keep it family friendly!");

And will that last piece of code still work?

Conditional data view in datatable to user

I am designing attendance report at the moment using Datatable. Some column have to be hidden or shown to some users.

Condition : If date mentioned in table header matches with current date, then only current user who logged in would be able to login and see only that table column, other columns with other dates should be hidden.
But no clue. I am at beginner level in JS. Please help.

CSS Position Material UI Menu item below its parent

I’ve got a Material UI dialog that contains nothing but some text and an Icon with a Menu options dropdown. The demo can be seen here: https://codesandbox.io/s/prod-rain-1rwhf?file=/src/App.js

I’m trying to position the Menu component so that it appears just below the Settings component. I’ve specified a position: relative on the parent element (i.e. the Settings Icon) as well as a position: absolute with top: -10px to the child element (i.e the Menu component), but that doesn’t seem to work.

How can I set it up so that when the Settings icon is clicked, the Menu appears directly below the Settings, as well as when the window is resized so that the Menu follows?

How to get list of files in directory in git repo hosted on GitHub? [duplicate]

I have a repo jcubic/gaiman on GitHub. And I need to get a list of examples as a list (files in directory):

https://github.com/jcubic/gaiman/tree/master/examples

I’ve searched but was not able to find anything on how to get a list of files on GitHub. it should be a pretty common task to do.

I need this inside JavaScript hosted on GitHub pages at https://gaiman.js.org/ so I can list examples in a dropdown.

Add div below the td.button that called it [closed]

I have a table with a column that has an animated button.

When clicking on this animated button, an ajax request occurs to load information regarding the id of that entity.

The information is stored and added in div which has a table!

My problem is: I would like this div to appear just below the td.button that invoked it, at the moment I just put it below the main table as you can see in the images below.

enter image description here

enter image description here

How could I put this div below the td.button that called it? using js and/or jquery

Window is not defined in node.js, sigma.js and typescript environment

I try to setup a sigma.js project with node.js written in TypeScript. The following reference error occurs after starting the node.js server with:

ts-node index.ts

The error seems to occur directly within the sigmautilsindex.js.

<nodejsproject>node_modulessigmautilsindex.js:125
    if (typeof window.devicePixelRatio !== "undefined")
    ^
ReferenceError: window is not defined
    at getPixelRatio (<nodejsproject>node_modulessigmautilsindex.js:125:5)
    at Object.<anonymous> (<nodejsproject>node_modulessigmasigma.js:52:45)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (<nodejsproject>node_modulessigmaindex.js:14:31)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)

I tried to setup the typescript configuration as follows:

package.json

{
  ...
  "main": "index.ts",
  "scripts": {
    "dev": "nodemon ./index.ts",
    "test": "echo "Error: no test specified" && exit 1",
    "start": "ts-node index.ts"
  },
  "dependencies": {
    "@types/sigmajs": "^1.0.28",
    "express": "^4.17.2",
    "fs": "^0.0.1-security",
    "graphology": "^0.23.2",
    "graphology-components": "^1.5.2",
    "graphology-layout": "^0.5.0",
    "graphology-layout-forceatlas2": "^0.8.1",
    "papaparse": "^5.3.1",
    "path": "^0.12.7",
    "sigma": "^2.1.3",
    "xhr": "^2.6.0"
  },
  "devDependencies": {
    "@types/express": "^4.17.13",
    "tslint": "^6.1.3",
    "typescript": "^4.5.5"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist",
    "lib": ["dom"]
  },
  "lib": [
    "es2015"
  ],
  "exclude":[
    "./node_modules"
  ]
}

The error is raised after instantiation of Sigma to draw the graph:

router.get('/', (request, response) => {
    
    response.sendFile(path.join(__dirname+'/views/index.html'));
    
    const file = fs.createReadStream(fileLocation);
    
    //Metadata were loaded and parsed
    Papa.parse<{ original_table: string; referenced_table: string }>(file, {
      download: true,
      header: true,
      delimiter: ';',
      complete: (results) => {
        const graph: Graph = new Graph();
            
        //Build the node with their entities as nodes
        results.data.forEach((line) => {

        /* process loaded data to create the graph */

        //Draw the graph within the browser
        const container = document.getElementById("network-container") as HTMLElement;
        
        new Sigma(graph, container); //error occurs right here
      },
    });
});