Category: javascript

I made a powerpoint presentation & converted it to HTML at https://www.idrsolutions.com/online-powerpoint-to-html5-converter
The output html page on the mentioned site looks perfect for me.
But after I downloaded zip and put the contents on my new site (Ubuntu & PHP7 fresh install) I don’t see the blue background.
My site is https://castaneda.su/DK/221023
I tried to make these steps for my another site https://alpin52.ru/221023 (preconfigured by host provider) and the look is as required.
I think the problem is that I missed installing some component on the server. But I cannot figure out which. Thanks.

in trying to create a page that will show the current time which will refresh every x seconds – x is a user input
i use setInterval and clearInterval but it looks like the clearInterval doesn’t have any effect at all 🙁
here’s the code:

 <script>
      let changeTime = () => {
        let secs = document.getElementById("sec").value * 1000;
        clearInterval(timer);
        let timer = setInterval(() => {
          let d = new Date();
          document.getElementById("example").innerHTML = d.toLocaleString();
          console.log(secs);
        }, secs);
      };

      function clear() {
        clearInterval(timer);
      }

      //both functions are called with an onChange event

thanks!

const [stuff, set_stuff] = useState("a")


...

set_stuff("a")

when set_stuff("a") is run, will it trigger downstream?

I am sending messages to users through Nodejs. If any message contains & symbol it is breaking the message.
E.g.
Terms & condition
and here is some other text

Users accepting only Terms. The rest of the messages were not sent.

   <input type="checkbox"   id="confirm"> I have read and agree to this disclaimer as well as 
   <p class="d-none text-danger">Please read and agree to this disclaimer 
   above.</p>
   
   <button type="button" class="close" >Continue</button>

if does not checked checkbox then click on button the get error of p text and if checked the
checkbox then click on button then close popup

My React app was working quite fine until I unknowingly included a commit that modified package.json.lock. Serving the application then threw up this error on the Cloud Run instance:

I’ve tried various was to unblock this problem all to no avail. I’ve even reverted to the commit that worked before this error and it still doesn’t serve properly.
What makes it even more surprising is that it works locally.
I’ll appreciate some help. Thanks.

It seems to kinda work, but it won’t load the picture

let element2 = document.getElementById("button3"); 
element2.addEventListener("click", () => {
let cat_result = document.getElementById("cat_result");
fetch('https://aws.random.cat/meow')
.then(res => res.json())
.then(data => {
cat_result.innerHTML = '<img src="${data.file}"/>'
    })

});

I have a Json let obj = {"a": "1", "b" : "2"} which contain whitespaces. I want to serialize the obj without removing the whitspaces, So that when i deserialize (EX: using JSON.parse()), i should be able to get the obj in same format.

let obj = {"a":   "1",  "b" :    "2"};
let serialized_obj = JSON.stringify(obj);
//then we get  serialized_obj  = "{"a":"1","b":"2"}" , this shouldn't happen.

What is Expected?

let obj = {"a":   "1",  "b" :    "2"};
let serialized_obj = serializationMethod(obj);
// expected to get serialized_obj  = "{"a":   "1",  "b" :    "2"}"
let deserialized_obj = deserializationMethod(serialized_obj);
//expected to get serialized_obj  = {"a":   "1",  "b" :    "2"}

Require the methods serializationMethod() and deserializationMethod()

More Details
For security reasons i get the JSON object and the digital signature of the serialized object. i have to verify the both. I can get these from any of the technology user. But the problem i faced is, in python serialization the json is beautified with whitespaces. So when i get them, i am not able to keep the format i got and verificaton fails.

I am using javascript fetch-api to read a random file from a folder.When two different clients need two different random files, (the random files should not be the same). How can I acheive this?

I am learning Angular JS. I am trying to create a mock portal that displays Daily Messages. I have stored my daily messages in a database table.

create table DailyMsg(Sno int primary key, msg varchar(max));

Then I created a service using factory in AngularJS.

 public class DailyMsgsController : Controller
    {
        private amenEntities1 db = new amenEntities1();

        // GET: DailyMsgs
        public ActionResult Index()
        {
            return Json(db.DailyMsgs.ToList(),JsonRequestBehavior.AllowGet);
        }
}

        

I tested the URL and it works fine, it returns the expected data in the JSON format

https://localhost:44329/DailyMsgs

Now, I wanted to display this data on my HomePage. But it doesn’t work. On inspecting the page it shows me the error

Error: $http:badreq
Bad Request Configuration
Http request configuration url must be a string or a $sce trusted object.  Received: undefined

My Controller

var myApp = angular.module('myApp', []);

//Daily Messages Service Function
myApp.factory('DailyMsgService', function ($http) {
    DailyMsgObj = {};
    DailyMsgObj.DisplayDailyMsg = function () {

        var Msg;

        Msg = $http({method: 'GET', URL: '/DailyMsgs/Index'}).
            then(function (response){
            return response.data;
        });

        return Msg;
    }

    return DailyMsgObj;
});



myApp.controller('HomePageController', function ($scope, DailyMsgService) {
    DailyMsgService.DisplayDailyMsg().then(function (result) {

        $scope.DailyMsg = result;

    });
});

My HomePage

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <title></title>

</head>
<body>
    <div ng-controller="HomePageController">
        {{DailyMsg}}
    </div>

</body>
</html>
<script src="../Scripts/angular.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<script src="../AngularControllers/HomePageController.js"></script>

I know that there is a plugin for doing this in cypress already. However using it with jar files just corrupts the file and therefore it is useless in my usecase. This is really weird because i tried it with every combination of encoding and it still does not work. Works perfectly fine with other filetypes however.

This is the code i am using (works except with jar files).

cy.get('[data-cy="dropzone"]')
  .attachFile('test.jar', { subjectType: 'drag-n-drop' });

I know that you can perform post requests in cypress. Is it possible to perfom the file upload with it after clicking the dropzone element?

In my list, when I click on row, the background of the changes color and the id of my row is added to the array of my state. It works, but when I do the reverse my array doesn’t get empty when I use the filter function (line 15).

import React, {useState} from 'react';
import './Liste.css';
import Button from '../Button/Button';

function Liste(props) {

    const [nbLine, setNbLine] = useState([]);

    const clickLine = (e) =>
    {
        if (e.target.parentNode.className.length > 0)
        {
            console.log(e.target.parentNode.id);
            e.target.parentNode.classList.remove("lineClicked");
            nbLine.filter(line => line != e.target.parentNode.id);
            console.log(nbLine);         
        }
        else
        {
            e.target.parentNode.classList.add("lineClicked");
            nbLine.push(e.target.parentNode.id);
            console.log(nbLine);
        } 
    }

    const doubleClickLine = () =>
    {
        console.log("doubleClickLine"); 
    }

    return (
        <>
            <table className='tableList'>
                <thead>
                    <tr>
                        {props.headers.map((header, h) =>
                            <th key={h}>{header}</th>                   
                        )}
                    </tr>
                </thead>
                <tbody>
                    {props.records.map((record, r) =>
                        <tr key={r} id={props.table+"_"+record[0]} onClick={clickLine} onDoubleClick={doubleClickLine}>
                            {props.columns.map((column, c) =>
                                <td key={c}>{record[column]}</td>      
                            )} 
                        </tr>                
                    )}
                </tbody>
                <tfoot>
                    <tr>
                        <th colSpan={7}>
                            {props.buttons.map((button, b) =>
                                <Button key={b} id={button[0]} type={button[1]} value={button[2]} click={button[3]}/>              
                            )}
                        </th>
                    </tr>
                </tfoot>
            </table>
        </>
    )
}

export default Liste;

Here is the screen when I click (the elements are in the table).
Note: the data is fictitious.

And here is the screen when I click again (the elements resent in the array).

And here is the screen when I click again (the elements resent in the array).

Why is the filter function not working?

I’ve got an array of dates (strings) in sorted order, going from oldest to latest days, like so:

const allDates = [
  '2020-11-21',
  '2020-11-22',
  '2020-11-23',
  '2020-12-21',
  '2020-12-22',
  '2020-12-23',
  '2021-01-21',
  '2021-01-22',
  '2021-01-23',
  '2021-02-21',
  '2021-02-22',
  '2021-02-23'
];

What I want to create is a new array with the oldest date from the oldest month, any dates from the middle months (could be the first date of each month) and the last date of the latest month, so the new array looks like this:

const filteredDates = ['2020-11-21', '2020-12-21', '2021-01-21', '2021-02-23']

The important thing is that I don’t want to use any JS library

So I am currently using Express as my defacto library for backend. But, I want to change. I have come across a lot of options like Fastify, Adonis, Koa & more. But, Express is a low-scope framework & I like its approach. But, while choosing a new framework, I am not sure if I should go for a full-fledged system like Adoni.

I have a component that returns the following code:

  <Popup
    toggled={moveFolderPopup}
    width="50%"
    close={() => setMoveFolderPopup(false)}
  >
    <div className="popup-title">
      {t('view.assets.moveFolderPopup.title')}
    </div>
    <div className="filebrowser-moveFolderPopup-hierarchy">
      {renderFolderStructure(indexFolder.id)}
    </div>
  </Popup>

The part that’s failing is renderFolderStructure(indexFolder.id)
The function looks as follows:

const renderFolderStructure = (parentId: string) => {
if (assetFolders !== []) {
  assetFolders.map((folder, i) => {
    if(folder.parentId === parentId) {
      console.log('why wont this work?');
      return <div>{folder.name}</div>;
    }
  });
} else {
  return <div>Error</div>;
}
};

Running this code the console prints out “Why wont this work?” 6 times for 6 folders that have matching parentIds. So everything works except that the function won’t return <div>{folder.name}</div>. I feel like I have done something like this a million times. What’s wrong here?