Category: javascript

I am trying to embed the bpmn modeler in an angular application. When the page loads, the modeler is missing, but the properties panel is visible.

When I make a gentle scroll on the page, the BPMN modeler suddenly shows up and an error is shown in the console:

Error: <g> attribute transform: Expected number, "matrix(1.79769313486231…".

Upon further inspection, this error is because the transform matrix is initialised with NaN like so

<g class="viewport" transform="matrix(NaN NaN NaN NaN NaN NaN)">

and when we scroll, it is filled with correct values and the modeler is shown.

This is how I have initiatialised the BPMN in my ts:

private bpmnJS: any = new BpmnModeler({
        additionalModules: [
            BpmnPropertiesPanelModule,
            BpmnPropertiesProviderModule,
            CloudElementTemplatesPropertiesProviderModule,
            ZeebePropertiesProviderModule,
            TemplateIconRendererModule,
            ZeebeBehaviorModule,
            CreateAppendAnythingModule,
            CreateAppendElementTemplatesModule,
            ElementTemplateChooserModule,
            BpmnColorPickerModule
        ],
        exporter: {
          name: 'connectors',
          version: '0.0.0'
        },
        keyboard: {
          bindTo: document
        },
        moddleExtensions: {
          zeebe: ZeebeModdle
        }
      });

---

this.bpmnJS.attachTo('#canvas')
const propertiesPanel = this.bpmnJS.get('propertiesPanel');
propertiesPanel.attachTo('#properties');

---

<div class="canvas-parent" >
    <div class="canvas" id="canvas"></div>
    <div class="properties" id="properties"></div>
</div>

---

"@bpmn-io/element-templates-icons-renderer": "^0.3.0",
"@bpmn-io/properties-panel": "^1.1.1",
"bpmn-js": "^11.1.1",
"bpmn-js-color-picker": "^0.5.0",
"bpmn-js-create-append-anything": "^0.1.0",
"bpmn-js-properties-panel": "^1.15.0",
"camunda-bpmn-js-behaviors": "^0.4.0",
"zeebe-bpmn-moddle": "^0.17.0"

any ideas?

Hello I try next js today but it’s such a hassle because already when i have an error in my code next js switch immediately on my browser for show error but I just haven’t finished writing my code. We can tell a nextjs not to display the error on the browser directly

I would like it to react and not open the browser when I have an error. I tried to disable eslint and typescript in strict mode but I did not succeed and I found nothing on the internet

Next js is good but just this system makes me want to stop using it

Thank you for your help

I am new to coding in ServiceNow and currently working on a requirement to create a UI action in the Case table. When the user clicks on ‘Transfer to IT’, I want to open a popup window that displays the Description, Short Description, and Priority values.

I have tried writing a UI action script, but I’m facing difficulties in getting the popup window to appear and correctly populate the fields

I would greatly appreciate it if someone could help me in scripting the UI action to achieve this requirement. Specifically, I need assistance with:

1. Opening a popup window when ‘Transfer to IT’ is clicked.

2. Displaying the Description, Short Description, and Priority fields in the popup window.

3. Populating the fields with the correct values from the Case record.

4. Achieving this functionality using only Script Include and UI Action scripting, without creating a separate UI page.

Thank you in advance for your guidance and support!

Thanks & regards,

Sunayana.

I have tried writing a UI action script, but I’m facing difficulties in getting the popup window to appear and correctly populate the fields

I would greatly appreciate it if someone could help me in scripting the UI action to achieve this requirement. Specifically, I need assistance with:

1. Opening a popup window when ‘Transfer to IT’ is clicked.

2. Displaying the Description, Short Description, and Priority fields in the popup window.

3. Populating the fields with the correct values from the Case record.

4. Achieving this functionality using only Script Include and UI Action scripting, without creating a separate UI page.
   Please help me with the above to accomplish this requirement.

I my project which has HTML, CSS, and javaScript code, in HTML

<button class="container-button" id="btn" onclick="toggleContainer()"></button>

my index.js file looks like

import './src/css/main.css';

function toggleContainer() {
    show/container or hide
  
}

in my index.html file i have attached the javascript file like

<script src="/index.js"></script>

in browser console the error is

[Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:1:1)]

and when i click on the button i get

Uncaught ReferenceError: toggleContainer is not defined
    at HTMLButtonElement.onclick

THE ERROR PERSISTS EVEN AFTER OING “type”: “module”,

Task: to create a tournament bracket according to the double elimination system. For the upper bracket, there were no problems, since the teams that won in the first round meet in the second, and so on. But for the lower bracket, in addition to the games among the losers in the first round, you need to add games among the losers in the second round of the upper bracket.

For example, given an array of lower bracket games:

const games = [
  { id: 1, home_name: "Team 1", visitor_name: "Team 3", home_score: 1, visitor_score: 0, round: 2 },
  { id: 2, home_name: "Team 6", visitor_name: "Team 7", home_score: 1, visitor_score: 0, round: 2 },
  { id: 3, home_name: "Team 1", visitor_name: "Team 6", home_score: 0, visitor_score: 1, round: 3 },
  { id: 4, home_name: "Team 4", visitor_name: "Team 5", home_score: 1, visitor_score: 0, round: 3 },
  { id: 5, home_name: "Team 6", visitor_name: "Team 4", home_score: 1, visitor_score: 0, round: 4 },
];

To display the structure of the lower bracket, you need to get the following object:

{
 name: "Team 6",
 children: [
  {
   name: "Team 4",
   children: [{ name: "Team 4" }, { name: "Team 5" }],
  },
  {
   name: "Team 6",
   children: [
    { name: "Team 1", children: [{ name: "Team 1" }, { name: "Team 3" }] },
    { name: "Team 6", children: [{ name: "Team 6" }, { name: "Team 7" }] },
   ],
  },
 ],
}

In the parent object “Team 6” is the winner of the lower bracket, this can be understood from the last (4) round played between Team 4 and Team 6, in turn Team 4 is determined by the game between Team 4 and Team 5 in round 3.

What the lower bracket will look like for these games:

How to get such an object from the games array? The number of games may vary depending on the number of teams.

I just got quite complicated case as below. The case requires to take out conditional percentage included on both “Vat Tax” and “Consumer buy” that have values less than 1.00 % and greater than 90.00 %.

Aplle Pinaplple
Vat Tax : 90.00 %
Consumer buy : 1.0 %
Aplle Pinaplple

I’m new to Regex, just trying to exclude any percantage values in range 1 to 89 but it seems doesn’t work

(?<=Vat Tax)^((([1-8]|[0-9]d).d{2})|90.0000)+%(?=Consumer buy)$

Hope I can get advices from you.

I have a project that includes Java, Spring boot, ReactJS, CSS, JS and RestAPI. My only problem is that when I load the page: localhost:8080/login.html, the html displays the content of the html file but does not take over the css file at all. The paths to the individual files are also correct, as they are linked, but the styling via css does not work.

login.html
style.css

I have also tried with a simple CSS code, but nothing is taken over for some reason not even the picture.

i have an app that i build on react native and i have a problem with create a spinner
i have function named “calculatorLoops” this function as another function that has nasted loop and it caculation the numbers.
the problem is i want to “wait” until the loop is over and create a spinner while it make the calculation.
so i make it async and it not working.
but if i await with some fetch url it does working as well, i try to replace the await fetch with promise but it not work but only with the await fetch (and with this its working as well but i dont really need to fetch)

  const calculatorLoops = async (column: string) => {
    await fetch("https://www.google.com/");
    let howManyLoop = 0;
    let isWon = false;
    let founds;

    while (!isWon) {
      founds = compareNumbers(user.lotteryNumbers[column], { lotteryNumbers: createNumbers() });

      howManyLoop++;
      if (founds.cnt === loopNum) isWon = true;
    }
    setFoundNum({ foundCnt: howManyLoop, foundNumbers: founds.foundsNumbers });
  };


  const handlePress = async (column: string) => {
    setLoading(true);
    await calculatorLoops(column);
    setLoading(false);
  };

I am trying to make a simple card flipping game.

I am new to the world of coding so please bear with me. I am trying to make a really easy card flipping game of 5 randomized cards. What I’m trying to do is to assign an id to these images (total of 52) and randomize them (only 5 of them ) inside a using jQuery. But I can’t get my head around with it so I stumbled across this website and thought I’d give it a try.

i want to set store current category id in one variable , and if category changes then store that also and wants to compare that both id , if both is not equal then set sub cat=null , i don’t know where am i doing wrong

i have tried using using javascript , but both ids are coming same

$(document).ready(function () {
    myFunction();
    function myFunction() {
        var previousCategory = $('#selectcategory').val();
        var category_id = previousCategory;
        var category_id = $('#selectcategory').val();
        var subcat_id = $('#selectsubcat').val();
        console.log(previousCategory, category_id);
        if (category_id !== previousCategory) {
            $('#selectsubcat').val(null);
            subcat_id = null;
        }
         // console.log(category_id, subcat_id);
     }
    $('#search').keyup(myFunction);
    $('#selectsubcat').on('change', myFunction);
    $('#selectcategory').on('change', myFunction);

});

I am creating a program which talks to an API to gather information on certain cities. I use two functions, the first which determines the wikiDataId of the city, and then a second, which then determines the elevation and population of the city.
I need to use the wikiDataId in the first function to tell the API which city I need information on. With what I have tried, i get the wikiDataId but then the elevation and population values are undefined. I do not know what I am doing wrong to get the values undefined

let userInput = "Bhisho";
let prefix = userInput.charAt(0).toUpperCase() + userInput.slice(1).toLowerCase();

const url = `https://wft-geo-db.p.rapidapi.com/v1/geo/cities?   countryIds=ZA&namePrefix=${prefix}`;
const options = {
  method: "GET",
  headers: {
    "X-RapidAPI-Key": "...",
    "X-RapidAPI-Host": "wft-geo-db.p.rapidapi.com",
  },
};

async function myApiFunction() {
  try {
    const response = await fetch(url, options);
    const result = await response.json();
    console.log(result.data[0].wikiDataId);

    let url2 = `https://wft-geo-db.p.rapidapi.com/v1/geo/cities/${result.data[0].wikiDataId}`;

    async function mySecondApiFunction() {
      try {
        const response = await fetch(url2, options);
        const result = await response.json();
        console.log(`The elevation above sea level is: ${result.elevationMeters}m`);
        console.log(`The population is: ${result.population} people.`);
      } catch (error) {
        console.error(error);
      }
    }

    mySecondApiFunction();
  } catch (error) {
    console.error(error);
  }
}

myApiFunction();

I’m in Flutter InappWebview. I use PagedJs to paginate a html book. Once paginated I add slide to Embla. The pagniated html is already transform to a carousel. I add dynamically slide because pagnition is a long process.
Everythings works fine if I start by the first chapter of the book. But If I start by chapter 9 the index is 0. I need to use “embla.containerNode().insertBefore(newSlide, slides[index]);” It show the last chapter added. I want a startIndex that keep a the current displayed page. I try to put just the index for startIndex but it’s not working. How could I do it please?

function addSlide(content) {
  // If Embla Carousel is scrolling or dragging, do not add the slide
  if (isScrolling) {
    setTimeout(() => {
      addSlide(content);
    }, 300);
    return;
  }

  // Create a temporary div to parse the content
  var tempDiv = document.createElement('div');
  tempDiv.innerHTML = content;
  var contentDiv = tempDiv.firstChild;

  // Extract chapter and page numbers from the custom attributes
  var chapterNumber = Number(contentDiv.getAttribute('chapter-number'));
  var pageIndex = Number(contentDiv.id.split('-').pop());

  // Create the new slide
  var newSlide = document.createElement('div');
  newSlide.className = 'embla__slide';
  newSlide.appendChild(contentDiv);

  // Find the position of the slide in the carousel
  var slides = Array.from(embla.containerNode().childNodes);
  var index = -1;

  console.log('Number of slides:', slides.length);

  for (var i = 0; i < slides.length; i++) {
    var slide = slides[i];
    var slideContent = slide.firstChild;
    var existingChapterNumber = Number(slideContent.getAttribute('chapter-number'));
    var existingPageIndex = Number(slideContent.id.split('-').pop());

    if (chapterNumber < existingChapterNumber || (chapterNumber === existingChapterNumber && pageIndex < existingPageIndex)) {
      index = i;
      break;
    }
  }


  // If no such position was found, append the slide to the end
  if (index === -1) {
    embla.containerNode().appendChild(newSlide);

  } else {
    // Otherwise, insert the slide at the correct position
    embla.containerNode().insertBefore(newSlide, slides[index]);
    startIndex++;
  }

  console.log('Current selected index:', startIndex);

  embla.reInit({ loop: false, startIndex: startIndex });
}

I’m trying to find the iframe tag in order to open a popup window. If I use the <video> tag it works fine but when I use iframe tag it does not. What is the problem?

<div class="about__img-overlay">
  <div class="video3">
    <iframe src="https://player.vimeo.com/video/807322046?h=0d933f4470&autoplay=1&loop=1&title=0&byline=0&controls=0&muted=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" class="about__img-one"></iframe>
  </div>
</div>

document.querySelectorAll('.video-container iframe').forEach(vid => {
  vid.onclick = () => {
    document.querySelector('.popup-video').style.display = 'block';
  }
});

Taking longer time to load mainfile.css file. Please Explain the problem.

Try to load file faster but getting error. Please help me to fix the error. it is not loading mainfile.css file. because of mainfile.css all file website is loading very slow.

I am using flickity slider but its behaving strangely in mobiles. its looking fine in chrome inspect mobile views.
chrome inspect s20

In s20 original phone – enter image description here

Is it because of loading speed of images as flickity slider decides viewport size based on the components ( images inside.. Should I add lazy loading?

I tried adding exact width and size, lazy loading to some