Category: javascript

I started using Highcharts version 12.3 and encountered a problem with an additional element I add to my charts. Left of the hamburger menu I position the word INFO and when clicked I have a Bootstrap procedure popping up window with HTML text. I add the element with this javascript part. This worked with 11.2, see fragment below.

What has changed in 12.3 and how to get this back? The error is in this.exportingGroup.getBBox(); You find he whole chart definition in https://meteo-wagenborgen.nl/beta/testchart.txt (you need to format it for readability, VS code works great).

    chart.update({
        chart: {
            events: {
                render() {
                    const {
                        x,
                        y,
                        width
                    } = this.exportingGroup.getBBox();
                    if (!this.customText) {
                        this.customText = this.renderer.text('Info', x - width - 15, y + 15).add().css({
                            color: this.title.styles.color
                        }).css({
                            cursor: 'pointer'
                        }).on('click', () => $('#TestChart').modal('show'));
                    } else {
                        this.customText.attr({
                            x: x - width - 15,
                            y: y + 15
                        });
                    }
                }
            }
        }
    });

I am using Datatables.net to display results of an oracle query. Query works fine and I appear to be getting the right JSON output, but DataTables complains that my JSON is invalid. I have this javascript:

ajax: {
  url: "php/requests.php",
  type: "POST",
  dataSrc: ""
},
paging: false,
scrollY: '60vh',
scrollCollapse: true,
// note:  DataTables.render.number(thousandsSeparater,decimalSeparator,precision,[prefix ie '$'],[suffix])
columns: [
    { data: "Request_Id" },
    { data: "Description" },
    { data: "Requestor" },
    { data: "Request_Date" },
    { data: "Processed", className: "dt-right", render: DataTable.render.number(',', '.', 0) },
    { data: "Processed_Rate", className: "dt-right", render: DataTable.render.number(',', '.', 1) },
    { data: "Pending", className: "dt-right", render: DataTable.render.number(',', '.', 0) },
    { data: "Succeeded", className: "dt-right", render: DataTable.render.number(',', '.', 0) },
    { data: "Success_Rate", className: "dt-right", render: DataTable.render.number(',', '.', 1) }
    { data: "Failed", className: "dt-right", render: DataTable.render.number(',', '.', 0) },
],
order: [0, 'asc']

requests.php gets called as expected when the page loads and this json string is output:

[
    {
        "Request_Id": "10082",
        "Description": "test",
        "Requestor": "[email protected]",
        "Request_Date": "27-AUG-25",
        "Processed": 354,
        "Processed_Rate": 69.00584795321637,
        "Pending": 159,
        "Succeeded": 354,
        "Success_Rate": 100,
        "Failed": 0
    }
]

(as copied from Edge/developer tools/network/response )

this is the message that pops up:

What am I missing?

I recently posted a directly related question here containing an MRE for collapsing a sidebar menu by default on page load. The solution for that MRE is simply to set the sidebar class:

<div id="sidebar" class="inactive">

This works for the MRE at the link above, but does not work for the original html5up code.

How can the sidebar be collapsed for this more complex case?

I have downloaded html5up’s Editorial template and am trying to collapse the menu sidebar when the page is first visited. As shown in the screenshot below, clicking on the blue three-bar icon toggles (collapses / expands) the sidebar menu. The sidebar is visible (expanded) when the page is first loaded, but I’d like it to be collapsed instead.

The screenshot above depicts an almost-minimal reproducible example that I made using the HTML, CSS and JS below. I realize that there are some unnecessary details like font-awesome so I apologize that this is not a full MRE.

I have naively attempted to collapse the sidebar in index.html using a simple script:

document.getElementById("sidebar").click();

However this does not work.

How can the sidebar be collapsed by default?

index.html

<!DOCTYPE HTML>
<html>
    <head>
        <title>Editorial by HTML5 UP</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="assets/css/main.css" />
    </head>
    <body class="is-preload">
            <div id="wrapper">
                    <div id="main">
                        <div class="inner">
                                <section id="banner">
                                    <div class="content">
                                        <header>
                                            <h1>Editorial</h1>
                                            <p>A free and fully responsive site template</p>
                                        </header>
                                    </div>
                                </section>
                        </div>
                    </div>
                    <div id="sidebar">
                        <div class="inner">
                                <nav id="menu">
                                    <header class="major">
                                        <h2>Menu</h2>
                                    </header>
                                    <ul>
                                        <li><a href="index.html">Homepage</a></li>
                                        <li><a>Generic</a></li>
                                        <li><a>Elements</a></li>
                                    </ul>
                                </nav>
                        </div>
                    </div>
            </div>

        <!-- Scripts -->
            <script src="assets/js/jquery.min.js"></script>
            <script src="assets/js/browser.min.js"></script>
            <script src="assets/js/breakpoints.min.js"></script>
            <script src="assets/js/main.js"></script>
            <script>
            </script>
            <script>
                document.getElementById("sidebar").click();
            </script>
    </body>
</html>

main.css

@import url(fontawesome-all.min.css);


/* Wrapper */
#wrapper {
  display: flex;
  flex-direction: row-reverse;
  min-height: 100vh; }

/* Main */
#main {
  -moz-flex-grow: 1;
  -webkit-flex-grow: 1;
  -ms-flex-grow: 1;
  flex-grow: 1;
  -moz-flex-shrink: 1;
  -webkit-flex-shrink: 1;
  -ms-flex-shrink: 1;
  flex-shrink: 1;
  width: 100%; }
  @media screen {
    #main > .inner {
      padding: 0 5em 0.1em 5em ; }
      #main > .inner > section {
        padding: 5em 0 3em 0 ; } }



#sidebar {
  -moz-flex-grow: 0;
  -webkit-flex-grow: 0;
  -ms-flex-grow: 0;
  flex-grow: 0;
  -moz-flex-shrink: 0;
  -webkit-flex-shrink: 0;
  -ms-flex-shrink: 0;
  flex-shrink: 0;
  -moz-transition: margin-left 0.5s ease, box-shadow 0.5s ease;
  -webkit-transition: margin-left 0.5s ease, box-shadow 0.5s ease;
  -ms-transition: margin-left 0.5s ease, box-shadow 0.5s ease;
  transition: margin-left 0.5s ease, box-shadow 0.5s ease;
  background-color: #f5f6f7;
  position: relative; }

  #sidebar .toggle {
    overflow: hidden;
    position: absolute;
    text-align: center;
    text-indent: -15em;
    top: 0;
    width: 6em;
    z-index: 10000; }
    #sidebar .toggle:before {
      font-family: 'Font Awesome 5 Free';
      content: 'f0c9';  /*3-bar sidebar toggle icon*/
      left: 0;
      position: absolute;
      text-indent: 0;
      width: inherit; }

  @media screen {
    #sidebar {
      width: 12em; }
      #sidebar > .inner {
        padding: 1.66667em 1.66667em 1.33333em 1.66667em ;
        width: 12em; }
      #sidebar .toggle {
        left: 12em;
        line-height: 6.25em;}
        #sidebar .toggle:before {
          font-size: 1.5rem; }
      #sidebar.inactive {
        margin-left: -13em; } }

main.js

(function($) {
    var $window = $(window),
        $head = $('head'),
        $body = $('body');

        var $sidebar = $('#sidebar'),
            $sidebar_inner = $sidebar.children('.inner');

            $('<a href="#sidebar" class="toggle">Toggle</a>')
                .appendTo($sidebar)
                .on('click', function(event) {
                        event.preventDefault();
                        event.stopPropagation();
                        $sidebar.toggleClass('inactive');
                });
})(jQuery);

I’m getting this error:

Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of “text/html”. Strict MIME type checking is enforced for module scripts per HTML spec.

This happens when I try to access my Vite preview over my LAN at: http://192.168.x.x:3000/ from any Windows machine on my network.

It works correctly without errors on Linux / Android / IOS over the same network.

My vite.config.js and index.html page are as follows:

export default {
    root: "./src/",
    publicDir: "../public/",
    build: {
        outDir: "../dist/",
        emptyOutDir: true,
        reportCompressedSize: true,
    },
    server: {
        port: 3000,
        host: true,
        open: false,
    },

    worker: {
        format: 'es',
    },
    base: './',
};

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Site Header</title>
    <link rel="stylesheet" href="style.css" />
    <script type="module" src="main.js"></script>
  </head>
  <body>
    <header>
      <h1>Site Header</h1>
    </header>
    <section id="mainSection">
      <div id="canvasContainer"></div>
    </section>
    <footer>Site Footer</footer>
  </body>
</html>

For some reason, it just loads the bare HTML, no CSS and no JS. It generates that error trying to load the JS. At this point I’m not sure what to try; as far as I can tell everything is configured correctly.

I successfully write an entry of a tinyMCE form to a MYSQL database with PHP.
I can also retrieve the entry into an HTML table, retaining the formatting as expected.
However I can’t write it back into the tinyMCE editor.

Ive tried the following:
var editor=tinymce.get('tinymce-editor'); editor.setContents(data[0]['JournalEntry']);

but the tinyMCE editor is not populated with the JournalEntry column.

This is the javascript function – please note ‘flex-item-2’ is populated as expected

<script>
            function displayEntriesTable(data) {
                var content =
                    "<table style='background-color:pink;opacity:60%; display:flex;'>.     <tr><th style='width:300px;'> Created</th> <th> Entry </th> </tr>";

                //alert("This is a function to display entries table");
                for (let i = 0; i < data.length; i++) {
                    content +=
                        "<tr><td>" +
                        data[i]["userID"] +
                        "</td><td>" +
                        "<tr><td>" +
                        data[i]["DateCreated"] +
                        "</td><td>" +
                        data[i]["JournalEntry"] +
                        "</td></tr>";
                }

                content += "</table>";

                $("#flex-item-2").append(content);

                var editor=tinymce.get('tinymce-editor');
                editor.setContents(data[0]['JournalEntry']);

                

            }

            const flex1 = document.getElementById("flex-item-1");
            const flex2 = document.getElementById("flex-item-2");
            var br = document.createElement("br");

            document
                .getElementsByClassName("display_items")[0]
                .addEventListener("click", function () {
                    fetch("getJournalEntries-fetch-PDO.php", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/text",
                        },

                        //body: "request=true",
                        body: (request = true),
                    })
                        .then((response) => response.json()) // .then((data) => flex1.append(data))

                        .then((data) => {
                            displayEntriesTable(data);
                        });
                });
        </script>

This is my HTML for my form:

                    <form id="contentform" action="./includes/create_new_journal_entry.inc.php" method="POST">
                        <label for="content"></label>
                        <tinymce-editor
                        name="content"
                            id="content"
                            class = "tinymce"
                            api-key="My API Key here"
                            height="500"
                            menubar="false"
                            plugins="advlist autolink lists link image charmap preview anchor
                            searchreplace visualblocks code fullscreen
                            insertdatetime media table code help wordcount"
                            toolbar="undo redo | blocks | bold italic backcolor |
                                alignleft aligncenter alignright alignjustify |
                                bullist numlist outdent indent | removeformat | help"
                            content_style="body
      {
        font-family:Helvetica,Arial,sans-serif;
        font-size:14px
      }"
                        >
                            <!-- Adding some initial editor content -->
                            &lt;p&gt;Welcome to the TinyMCE Web Component
                            example!&lt;/p&gt;
                        </tinymce-editor>
                        <input type="submit" value="Write Entry" style="margin-top: 1rem">
                            
                    </input>
                    </form>

I am expecting the tinyMCE editor area be repopulated with the sucessfully queried data.

Thanks in advance

I’m building a restlet that will allow a Saved Search id to be passed in. The restlet will load and run the saved search and build a result from the rows. It’s simple code and it basically works (mostly).

I have so far found no clear way in the N/search API to provide values for any of the “Available Filters” configured into a search. In other words, those filters that in the NS UI show up at the top of the table view, where you can filter on columns etc. I’d like to be able to allow those to be populated in the input parameters to the restlet.

I have of course found how one can create filters and add them to a loaded saved search, but that’s not really what I want.

I acknowledge that this may not be possible.

I have a script that reads the content of some files using fetch method but when i try to read a dot file then “Cannot GET” is displayed.

async function viewFile(path) {
    const ext = path.split(".").pop().toLowerCase()
    const imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'bmp']

    if (imageExtensions.includes(ext)) { // Renderizar imagens no site
        renderImage(path)
    } else {
        const encodedPath = path.split('/').map(encodeURIComponent).join('/');
        const response = await fetch(encodedPath);
        const text = await response.text();

        if (['md', 'markdown', 'txt'].includes(ext)) {
            renderMarkdown(text);
        } else {
            renderCode(text, ext);
        }
    }
}

how can I fix that and display the dot file content?

After more than 8x BSOD, this JS/TS Language Service suddenly crashed and didn’t make my laptop BSOD.
Is there anyone has the similar event like me? How to stop this JS/TS Language Service madness?

I am using JS/TS language service because I am enrolling react coding bootcamp and the edited file cannot be saved, because Typescript/Javascript Language service hold me / review it first and this issue really bothers me.

And I don’t know what happened next time if I restart my PC and somehow it will make BSOD after restart few hours back when I start using VSCode again

Is there a tsconfig flag or eslint rule to disallow this ?

interface Order {
  title?: string;
  orderName?: string;
}

interface Product {
  title?: string;
  productId?: string;
}


var product: Product = {}
function filterOrder(order: Order) {
  if (order.orderName == null) return true;
}

filterOrder(product) // i want an error here

The problem is that passing a Product in filterOrder is a mistake by the developer. filterOrder should only filter Orders, not Products.

I know that based on the type definition, Product is a valid Order.

But in practice, this is just a coincidence that they have the same field name. I don’t want functions that should take Order also take Product

The function uses orderName and products don’t have that.

Strangely

If I comment Product.title, I get the an error Type 'Product' has no properties in common with type 'Order'

In modern Java, you can use the switch statement like this:

boolean isCool(day, month) {

  var isSad = switch(dayOfWeek) {
    case "Monday", "Tuesday" -> true;
    default -> false;
  };

  return switch (month) {
    case "June", "July", "August" -> true;
    default -> isSad;
  };

}

Quite cool, basically just allowing you to go for return switch and x = switch. Why cannot we do such marvellous thing yet in JS, and could it happen one day?

So, I was doing a lesson on Scrimba about JavaScript, when I were told to do this JavaScript challenge involving the style property.

But I forgot to select question via document.getElementById(). Surprisingly it works. The background color of the unselected element got changed when I press the button.

Why does it work?

Here’s a very simplified version of the code containing only the necessary stuff:

const revealBtn = document.getElementById('reveal-btn')
const answer = document.getElementById('answer') //with a selected element
// without a selected 'question' element

revealBtn.addEventListener('click', function() {
  answer.style.display = 'block'
  question.style.backgroundColor = "#68e1fd" // this works without the 'question'
  question.style.color = "#1434A4" // this works too
  revealBtn.style.display = "none"
})

/*
Challenge
1. When the button is clicked and the answer revealed, 
   change the background color to #68e1fd and text color
   to #1434A4 just in the "question" div.
2. When the answer is revealed, make the button disappear.
*/

.answer {
  display: none;
}

<html>

<head>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <header>
    <h1>Animal Trivia!</h1>
  </header>
  <div class="container">
    <div class="question-container">
      <div class="question" id="question">
        <p>
          How many whiskers does the average rabbit have?
        </p>
      </div>
    </div>
    <div id="answer" class="answer">
      <p>
        The average rabbit has 24 whiskers, 12 on each side!
        Amazingly, no two whiskers are the same length!
      </p>
    </div>
    <button id="reveal-btn">Reveal Answer</button>
  </div>
  <script src="index.js"></script>
</body>

</html>

React Element Resize Not Working

I’m trying to implement a resizable chat container in React, but the resize functionality isn’t working properly, already spent half of a day. I suspect the issue is in my mouseDownHandler function, specifically with the mouse position detection logic.

The resize functionality doesn’t work properly.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Resize Issue</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body { min-height: 100dvh; }
        #root { width: 100%; min-height: inherit; }
    </style>
</head>
<body>
    <div id="root"></div>
    <script type="module" src="main.jsx"></script>
</body>
</html>

.appContainer {
    width: 100vw;
    height: 100dvh;
    padding: 10px;
    display: flex;
    gap: 10px;
    background: #000;
}

.aside {
    background: #aaa;
    height: 100%;
    min-width: 320px;
    width: 500px;
}

.chatContainer {
    width: 100%;
    height: 100%;
    min-width: 400px;
    background: #aaa;
}

import React, { useState, useRef, useLayoutEffect } from "react";
import { createRoot } from "react-dom/client";

import styles from "Chat.module.css";

const root = createRoot(document.querySelector("#root"));

function Chat() {
    const MIN_WIDTH = 400;
    const MAX_WIDTH = 1400;
    const [width, setWidth] = useState(null);
    const container = useRef(null);
    const isMoving = useRef(false);
    const startX = useRef(null);
    const startWidth = useRef(null);

    useLayoutEffect(() => {
        const w = container.current.offsetWidth;
        setWidth(w);

        document.addEventListener("mousedown", mouseDownHandler);
        document.addEventListener("mousemove", mouseMoveHandler);
        document.addEventListener("mouseup", mouseUpHandler);
    }, []);

    function mouseDownHandler(e) {
        e.preventDefault();
        if (e.target !== container.current) return;

        const elem = container.current;
        const rect = elem.getBoundingClientRect();
        const x = e.clientX;

        startX.current = x;
        startWidth.current = elem.offsetWidth;

        if (rect.x - x + 15 >= 0) isMoving.current = true;
    }

    function mouseMoveHandler(e) {
        e.preventDefault();
        if (!isMoving.current) return;

        const delta = e.clientX - startX.current;
        let newWidth = startWidth.current - delta;

        if (newWidth < MIN_WIDTH) newWidth = MIN_WIDTH;
        if (newWidth > MAX_WIDTH) newWidth = MAX_WIDTH;

        setWidth(newWidth);
    }

    function mouseUpHandler(e) {
        e.preventDefault();
        if (isMoving.current) isMoving.current = false;
        startX.current = null;
        startWidth.current = null;
    }

    return (
        <>
            <section className={styles.chatContainer} style={width ? { width: `${width}px` } : null} ref={container}>
                <header className={styles.chatHeader}></header>
                <main className={styles.chat}></main>
                <div className={styles.chatMsgContainer}></div>
            </section>
        </>
    );
}

root.render(
    <main className={styles.appContainer}>
        <aside className={styles.aside}></aside>
        <Chat />
    </main>
);

I make Swiper.js slides containing a link to the slide specific page, but also use the Navigation module of Swiper to be able to slide through the slides.

I don’t know how I can overcome the issue that with the nav buttons on top i would still be able to click the link inside the slide?

the react code:

<Swiper
    modules={[Navigation]}
    navigation={{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    }}
    speed={0}
    loop={true}
>
    {projects.map((project) => (
        <SwiperSlide key={project.id}>
            <div
                className="slider__link"
                // onClick={() => router.push(getSlugPath('projects', project.slug as string))}
            >
                <Link href={getSlugPath('projects', project.slug as string)}>
                    <div className="slider__caption">
                        <RichText data={project.carrousel?.caption} />
                    </div>
                </Link>
        </SwiperSlide>
    ))}
    <div ref={prevButtonRef} className="swiper-button-prev"></div>
    <div ref={nextButtonRef} className="swiper-button-next"></div>
</Swiper>

i have tried different z-index values for link and the buttons but this would render the buttons useless (the take up the whole screen)
also tried other solutions like onClick methods on the slide__link div and so on but this didn’t result in any change either

I am getting a api respose which contains string. basically it contains code for a composable that I have to run in my FormBuilder. I have given a example of what I am trying to do below.

<script setup lang="ts">
import FormBuilder from 'FormBuilder'    
const apiResp = `
  import { ref, computed } from 'vue'
  // might include other imports like store
    
export const useFunc = (model) => {
  const multiLoader = async () => {
    try {
      const resp = await fetch('https://jsonplaceholder.typicode.com/todos/1')
      const data = await resp.json()
      return data
    } catch (error) {
      console.log(error)
    }
    return {}
  }
  const singleLoader1 = async () => {
    const str = ref('singleLoader1 is working properly')
    const test = computed(() => {
    console.log('model in singleLoader1', model)
      return model.input?.fName || 'no name'
    })
    console.log(str.value)
    try {
      const resp = await fetch('https://jsonplaceholder.typicode.com/todos/2')
      const data = await resp.json()
      return data
    } catch (error) {
      console.log(error)
    }
    return {}
  }
  const singleLoader2 = async () => {
    try {
      const resp = await fetch('https://jsonplaceholder.typicode.com/todos/3')
      const data = await resp.json()
      return data
    } catch (error) {
      console.log(error)
    }
    return {}
  }
  const fNameLoader = async () => {
    try {
      const resp = await fetch('https://jsonplaceholder.typicode.com/todos/4')
      const data = await resp.json()
      return data?.title
    } catch (error) {
      console.log(error)
    }
    return {}
  }
  const test = async () => {
    const url = 'https://jsonplaceholder.typicode.com/todos/4'
    try {
      const resp = await fetch(url)
      const data = await resp.json()
      const spl = data?.title?.split(' ')
      return spl.map(op => ({ text: op, value: op }))
    } catch (error) {
      console.log(error)
    }
    return {}
  }
  const test2 = () => 'porro'
  const kubeconfigFunc = () => 'miao miap'
  const scalingRulesLoader = async () => {
    try {
      const resp = await fetch('https://jsonplaceholder.typicode.com/todos/5')
      const data = await resp.json()
      return '1Gi'
    } catch (error) {
      console.log(error)
    }
    return ''
  }
  return {
    multiLoader,
    singleLoader1,
    singleLoader2,
    fNameLoader,
    kubeconfigFunc,
    test,
    test2,
    scalingRulesLoader,
  }
}
`

    const blob = new Blob([apiResp], { type: 'application/javascript' })
    const moduleUrl = URL.createObjectURL(blob)
    const dynamicModule = await import(moduleUrl)
    const { useFunc } = dynamicModule

</script>
<template>
<FormBUilder :logic="useFunc">
</template>

I have tried using Blob, eval, new Function. These works only for function, but if I use a ref or computed or try to import anything in the api response string, it doesn’t work.I do not want to install a separate store in my FormBuilder to keep it light. Is it possible to convert the apiResp to to a js file and then execute it like a normal composable??