Category: javascript

I am making a website which is predominantly for data visualisation, data is selected by the user (who also selects a chart type) and returned with PHP and I’m using Chart.js on the client side to generate the graphs. I’m trying to use as modular an approach as possible for reusability so that I can make different types of graphs with different data with this code.

The problem I have is that whilst most charts, such as line and bubble charts, work just fine pie and doughnut charts do not, instead it just outputs a series of rectangular blocks with numbers.

I apologise using an image of the chart output, I simply don’t know how else to show the chart output and I’ve tried to explain it above – the graph output on the webpage.

This is the code responsible for generating the graph:

function makeChart(ctx, response, selectedColumn) {
    if (myChart) {
        myChart.destroy();
    }
    const chartTypeValue = chartTypeSelect.value;
    const labels = response.map(item => item['Hour']);
    const data = response.map(item => {
        const value = item[selectedColumn];
        return isNaN(value) ? value : parseFloat(value);
    });
    myChart = new Chart(ctx, {
    type: chartTypeValue,
    data: {
      labels: labels,
      datasets: [{
        label: `Data for ${selectedColumn}`,
        data: data,
        backgroundColor: [
            'rgb(255, 99, 132)',
            'rgb(255, 159, 64)',
            'rgb(255, 205, 86)',
            'rgb(75, 192, 192)',
            'rgb(54, 162, 235)',
            'rgb(153, 102, 255)',
            'rgb(201, 203, 207)'
        ],
        }]
    }      
    }
      );
      return myChart;
    }

So I’d like to know how I might go about addressing this.

Thanks for your time and help.

Background: This problem statement provides the high-level design of the project that has to be implemented as part of the hands-on assessment in order to complete the course Spring Basics.

InfyGo is an airline booking application that provides services to its customers to search for flight details. InfyGo wants a lightweight, loosely coupled application to be implemented using Spring.

Let us start with basic implementation using Spring core concepts for the following functionalities

Add Flight

Search Flight

As part of the Spring Basics course, let us develop the business tier of this application.

I am using Playwright and trying to drag & drop the list at this site into the right order. These locators work as expected, and the drag & drop does work every so often. I have tried dragTo(), a combination of mouse up, down, and hover, and a lot of different selectors. Nothing works consistently. I am urgently preparing for a test, so any help would be appreciated, please don’t mind the sloppy code.

// launch browser and open a new page
const { context } = await launch();
const page = await context.newPage();

// go to sortable list site
await page.goto('https://qaplayground.dev/apps/sortable-list/');

// order list
const correctOrder = [
  'Jeff Bezos',
  'Bill Gates',
  'Warren Buffett',
  'Bernard Arnault',
  'Carlos Slim Helu',
  'Amancio Ortega',
  'Larry Ellison',
  'Mark Zuckerberg',
  'Michael Bloomberg',
  'Larry Page'
];

async function swapItemToIndex(textIndex, listIndex) {
  const correctItem = `div.draggable:has-text('${correctOrder[textIndex]}')`;
  const targetItem = `li[data-index="${listIndex}"]`;
  await page.dragAndDrop(correctItem, targetItem);
}

await swapItemToIndex(0, 0);
await swapItemToIndex(1, 1);

// the elements are not ordered as expected

I have a button inside a Shopify Liquid file, and when it’s clicked, I need it to trigger a click event on a chat div role=button elsewhere in the DOM.

<button class="my-button">open chat</button>

Chat Div role=button (Rendered in DOM):

<div class="chat-button" data-testid="launcher-button" role="button">

</div>

Issue:
I attempted to use JavaScript to trigger the .chat-button when .my-button is clicked:

document.querySelector(".my-button").addEventListener("click", function () {
    document.querySelector(".chat-button")?.click();
});

However, the chat button is not always found or does not respond to the .click() event.

Questions:
Is .chat-button dynamically loaded after the page renders? If so, how can I ensure it’s ready before triggering .click()?

Is .click() the right approach for a , or should I use dispatchEvent(new Event(“click”))?

If .chat-button is inside an iframe, how can I access and click it from my script?

Would appreciate any insights!

Notes:
The button is a Front Chat Button

It is possible to collocate a .js file and a related .razor file as described here.
Is there a way to collocate a .js file and .cs file in a similar way? I image it looking similar to this:

MyService.cs

public class MyService
{
    private readonly IJSRuntime _js;

    private IJSObjectReference? _jsModule;

    public MyService(IJSRuntime js)
    {
        _js = js;
    }

    public async Task MyMethod()
    {
        if (_jsModule == null)
        {
            var modulePath = $"./_content/Company.Library/Service/MyService.cs.js";
            _jsModule = await _js.InvokeAsync<IJSObjectReference>("import", modulePath);
        }

        await _jsModule.InvokeVoidAsync("myjsmethod");
    }
}

MyService.cs.js

export function myjsmethod() {
    console.log('Hello World');
}

This compiles fine, but when run the MyService.cs.js file fails to load with the error “failed to fetch dynamically imported module”

Please I am new in Javascript. I am trying to write this php rand() function in Javascript, I am building a project in React as frontend and Nodejs/express.js as backend.

I can solve the below code;

$rand = rand(1, 4);
            
if($rand == 1) {                
    duckPic = "resources/pic1.png";                 
} else if($rand == 2) {
    $profile_pic = "resources/pic2.png";
} else if($rand == 3) {
    $profile_pic = "resources/pic3.png";                
} else if($rand == 4) {
    $profile_pic = "resources/pic4.png";        
}

I have 4 checkboxes that filter based on its name/identifierValue. When the page loads ALL should be selected. If I click any other box ‘ALL’ should deselect and I then filter based on the selection. Then, if I click ALL all of the other checkboxes should deselect but ALL
identifiers should show.

Currently, I set the checkboxes to true or false via FormGroup in parent component.
I then listen to form changes to hanlde the logic.

The problem is I have to uncheck ALL in order to select another box.

Then when I click ALL after selecting other boxes they deselect properly but all items in the table dont show as expected.
After that I have to toggle all of the other boxes just to get the filtering back working again.

Here is the method I’m calling via ngOnInit by way of initializeSearchPage().

handleCheckboxSelection(values: any) {
 const allSelected = values.ALL;
 const checkBox1Selected = values.Checkbox1;
 const checkBox2Selected = values.Checkbox2;
 const checkBox3Selected = values.Checkbox3;

 if (allSelected) {
  // If "All" is selected, deselect others
  this.reportListFG.get('filterGroup')?.patchValue(
    {
      Checkbox1: false,
      Checkbox2: false,
      Checkbox3: false,
    },
    { emitEvent: false } // Prevent infinite loop
  );
  } else {
  // If "All" is not selected, deselect "All" if any other is selected
  if (checkBox1Selected || checkBox2Selected || checkBox3Selected) {
    this.reportListFG.get('filterGroup')?.patchValue(
      {
        ALL: false,
      },
      { emitEvent: false }
    );
  }
  
  

Here is my stackblitz

I am trying to integrate an existing library in my new codebase using typescript and Bun. i am facing an issue where this library is requiring modules in code asynchronously, like follows :

let target = require(AppRoot + targetName);
        target.execute(targetTask);

so passing in the targetName, it can require the module which is a default exported object (usually an instantiated class). This was working fine when i was using this library in JS but when switching to Typescript the target became an Object with default being the actual instantiated class :

// in Javascript
Target {
  execute : [Function]
}
// in Typescript
Target {
  default : {
    execute : [Funtion]
  }
}

This change breaks the entire library of course as it relies on reading files that way. I am not suer if this is a Bun or Typescript issue, but is there a way to bypass forcing the default when importing for a specific library

Note: I already have esModuleInterop set to true in my tsconfig which according to chatgpt is the only hand-off solution

What I am trying to do is to get the heights of multiple elements with the same ‘class’. If the element’s height is over 400px I want it to set the height to the value it aquired minus 5px. And if it is under 400px I want it to do the same thing.

jQuery(document).ready(function( $ ){
  
  var cardHeight = $('.card').height();
  
  if (cardHeight > 400) {
    $(this).height(cardHeight - 5);
    }
  else{
    $(this).height(cardHeight - 5);
  }
  
}); 

.wrapper {
  width: 100%;
  overflow: hidden;
}
.wrapper .card {
  width: 20%;
  float: left;
  margin: 10px;
  background-color: red;
}
.wrapper .card:nth-child(1) {
  height: 333px;
}
.wrapper .card:nth-child(2) {
  height: 333px;
}
.wrapper .card:nth-child(3) {
  height: 500px;
}
.wrapper .card:nth-child(4) {
  height: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<body>
<div class="wrapper">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>
</body>

I’m trying to re-create a sort of a dropdown menu with multiple choices when clicked. However, the div i want to appear in position absolute still fill the space by making the div scrollable.

The clickable side is correctly implemented in Js by changing .select_cart_drop display to flex.

The goal would be to stack the drop div on the preview div in the wrapper of both of them.

Here is the code :

.select_cart {
  position: relative;
  width: 70%;
  border: 1px solid lightgray;
}

.select_cart_drop {
  position: absolute;
  */display: none;/*
  flex-direction: column;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

<div class="select_cart">
  <div class="cart_checkbox_label">
    <div class="select_cart_container_quantité">Quantité :</div>
  </div>
  <div class="select_cart_drop">
    <div>0 (supprimer)</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10 +</div>
  </div>
</div>

I am year1 in university on programming and im doing for my year work an online audio studio.
I want to create site like this https://editor.audio/. I am using chat gpt for guidance and providing me sources. Also im reading books on this topic rn. I decided to use React and JS for my task. Any advices on order of things to do to achive the goal?

I have an HTML file that generates a Map, and I display it inside a WindowsForms application when opening a screen. From one day to the next it stopped working.
I use a Web Browser component.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Complex icons</title>
    <style>
        /* Always set the map height explicitly to define the size of the div
        * element that contains the map. */
        #map {
            height: 100%;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        var markers = [ {
                                'title': 'Antracnose',
                                'lat': '37.4220936',
                                'lng': '-122.083922',
                                'description': 'Antracnose - Fase: Ovo <br/>Medição: 4.000000'} ];
        function LoadMap() {
            var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                streetViewControl: false,
                mapTypeId: google.maps.MapTypeId.SATELLITE
            };
            var infoWindow = new google.maps.InfoWindow();
            var map = new google.maps.Map(document.getElementById("map"), mapOptions);

            //Create LatLngBounds object.
            var latlngbounds = new google.maps.LatLngBounds();

            for (var i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title
                });
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + data.description + "</div>");
                        infoWindow.open(map, marker);
                    });
                })(marker, data);

                //Extend each marker's position in LatLngBounds object.
                latlngbounds.extend(marker.position);
            }

            //Get the boundaries of the Map.
            var bounds = new google.maps.LatLngBounds();

            //Center map and adjust Zoom based on the position of all markers.
            map.setCenter(latlngbounds.getCenter());
            map.fitBounds(latlngbounds);

        }


    </script>
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB9Got42VTh1NwKDSI-GBduOqTvwkKRDS4&v=quarterly&callback=LoadMap">
    </script>
</body>
</html>

Today I use it to generate a temporary HTML file and read this file with the webBrowser.
I tried a few ways to create a map in an API that returned only an address with the generated map to display in the webBrowser, but it didn’t work.
On other occasions, the map stopped being displayed, and after searching a lot, the solution was to change the version of JavaScript in the map, but this time it didn’t work anymore.

I’m building a Vue 3 application that needs to communicate with backend APIs using Apache Thrift. I’ve created a skeleton project (available on GitHub) but I’m struggling with integrating the Thrift-generated files into my Vue 3 environment.

Problem

The Apache Thrift compiler (version 0.21.0) generates JavaScript files in CommonJS format, but my Vue 3 application uses Vite which expects ESM format. I’ve tried various generation options (js, nodejs, es6, and nodejs-es6 combo) without success.

Current workarounds (not ideal)

• Generated NodeJS files and manually converted them to ES6 format using claude.ai (under srcgen-es6 in my repo)
• Generated files with js:node,es6 flag and manually modified them (modified files under gen-nodejs in my repo)

Both approaches require manual intervention, which isn’t sustainable for a production application.

Questions

1. What’s the recommended way to use Thrift-generated JavaScript files
   in a modern Vue 3 + Vite project?
2. Is there a proper compiler flag or configuration to generate
   ESM-compatible files directly?
3. Are there any build tools or workflows that can automate the
   conversion from CommonJS to ESM?

Environment

• Vue 3
• Vite
• Apache Thrift 0.21.0

Any guidance or pointers would be greatly appreciated, as information on this specific combination is sparse online.

I am trying to get a web page to read text from files held on the same webserver. The following is the code I am using; it is cobbled together from several much-praised answers to similar questions on this site:

<html>

<head>
</head>

<body>
  <h1>JavaScript Fetch API</h1>
  <h2>The fetch() Method</h2>
  <p>The first line of the file will go here</p>
  <p id="sample">No file loaded</p>
  <button id="startbutton">Click to try it</button>
  <script>
    document.getElementById("startbutton").addEventListener("click", starter);

    function starter() {
      alert("in js")
      document.getElementById("sample").innerHTML = "Results: "
      mytext = gettext("fetchsample.txt")
      document.getElementById("sample").innerHTML += mytext
    }
    async function gettext(file) {
      try {
        gotfile = await fetch(file)
        if (!gotfile.ok) document.getElementById("sample").innerHTML +=
          "could not fetch" + file + " " + gotfile.statusText
      };
    }
    catch (ferror) {
      alert("fetch error " + ferror.message)
    }
    try {
      myText = await gotfile.text();
      if (!myText.ok) {
        document.getElementById("sample").innerHTML +=
          " could not read " + file + " ";
      }
    } catch (rerror) {
      alert("read error " + rerror.message)
    }
    return myText
    }
  </script>

  <body>

</html>

The file the code is trying to read, fetchsample.txt, is in the same directory on the server as the html code, so (I assume) there should be no CORS issues.
What happens is:

1. the first alert (“in js”) fires correctly, so I know I am getting into the javascript.
2. the second alert (“fetch error…”) does not fire, furthermore the “could not fetch…” string is not inserted into the paragraph “sample”, so I’m assuming the first await statement (involving fetch) completes successfully.
3. however the second await statement does not complete successfully, because the if(!myText.ok) condition is activated: “could not read fetchsample.txt” is inserted into the paragraph “sample”. The catch statement is not taken, however.
4. The routine gettext returns “[object Promise]” and this is inserted into the paragraph “sample”. Curiously, it appears before the “could not read…” message: the exact content of paragraph “sample” when this is run in Chrome or Firefox is “Results: [object Promise] could not read fetchsample.txt”, suggesting that gettext has returned that result before the second await statement has completed. I assume this is something to do with how async/await function in javascript.
   Note that if you try to run the snippet from this site, it returns a network error, because the file reference is relative and the corresponding file doesn’t exist; but I can’t get out of that by putting in the full domain reference, presumably because of CORS.
   So, what am I doing wrong here? Why is this code not returning the contents of fetchsample.txt?

I am having difficulty setting a magnification of the background youtube video to the scroll movement. I’m editing a site made with Locomotiv Scroll and trying to create the animation unfortunately creates “interference” with the page scroll by creating breaks and up and down movements when I get to the two ends of the scroll (first scrolling down and then back up). I will post the section regarding the video and the css and javascript I wrote. Basically I would like the animation of the youtube video to open at a width of 1280px and in the scroll go up to 100% of the page.

I thank any help and suggestions

document.addEventListener("DOMContentLoaded", function () {
    const scrollContainer = document.querySelector("[data-scroll-container]");
    const youtubeVideoContainer = document.querySelector(".youtube-bg");

    if (scrollContainer && youtubeVideoContainer) {
        // Un'unica istanza di Locomotive Scroll
        const scroll = new LocomotiveScroll({
            el: scrollContainer,
            smooth: true,
            getDirection: true,
            multiplier: 0.6,
            firefoxMultiplier: 50,
            resetNativeScroll: true
        });

        const initialWidth = 1280;
        const maxWidth = window.innerWidth;
        const sectionUp = document.querySelector("#up"); // Sezione con il video di sfondo

        scroll.on("scroll", (obj) => {
            const scrollY = obj.scroll.y;
            const sectionTop = sectionUp.offsetTop;
            const sectionHeight = sectionUp.offsetHeight;

            if (scrollY > sectionTop && scrollY < sectionTop + sectionHeight) {
                // Calcola la percentuale di progressione dello scroll
                let progress = (scrollY - sectionTop) / sectionHeight;
                progress = Math.max(0, Math.min(1, progress));

                // Calcola la nuova larghezza del video
                let newWidth = initialWidth + progress * (maxWidth - initialWidth);
                newWidth = Math.min(newWidth, maxWidth); // Assicura che non superi il 100%

                // Applica la nuova larghezza
                youtubeVideoContainer.style.width = newWidth + "px";
            }
        });
    } else {
        console.error("Elemento data-scroll-container o .youtube-bg non trovato");
    }
});

.portfolio-showcase {
    position: relative;
    z-index: 1;
}

.youtube-bg {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 1280px; /* larghezza iniziale */
  height: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  z-index: -1;
  transition: width 0.5s ease-out; /* Transizione più fluida */
}


#youtube-video {
    width: 100%;
    height: 100%;
}

.youtube-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Sovrapposizione nera per il video */
    pointer-events: none;
}

.page-head-footer-overlay-fix {
    height: auto;
    max-height: 100vh;
    overflow: hidden;
}

iframe {
    pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js"></script>

<section id="up" class="section-bg-dark" data-scroll-section>
   <div class="page-head-footer-overlay-fix" data-scroll data-scroll-repeat>
      <!-- Portfolio Showcase -->
      <div  class="fullscreen portfolio-showcase wall">
         <div class="youtube-bg">
            <iframe
               id="youtube-video"
               src="https://www.youtube.com/embed/VCaCx0xOZEk?autoplay=1&mute=1&controls=0&loop=1&playlist=VCaCx0xOZEk&modestbranding=1&rel=0&showinfo=0&iv_load_policy=3"
               frameborder="0"
               allow="autoplay; encrypted-media"
               allowfullscreen
               ></iframe>
            <div class="youtube-overlay"></div>
         </div>
         <!--/ Wall Wrapper -->
         <div class="wall-wrapper">
            <!-- Project -->
            <div class="wall-project">
               <!-- Project URL -->
               <!-- Project Image -->
               <div class="project-image">
                  <video autoplay="" muted="" loop="" playsinline="">
                     <source src="
                        <?php echo get_template_directory_uri(); ?>/images/projects/ezra-brooks/ecommerce.mp4" alt="E-commerce">
                  </video>
               </div>
               <!--/ Project Image -->
               <!-- Project Title -->
               <div class="title">
                  E-commerce
               </div>
               <!--/ Project Title -->
            </div>
            <!--/ Project -->
            <!-- Project -->
            <div class="wall-project">
               <!-- Project URL -->
               <!-- Project Title -->
               <div class="title">
                  <span class="text-scan text">Website</span>
               </div>
               <!--/ Project Title -->
            </div>
            <!--/ Project -->
            <!-- Project -->
            <div class="wall-project">
               <!-- Project URL -->
               <!-- Project Image -->
               <div class="project-image">
                  <video autoplay="" muted="" loop="" playsinline="">
                     <source src="
                        <?php echo get_template_directory_uri(); ?>/images/projects/ezra-brooks/still_life_photography.mp4" alt="Still life photography">
                  </video>
               </div>
               <!--/ Project Image -->
               <!-- Project Title -->
               <div class="title">
                  Still life
               </div>
               <!--/ Project Title -->
            </div>
            <!--/ Project -->
            <!-- Project -->
            <div class="wall-project">
               <!-- Project URL -->
               <!-- Project Image -->
               <div class="project-image">
                  <video autoplay="" muted="" loop="" playsinline="">
                     <source src="
                        <?php echo get_template_directory_uri(); ?>/images/projects/ezra-brooks/videoproduction.mp4">
                  </video>
               </div>
               <!--/ Project Image -->
               <!-- Project Title -->
               <div class="title">
                  Video production
               </div>
               <!--/ Project Title -->
            </div>
            <!--/ Project -->
            <!-- Project -->
            <div class="wall-project">
               <!-- Project URL -->
               <!-- Project Image -->
               <div class="project-image">
                  <video autoplay muted loop playsinline>
                     <source src="
                        <?php echo get_template_directory_uri(); ?>/images/projects/ezra-brooks/web_developer.mp4">
                  </video>
               </div>
               <!--/ Project Image -->
               <!-- Project Title -->
               <div class="title">
                  <div class="text-underline-2">
                     <span class="text">Design</span>
                  </div>
                  & strategy
               </div>
               <!--/ Project Title -->
            </div>
            <!--/ Project -->
            <div class="c-col-12 has-animation fade-in-up text">
               <h2><span class="span text span4"><em>Agenzia di comunicazione</em> Padova.</span></h2>
            </div>
         </div>
         <!--/ Portfolio Showcase -->
      </div>
      <!-- padding-top-bottom-150 end -->
      <!-- background start -->
      <!-- Column -->
      <div class="c-col-12 has-animation fade-in-up">
         <!-- Embed Video -->
         <!--/ Embed Video -->
      </div>
      <!--/ Column -->
      <!-- background end -->
   </div>
</section>