Category: javascript

I want to remove the “Edit” button for selected records in a specific sub-grid in Project Contracts Main form.

I have customized the “Edit” button in Ribbon Workbench, and attached this Enable Rule to the command:

Enable Rule

Enable Rule 2

The JavaScript is the following:

oContractAgreementsFormCustomization = {

forContractAgreementsView: function (selectedControl)
{
    "use strict";
    debugger;
    var currentGridName = selectedControl._controlName;


    var agreementGrid = "ContractAgreements_Subgrid";
    if (currentGridName != agreementGrid)
    {
        return true;
    }
    else { return false; }
}

I have customized the Edit button in the Subgrid-Ribbon, but tried also to customize the Edit Button in the Home Ribbon.

But this Script is not run and does not show up in the Command Checker for the Ribbon.

any ideas what could be the problem here?

thanks, Ulli

Fairplay – I request the SD video first to load quickly with DRM settings, and it works well. However, a few seconds later, when Shaka Player attempts to request the HD video, image stalls (audio keep running) because the license from the SD version is different from the HD version and won’t update. I’ve tried using ‘player.getNetworkingEngine().registerRequestFilter’ to force an update of the license auto, but it didn’t work.

We expected the license update automatically when Shaka Player request HD video.

Does anyone have any hints?

I’m trying to figure out right now if there’s a way to conditionally import data files for one component in react based on the current page url. I have a gallery component that would be the same component, just different data for three different pages.

Would it be best or even possible to conditionally import three different data files (something like GalleryData1, GalleryData2, GalleryData3 instead of all of the data being in one GalleryData file) in the component file below?

Or should all of the data for the three pages be listed in one file (GalleryData file in this case) and be conditionally rendered in segments in that file based on the url?

import { useState } from "react";
import { PropTypes } from "prop-types";
import GalleryData from "/data/GalleryData";
import styles from "../components/GalleryList.module.css";

function GalleryList() {
    return (
        <div className={styles.gallery}>
            <div className={styles.overlayNone}>
                {GalleryData.map((gallery) => (
                    <Gallery galleryObj={gallery} key={gallery.name} />
                ))}
            </div>
        </div>
    );
}

function Gallery({ galleryObj }) {
    const [isOpenModal, setIsOpenModal] = useState(null);

    Gallery.propTypes = {
        galleryObj: PropTypes.shape({
            name: PropTypes.string.isRequired,
            description: PropTypes.string.isRequired,
            imagePath: PropTypes.bool.isRequired,
        }),
    };

    return (
        <div
            onClick={() => setIsOpenModal(!isOpenModal)}
            className={`${isOpenModal ? styles["overlay"] : styles["overlayNone"]}`}
        >
            <div
                onClick={() => setIsOpenModal(!isOpenModal)}
                className={`${
                    isOpenModal
                        ? styles["modalBackground"]
                        : styles["modalBackgroundNone"]
                }`}
            >
                <img
                    src={galleryObj.imagePath}
                    alt={galleryObj.name}
                    className={`${
                        isOpenModal ? styles["galleryPrevModal"] : styles["galleryPrev"]
                    }`}
                />
                <h2 className={`${isOpenModal ? styles["modalh2"] : styles["none"]}`}>
                    {galleryObj.name}
                </h2>
                <p className={`${isOpenModal ? styles["modalp"] : styles["none"]}`}>
                    {galleryObj.description}
                </p>
            </div>
        </div>
    );
}

export default GalleryList;

Thank you for any guidance – will continue to chip away. Trying some methods from here and doing some more reading: Conditional imports in React Native

I have to verify signature that created by Ruby service. The signature is creating from stringified JSON data.
The problem is that if data contains single backslash in nested strings then Node.js deletes backslashes.
And because of it the signature that I am creating is not matching what I receive.

The code that I am creating signature in Node.js

const calculatedHash = crypto
        .createHmac('SHA512', privateKey)
        .update(data)
        .digest('hex');

How can I create signature if string data contains backslashes ?

I have tried to use replace method but doesn’t work.

The example data that I should create hash {"changes: {"recalculated"=\u003e"true", "amount"=\u003e"132"}}

I have a Toolbar component in which their are images that can be dragged and dropped into a Playground component. The Playground component has a scale value which is initially 1. With mouse scroll you can zoom in and out of the playground. When zooming the images in the Playground component are scaled to give the effect of zooming. You can also drag around the playground to pan using the middle mouse button. The images in the Playground component are translated to give the effect of panning around. Below are the relevant components.

The minZoom and maxZoom is currently set to 1 as I am having issues with this, but originally should be 0.5 and 3, respectfully.

The issue arises when the playground has been panned around, the images are not dropped in the correct position where the mouse is. The same issue arises if the playground has been zoomed in or out.

The desired implementation is that the logic gate component is dropped always where the mouse is.

Is there a way to have a list of items that can be reordered via drag and drop which is also editable by multiple clients at the same time with data communication over WebSockets?

I was looking for a good way to learn how to code in java. Has anyone ideas or yt channels or any other thing to suggest?

I actually tried doing exercises on my own and having a look at java official documentation but it helped a little. Can someone suggest me anything?

I have this code on my page returning this error:

Cannot read properties of null (reading ‘style’)

Basically, I’m trying to build a flipbook.
It will have multiple papers (undefined number of papers (would change per user)), each will have a different Z-Index for correct display.

This is the code:
//Adding this part for it to run after page load:
document.addEventListener(“DOMContentLoaded”, function() {
//Defining my constant (each paper has an id of p + a number (e.g. #p1, #p2, etc):
const totalPapers = document.querySelectorAll(‘[id^=”p”]’).length;
//Looping to find each item z-index:
for (let i = 1; i <= totalPapers; i++) {
const paperSelector = #p${i};
const zIndexValue = totalPapers – i + 1;
document.querySelector(paperSelector).style.zIndex = zIndexValue;
}
});

Anybody knows why?

Thanks

I have an object that is auto-generated that I need to obtain the data from, but first I need to clean it up so that there are no more duplicates and any additions are concatenated.

I currently have something like this example which is made up for illustrative purposes

const categories = [
    {
        category: "mammal",
        animal: ["chicken", "cow"]
    },
    {
        category: "mammal",
        options: ["pig", "cow"]
    },
    {
        category: "gender",
        options: ["male"]
    },
    {
        category: "mammal",
        options: ["cow"]
    },
    {
        category: "mammal",
        options: ["pig"]
    },
    {
        category: "gender",
        options: ["female"]
    }
];

What I am aiming for is to convert it into something like this:

mammal>horse;cow;pig/gender>male;female/

I have been successful by looping through the current array and comparing the properties of the objects, but I have failed to get any traction on looping through the options and appending them if they are not duplicates.

const newArr = [];

for (let i = 0; i < categories.length; i++) {
    categoryIsInArray = newCat.indexOf(categories[i].category) !== -1;
    if (categoryIsInArray === true) {
         // do something with the options
    }
    else {
        newArr.push(categories[i].category)
    }
}

This results in a rather cut-down array:

["mammal","gender"]

I assume that I should be able to loop through the options and append them to their appropriate category if they don’t already exist in that category. So I attempted a similar approach.

const newCat = [];

for (let i = 0; i < categories.length; i++) {
    categoryIsInArray = newCat.indexOf(categories[i].category) !== -1;
    if (categoryIsInArray === true) {
        for (let j = 0; j < categories[i].options.length; j++) {
            optionIsInArray = newCat.indexOf(categories[i].options[j]) !== -1;
            if(optionIsInArray === false) {
                newCat.push(categories[i].options)
            }
        }
    }
    else {
        newArr.push(categories[i].category)
    }
}

but that has just mashed up everything and is not what I want at all

 [
    'mammal',
    [
        'horse',
        'cow'
    ],
    [
        'horse',
        'cow'
    ],
    'gender',
    [
        'cow'
    ],
    [
        'horse'
    ],
    [
        'female'
    ]
]

How do I adjust this to get what I’m after ?

Does anyone know how I can get that chrome look on a text box on JavaScript for my website similar to the Spotify image below. I haven’t found a way yet
My site atm
Ideal text box look

I’ve tried searching for a method but so far haven’t found anything

Problem:

[eslint] 
[redacted]/components/Settings.vue
  1:1  error  Component name "Settings" should always be multi-word  vue/multi-word-component-names

There is no Settings.vue at all!

❯ tree -I 'node_modules|public|assets'

.
├── README.md
├── babel.config.js
├── jsconfig.json
├── package.json
├── src
│   ├── App.vue
│   ├── components
│   │   ├── HomePage.vue
│   │   ├── SettingsPage.vue
│   │   └── TopBar.vue
│   ├── global.css
│   └── main.js
├── tailwind.config.js
├── vue.config.js
└── yarn.lock

SettingsPage is not even Settings!

/* eslint-disable vue/multi-word-component-names */
  
<script>
import TopBar from "./TopBar.vue";

export default {
    name: 'SettingsPage',

My EsLint config did not want you at all!

module.exports = {
    root: true,
    env: {
        node: true,
    },
    extends: [
        'plugin:vue/vue3-essential',
        'eslint:recommended',
    ],
    rules: {
        // Other rules...
        'vue/multi-word-component-names': 'off'
    },
};

I even kicked you off at the top of my file!

/* eslint-disable vue/multi-word-component-names */

Deleted node_modules, reinstalled it again, didnt work.

Deleted yarn cache, didnt work.

Anger I feel is immeasurable, as if JavaScript was a 10/10, flawless, perfect language, Vue is enforcing this rule, which, isnt even a real error right now! What to do? What does EsLint want from me?

can’t fix this

$(document).ready(function() {
  if ($.fn.DataTable.isDataTable('#local_table')) {
      $('#local_table').DataTable().destroy();
  }

  $('#local_table').DataTable({
      retrieve: true,
      lengthChange: false,
      paging: true, // Enable pagination
      pageLength: 1500, // Set number of rows to display
      scrollY: '60vh', // Set vertical scrolling
      scrollCollapse: true, // Reduce the height of the table to fit the data

      drawCallback: function(settings) {
          var api = this.api();
          var rows = api.rows({page:'current'}).nodes();

          api.column(0, {page:'current'}).data().each(function(group, i) {
              if ((i + 1) % 10 == 0) {
                  $(rows).eq(i).addClass('dark-border');
              } else {
                  $(rows).eq(i).removeClass('dark-border');
              }
          });
      }
  });
});

already tried initializeDataTable('#table-id') still not working.

I have a silly problem, which I am not capable to reporoduce. However, I couldn’t find a solution in hours, so I hope that you can give me some hint where I could look into…

I have the following piece of code within a much larger application:
Link to Stackblitz

The DayList array is composed of Days each with a Description array, which itself holds a DescriptionDetail array. I would like to convert the amount attribute in the DescriptionDetail array from string to number. I use the method transformAmounts to achieve this:

class PeriodService {
  dayPost = (daysList: Day[]): Day[] => {
    const newDayList = daysList.map((day) => ({
      ...day,
      hours: Number(day.hours),
      description: this.transformAmounts(day.description),
    }));

    return newDayList;
  };

transformAmounts = (description: Description[]): Description[] => {
    const newDescription: Description[] = description.map((d) => ({
      ...d,
      cost: d.cost.map((c) => ({
        ...c,
        amount: Number(c.amount),
      })),
    }));

    return newDescription;
  };
}

export default new PeriodService();

While the approach is working in the small Stackblitz example, in my project I always get description = []. I know for certain that transformAmounts outputs the transpformed object: If I write for example description2 instead of description, I get the expected result. But there is no way to modify description. Furthermore, I noticed that I cannot remove the description attribute from daysList, for some reason it is always there (and empty in newDaysList). The reamining properties can be changed without any unexpected behaviours.

I performed different tests to check if the object is somehow immutable:

Object.getOwnPropertyDescriptor(daysList[0],'description')
Object.isFrozen(daysList[0])
daysList[0].hasOwnProperty('description')

But all of them suggested that the attribute can be modified…

I am trying to display some data sent back from the server in the UI, but continue to hit the wall. Here is what I have going on.

I made a POST request to fetch data from an endpoint with this function

const [textData, setTextData = useState(null);

const handleSubmit = async () => {
        setShowLoadingStatus(true);
        loadNextStatus();

        try {
            // Make the POST request to the API endpoint
            const response = await fetch('/api/productLaunchStatus', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(formData),
            });

            if (response.ok) {
                const data = await response.json();
                const responseData = data.text;

                console.log('responseData:', responseData);

                setTextData(responseData);

            } else {
                console.log('Response not okay:', response.statusText);
            }
        } catch (error) {
            // Handle any unexpected errors
            console.error('Error making POST request:', error.message);
        }
    };

The data from the formData gets sent to the server, gets processed, and here is a copy of the server response:

[
  {
    "Ideal Customers": {
      "About Product":
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.",
    },
  },
  {
    "Ideal Customers": {
      "Ideal Customer":
        "ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.",
    },
  },
  {
    "Reasoning & Assumptions": {
      "Reasoning":
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.",
    },
  },
  {
    "Ideal Customer Type": {
      "Customer Type": "B2B",
    },
  },

  {
    "Decision Makers": {
      "Individuals": [
        "Executive Directors",
        "Campaign Managers",
        "Fundraising Directors",
        "Advocacy Directors",
        "Communications Directors",
      ],
    },
  },
]

And logging textData on the frontend also returned this – An array of objects (I believe):

TEXTDATA: [
  {
    "Ideal Customers": {
      "About Product":
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.",
    },
  },
  {
    "Ideal Customers": {
      "Ideal Customer":
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.",
    },
  },
  {
    "Key Characteristics of Ideal Customers": {
      "Characteristics": [
        "Non-profit organizations",
        "Political campaigns",
        "Advocacy groups",
        "Social justice organizations",
        "Environmental organizations",
      ],
    },
  },
  {
    "Reasoning & Assumptions": {
      "Reasoning":
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.",
    },
  },
  {
    "Ideal Customer Type": {
      "Customer Type": "Both",
    },
  },
]

However, using the following snippet to display it on the frontend:

{textData && textData?.map((section, index) => (
       <div key={index}>
          {Object.entries(section).map(([sectionTitle, sectionContent]) => (
       <div key={sectionTitle}>
         <h2 className='font-bold'>{sectionTitle}</h2>
                                                {Object.entries(sectionContent).map(([key, value]) => (
              <div key={key}>
                   <p><strong>{key}:</strong>{value}</p>
              </div>
             ))}
          </div>
        ))}
   </div>
 ))}

Returned an error:

Unhandled Runtime Error
TypeError: textData.map is not a function

Source

  868 | <div>
  869 |     {console.log("isTextDataArray:", Array.isArray(textData))} //returned false
> 870 |     {textData && textData?.map((section, index) => (
      |                           ^
  871 |         <div key={index}>
  872 |             {Object.entries(section).map(([sectionTitle, sectionContent]) => (
  873 |                 <div key={sectionTitle}>
         {...}

The data should be an array coming back from the server, and setting it in the handleSubmit function should make textData an array (please correct me if I’m wrong).
Can you help me figure out why I can’t display this in the UI, and getting this error?

I’m trying to display a large amount of data in a 3d EChart. At first I used a scatter3D type, which worked fine, but I thought that using a bar3D chart would be more clear. Then I noticed that if I exceed 40,000 instances of data the chart would appear empty. Is there a way to overpass this limit?