Category: javascript

Category Added in a WPeMatico Campaign

How can I make texts highlightable in ExtJs?

I’m still finding my way around Extjs, I’m currently displaying text data to a UI like so:

reference: 'agentLogGrid',

    store: {
        xclass: 'Ext.data.ChainedStore',
        source: 'LogViewSource',
    },

    itemConfig: {
        viewModel: true,
    },

    columns: [{
        text: 'Timestamp',
        xtype: 'templatecolumn',
        tpl: '{timestamp}',
        flex: 1,
    }, {
        text: 'Data',
        xtype: 'templatecolumn',
        tpl: '{data}',
        flex: 1,
    }],...

But the texts are not highlightable, that means I can’t highlight them and copy, or select and copy. When I mouse over, the pointer sees it as a link, but I can’t highlight or select. How do I make just the {data} highlightable?

Register Vuex action after store has been created

When looking at registerModule in the vuex documentation it becomes clear, that one can register a whole module after a store has been created.
Looking further, it seems possible to add a new Set of actions, getters and mutations and keep the state with the option preserveState set to true.

However, the documentation does not cover the option to just add another action after a module has been registered and keep all the rest.

Has anyone run into the same problem at some point?

Why is it returning undefined for the month. JS date

var date = new Date();
var month = date.getMonth();
var arr = [
   'лютого',
   'березня',
   'квітня',
   'травня',
   'червня',
   'липня',
   'серпня',
   'вересня',
   'жовтня',
   'листопада',
   'грудня',
   'січня',
];

$('.rf_title').text('Данi оновлено ' + date.getDate() + ' ' + arr[month-1] + ' ' + date.getFullYear() +' о ' + (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':' + '' + (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()));

I’m confused as to why this is showing undefined. It worked fine up until New Years. As soon as 2022 hit it’s done for.enter image description here

How to Map a JSON File With IDs

How can I map and return the values “Title” in React, with a JSON file that contains an ID for each record? For example: 

{

"id001": {
      "Title": "Title-1",
      "Year": "1990",
      "Rated": "PG-13"
      },

"id002": {
      "Title": "Title-2",
      "Year": "1999",
      "Rated": "PG-13"
      },
      
...

}

Thank you so much!

Upload file through API with Javascript

Is it possible to upload a file using rest API to store this file in SharePoint library from a normal html page , I will be need to pass the access token as well “Authorization” : “Bearer token”

Here is the code I used but it gives error :

<html>
<input type="file" name="file" id="file">
<button onclick="doupload()" name="submit">Upload File</button>


<script>
function doupload() {
let data = document.getElementById("file").files[0];
let entry = document.getElementById("file").files[0];
console.log("doupload",entry,data)
fetch("https://test.sharepoint.com/sites/BM/_api/web/GetFolderByServerRelativeurl
("/sites/BM/BM_UPLOADS/")/Files/add(url=entry,overwrite=true)"
 + encodeURIComponent(entry.name), {method:"POST",body:data});
alert("your file has been uploaded");
location.reload();
};

</script>

How to number increment with limit

I am using number field with plus and minus for product quantity select for a project. I need to set a max limit when I press plus icon. I am using below code

$(document).ready(function() {
        $('.minus').click(function () {
            var $input = $(this).parent().find('input');
            var count = parseInt($input.val()) - 1;
            count = count < 1 ? 1 : count;
            $input.val(count);
            $input.change();
            return false;
        });
        $('.plus').click(function () {
            var $input = $(this).parent().find('input');
            $input.val(parseInt($input.val()) + 1 );
            $input.change();
           
            return false;
        });
    });

How to set a maximum limit for when i press + icon.

How to change one array same as another array

I have two arrays. I want compare modified array with original array and I want to change the modifid array same as the original array. position want to be same also

I expecting output is,

const modified = [
                          {label: 'cover1', formUid: 1045},
                          {label: 'cover2', formUid: 211},
                          {label: 'cover3', formUid: 204},
                          {label: 'cover4', formUid: 258},
                          {label: 'cover1', formUid: 1045},
  ]

but now I am getting like this,

const modified = [
                          {label: 'cover2', formUid: 211},
                          {label: 'cover3', formUid: 204},
                          {label: 'cover4', formUid: 258},
                          {label: 'cover1', formUid: 1045},
      ]

here is my try,

const original = [
                          {label: 'cover1', formUid: 1045},
                          {label: 'cover2', formUid: 211},
                          {label: 'cover3', formUid: 204},
                          {label: 'cover4', formUid: 258},
                          {label: 'cover1', formUid: 1045},
                           
                       ];
                       
      const modified = [
                           {label: 'cover4', formUid: 258},
                          {label: 'cover2', formUid: 211},
                          {label: 'cover3', formUid: 204},
                          {label: 'cover1', formUid: 1045},
                           {label: 'cover1', formUid: 1045},
      ]
    
    function testFunc(original , modified){
    let originalCopyForPosision;
  
    originalCopyForPosision = [...original];
         
         modified.forEach((element,idx) => {
             
              let targetIndex = originalCopyForPosision.findIndex(e => e.formUid === element.formUid)
             
              if(idx === targetIndex){
              return
              }else{
             
                if(targetIndex > 0){
                  modified.splice(targetIndex,  1);
                  modified.splice(idx,0,element);
                }
               
              }
    
         })
    
    document.getElementById("originalArray").innerHTML = JSON.stringify(original);
    document.getElementById("modifiedArray").innerHTML = JSON.stringify(modified);
    
    }testFunc(original,modified)

import class in typescript is throwing an error

Trying to import class in the file and it is throwing an error it might be quick fix i would appreciate the help.

class.ts

export class Cache {
    private cache: CCache;
    public async getCache(tokenId: string): Promise<any> {
        // add logic here 

        return memberInfo;

    }

}

otherFile.ts

    import { Cache } from "./class.ts";
        public before(args: any) {
        let specialtyCache: any;
        specialtyCache =  new Cache().getCache(args.token);
}

Error

Constructor of class 'Cache' is private and only accessible within the class declaration.ts

Javascript regex replace character if preceded AND followed by a letter

Basically I am working with a string that is a json string and I would like to turn it into a real json (by using the JSON.parse()) but there are some quotation marks in the middle of the sentences.

Example: ‘{“author”: “Jonah D”Almeida”, … }’
(I want to replace the one in between D and Almeida)

As it already has quotation marks around the whole sentence, javascript gives an error because it can’t create a json out of it and so, to solve that basically I want to replace the quotation mark in the middle of the sentence for a ‘ but only if it has letters preceeding and following the quotation mark.

My thought: myString.replace('letter before ... " ... letter after', "'")

Any idea how can I get this right?

React memo creates rerender in next.js app

I’m having an issue with react memo when using nextjs. In the _app e.g. I have a button imported:

Import { ChildComponent } from './ChildComponent';
        
const Button = ({ classN }: { classN?: string }) => {
      const [counter, setCounter] = useState(1);    

      return (
          <StyledButton
            onClick={() => setCounter(counter + 1)}
          >
            {counter}
            <ChildComponent>
          </StyledButton>
        );
      };

Child component:

import React from 'react';

export const TestComponent = React.memo(
  () => {
    React.useEffect(() => {
      // eslint-disable-next-line no-console
      console.log('rerender child component');
    }, []);

    return <p>Prevent rerender</p>;
  },
  () => false
);

Tested in Nextjs and React but the Codesandbox for Nextjs is not working, so unfortunately I can’t share it (as in the framework won’t start). So here is the working one:
https://codesandbox.io/s/objective-goldwasser-83vb4?file=/src/App.js

How to turn a Javascript Object into a CSS style sheet

I have an object that goes

'buttonProperties' {
    backgroundColor : 'green'
    fontSize : '10px'
}

How would I make the button use those properties using a method like:

Object.keys(buttonProperties).forEach((x) => {
    button.style[x] = buttonProperties[x];
})


const buttonProperties = {
        backgroundcolor: 'green', 
        textSize : '10px'
},

button = document.getElementById('button')

button.addEventListener('click', () => {
  Object.keys(buttonProperties).forEach((x,i) => {
      button.style[x] = buttonProperties[x]
  })
})
<button id = 'button'>Submit</button>

How to get the file chooser window to close using Puppeteer?

I’m using Puppeteer to upload a file from my desktop to a website. It does upload the file, but the file explorer window stays opened and so the automation stops working.

const [fileCHooser] = await Promise.all([
        page.waitForFileChooser(),
        page.click("upload button id"),
    ]);

    await fileCHooser.accept(["dektop/example.csv"]);

Is there a way I can force it to close?

Javascript fire function from object

I would like to add a path on an svg, from an “object”.
myPath() for the attribute d works fine, but
I want to trigger my function from the object obj, and the obj.action() for d doesn’t work… Why ?

var obj = {
  action: function() {
    myPath();
  }
}

function myPath() {
  return "M 10 10 L 50 10 L 50 90 L 10 90 Z";
}

$("button").on('click', function() {
  // doesn't work... :-(
  $("svg").find("path").attr("d", obj.action());

  // ... but it's working with this :
  //$("svg").find("path").attr("d", myPath());
});
svg {
  width: 100px;
  height: 100px;
  background-color: #C0C0C0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click Me</button>
<svg><path /></svg>

Merge content of several pdf documents

I get lot’s of stamp-documents like this every day:

stamp-doc

There is lot’s of white space under every stamp. If I print them, that cost’s lots of paper, so I want to merge the content of several documents into one pdf-document. So that I can place like 8 stamps on into one document and just have to print one page instead of 8.

I want to solve this problem with javascript (or node.js) and I’ve already found some pdf-libraries, but these libraries just let me copy whole pages and don’t eliminate the white-space.

Are there any suggestions?

I also thought about converting the pdf to png or jpeg and cut the whitespace of the image, but I don’t if that’s possible.

I would really appreciate your help 🙂