Category: javascript

I have a page, you can see it on github. The strange thing is that the page works fine locally on my computer but it does not work online after I uploaded on to github.

This is the page
https://vyha18.github.io/video/van2.html#

All css, javascript and html are in the van2.html#, you can see the source code by viewing source or you can click here “view-source:https://vyha18.github.io/video/van2.html#”

You can copy all the source code to a html file on your PC and try to test it.

Make sure you change 'van.mp3' to 'https://vyha18.github.io/video/van.mp3' on your own html file.

Note: To test the page, click on “Tong Hop Van“, then click OK. If you can hear some sound, then it works.

Note: I saved the html file using UTF-8 before uploading it to github.

What is causing the problem?

When we add additional classes to our custom block they are not being added in the editor. When we save the block and view the front-end the additional classes are showing. But in the editor they won’t show up.

Here is the code of our block:

import { useBlockProps } from '@wordpress/block-editor';


export default {
    name: 'erik-dekker/button',
    title: 'Knop',
    icon: 'button',
    category: 'erik-dekker',
    edit: () => {
        const blockProps = useBlockProps();

        return (
            <div { ...blockProps }>hello world!</div>
        );
    },
    save: () => {
        const blockProps = useBlockProps.save();

        return (
            <div { ...blockProps }>hello world!</div>
        );
    }
}

Thanks for your time!

I have this Ads unit

<script type="text/javascript">
google_ad_client = "ca-pub-2158343444694791";/* AD7 */
google_ad_slot = "AD7";
google_ad_width = 300;
google_ad_height = 250;
</script>
<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>

I would like to place a script on my website’s homepage and show the banner 5 times in deffrent places.

The website is developed using NodeJs, NuxtJs3, and VueJs3 with both SSR and SPA.

However, as you know, I can not place script tags inside the vuejs template.

Can you please guide me on how to render this correctly?
So far, I have attempted the following:

**Tempalte **

<div class="my_div"></div>

Javascript

nuxt.hook("page:loading:end", () => {
  loaderLoading.value = false
  setTimeout(() => {
    var div = document.querySelector('.my_div');

    // Create a script element
    var script = document.createElement('script');

    // Set the type attribute
    script.type = 'text/javascript';

    // Set the source (src) attribute
    script.src = '//pagead2.googlesyndication.com/pagead/show_ads.js';

    // Create an inline script element for the ad parameters
    var inlineScript = document.createElement('script');
    inlineScript.type = 'text/javascript';
    inlineScript.innerHTML = `
    google_ad_client = "ca-pub-2158343444694791";
    /* AD7 */
    google_ad_slot = "AD7";
    google_ad_width = 300;
    google_ad_height = 250;
`;
    console.log("test")
    // Append the inline script to the div
    div.appendChild(inlineScript);

    // Append the script to the div
    div.appendChild(script);

  }, 2000);
}) 

The problem i have a lot of console errors such as :

Uncaught TagError: adsbygoogle.push() error: Ad client is missing from the slot.
Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
Unchecked runtime.lastError: The message port closed before a response was received.

Please advise on the correct placement of ad units. Is there a library that supports Google Ads Manager ad units? Please note that this is different from Google AdSense.

Regards

I have a container (with a background image) and inside this container there is some text (chosen by reading value from a text input). To fit the text I’m using textFit script. User can also choose the font and there is the major problem.

font-size

For reference I’m putting some code:

<input type="text" id="ChosenText" autocomplete="off" placeholder="Type text here" oninput="refreshPicture()">

<select id="ChosenFont" onchange="changeFontFamily(true)">/*options are generated by JS*/</select>

<div id="slide-container">
        <span id="textOnPicture" class="textOnPicture textFitted">/*here JS puts text from an input*/</span>
</div>

const resultContainer = document.querySelector("#slide-container");
const chosenText = document.querySelector("#ChosenText");
const chosenFont = document.querySelector("#ChosenFont");
const textOnPicture = document.querySelector(".textOnPicture");

function refreshPicture() {
  textOnPicture.textContent = chosenText.value;
  textFit(resultContainer);
}

async function reloadPicture(manualChoose) { //function is called by pressing "Reload" button and it is async because when it isn't, picture doesn't display for unknown reason
  await changeFontFamily(manualChoose); //here is the thing, I want to change font family
  refreshPicture();
}

function changeFontFamily(manualChoose) {
  let fontFamily;
  if (!!manualChoose) {//when triggered by changing value of input
    fontFamily = chosenFont.value;
    textOnPicture.style.setProperty("--font-family", fontFamily); //in css this property is obviously assigned to font-family of textOnPicture
    textFit(resultContainer);
  } else {//when triggered by "Reload" button, then random picture, font and color are chosen
    fontFamily = fonts[Math.floor(Math.random() * fonts.length)].name;
    textOnPicture.style.setProperty("--font-family", fontFamily);
    chosenFont.value = fontFamily;
  }
}

The problem is when I change font family (by pressing the button and choosing it randomly or manually by changing value) font size doesn’t change and sometimes text is outside of the container. But when I call textFit function again it fixes.

“await” before changeFontFamily function should wait until funtion finish its work, right? So why it isn’t? textFit is called after that but it seems like browser is doing it in wrong order or textFit ignores that font has been changed.

Due to every font family basically has its own size the text is sometimes too small or too big after change of font family and it looks terrible. Of course I would like to my text always have correct size.

I need to make a sync get rest call and i dont want to deffer it, i want to get result and act upon the value for next processing.

Based on input to a external api call i get a result and with the response i do some processing so i cant deffer the call.

I tried a call back function :

$scope.getRxHccValue = function (diagDesc) {
                     problemsModel.getRxHccValue(diagDesc, function () {
                        return problemsModel.rxHccValue;
                    });
                }

but while fetching call deffered.promise doesnt not return value synchronously

var deffered = this.$q.defer();
            this.$http.get(this.baseUrl + '/getRxHcc', { params: { diagDesc: diagDesc } })
                .success(function (data) {
                        deffered.resolve(data);
                });
            return deffered.promise;

I am new to React and Next.js, whilst upgrading from Node V16 to Node V18. One of the changes was to MUI from v4 to v5, currently using the packages

"@emotion/babel-plugin": "^11.11.0",
"@emotion/core": "^10.1.1",
"@emotion/react": "^11.11.4",
"@emotion/server": "^11.11.0",
"@emotion/styled": "^11.11.5",
"@mui/icons-material": "^5.15.13",
"@mui/lab": "^5.0.0-alpha.168",
"@mui/material": "^5.15.13".
"next": "14.1.3"

I ran all the codemods that were suggested on the official MUI documentation found here https://mui.com/material-ui/migration/v5-style-changes/. Unfortunately the solution did not find certain packages. So I Googled a bit and found this post: https://github.com/styled-components/styled-components/issues/2502. I copied his implementation then ran into this problem after some basic debugging. TypeError: Cannot read properties of undefined (reading ‘main’)

the _document.js code

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';
import { renderToString } from 'react-dom/server';
import { extractCritical } from '@emotion/server';

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);

      // Extract critical CSS
      const emotionStyles = extractCritical(<Main />);
      const emotionCss = emotionStyles.css;

      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            <style dangerouslySetInnerHTML={{ __html: emotionCss }} />
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }

  render() {
    return (
      <Html lang="en">
        <Head>
          <meta name="description" content="" />
          <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        </Head>
        <body>
          <noscript>You need JavaScript to use this web application</noscript>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Loading.js code (the only place where it calls CircularProgress package

import * as React from 'react';
import CircularProgress from '@mui/material/CircularProgress';
import styled from '@emotion/styled'

import { createTheme, ThemeProvider } from '@mui/system';


const theme = createTheme();
const Container = styled.div`
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
`;

function Loading() {
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    function tick() {
      // reset when reaching 100%
      setProgress((oldProgress) => (oldProgress >= 100 ? 0 : oldProgress + 1));
    }

    const timer = setInterval(tick, 20);
    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <ThemeProvider theme={theme}>
    <Container>
      <CircularProgress variant="determinate" value={progress} />
    </Container>
    </ThemeProvider>
  );
}

export default Loading;

and the error that is giving me:

TypeError: Cannot read properties of undefined (reading 'main')
    at CircularProgressRoot.ownerState.ownerState (PATHnode_modules@muimaterialnodeCircularProgressCircularProgress.js:82:58)
    at processStyleArg ([email protected]:66:67)
    at [email protected]:172:25
    at handleInterpolation (PATHnode_modules@emotionserializedistemotion-serialize.cjs.dev.js:149:24)
    at Object.serializeStyles (PATHnode_modules@emotionserializedistemotion-serialize.cjs.dev.js:274:15)
    at PATHnode_modules@emotionstyledbasedistemotion-styled-base.cjs.dev.js:167:34
    at PATHnode_modules@emotionreactdistemotion-element-f93e57b0.cjs.dev.js:85:16
    at renderWithHooks (PATHnode_modulesreact-domcjsreact-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (PATHnode_modulesreact-domcjsreact-dom-server.browser.development.js:5731:15)
    at renderElement (PATHnode_modulesreact-domcjsreact-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (PATHnode_modulesreact-domcjsreact-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (PATHnode_modulesreact-domcjsreact-dom-server.browser.development.js:6076:14)
    at renderForwardRef (PATHnode_modulesreact-domcjsreact-dom-server.browser.development.js:5859:5)
    at renderElement (PATHnode_modulesreact-domcjsreact-dom-server.browser.development.js:6005:11)
    at renderNodeDestructiveImpl (PATHnode_modulesreact-domcjsreact-dom-server.browser.development.js:6104:11) {
  page: '/'
}

I have tried reading Stack Overflow comments, asking Chatgpt, Perplexity AI, Youtube and CircularProgress documentation for guidance yet I still feel lost.

I have a table made with js based on data from 2 arrays of objects that I have.

One of the arrays contains all the subzones and the second array contains microzones, microzones can be children of the same subzone.

I made a function that builds a table so that the data will be placed like this in the table(take into consideration that the row-span in this example for SI-N1 is 3 while microzone column has 3 rows for microzone 1,2 and 3 since they are children of subzone SI-N1)

My code works when I’m just displaying the data like this

const subZones = [
    {
        "creationUserId": 1913,
        "locationZoneId": 1,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "SI-N4",
        "id": 65,
        "creationDate": "2022-12-08 13:04:23"
    },
    {
        "creationUserId": 2,
        "locationZoneId": 1,
        "lastUpdateDate": "2019-12-18 10:39:27",
        "lastUpdateUserId": 2,
        "active": true,
        "description": "SI-N1",
        "id": 1,
        "controlId": "9",
        "creationDate": "2019-11-15 15:03:09"
    },
    {
        "creationUserId": 2,
        "locationZoneId": 1,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "OF-N3",
        "id": 49,
        "creationDate": "2020-11-26 16:44:41"
    },
    {
        "creationUserId": 2,
        "locationZoneId": 1,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "PU-N2",
        "id": 28,
        "controlId": "18",
        "creationDate": "2019-12-18 11:39:44"
    },
    {
        "creationUserId": 2,
        "locationZoneId": 1,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "PU-N1",
        "id": 29,
        "controlId": "19",
        "creationDate": "2019-12-18 11:39:44"
    },
    {
        "creationUserId": 2,
        "locationZoneId": 1,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "PU-N4",
        "id": 39,
        "controlId": "20",
        "creationDate": "2020-11-24 16:24:21"
    },
    {
        "creationUserId": 2,
        "locationZoneId": 1,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "OF-N2",
        "id": 48,
        "controlId": "22",
        "creationDate": "2020-11-26 16:44:41"
    },
    {
        "creationUserId": 2,
        "locationZoneId": 1,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "OF-N1",
        "id": 47,
        "controlId": "23",
        "creationDate": "2020-11-26 16:44:41"
    },
    {
        "creationUserId": 2,
        "locationZoneId": 1,
        "lastUpdateDate": "2019-12-18 10:39:19",
        "lastUpdateUserId": 2,
        "active": true,
        "description": "SI-N2",
        "id": 2,
        "creationDate": "2019-11-15 15:03:09"
    },
    {
        "creationUserId": 2,
        "locationZoneId": 1,
        "lastUpdateDate": "2023-12-15 16:26:38",
        "lastUpdateUserId": 2,
        "active": false,
        "description": "SI-N3",
        "id": 3,
        "creationDate": "2019-11-15 15:03:09"
    }
];

const microZones = [
    {
        "creationUserId": 1913,
        "locationSubZoneId": 1,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "COLONIA NUEVA DURANGO",
        "id": 37,
        "creationDate": "2022-12-08 00:58:56"
    },
    {
        "creationUserId": 1913,
        "locationSubZoneId": 1,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "GUAJAYVI",
        "id": 39,
        "creationDate": "2022-12-08 00:59:48"
    },
    {
        "creationUserId": 1913,
        "locationSubZoneId": 1,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "NUEVA CONQUISTA",
        "id": 40,
        "creationDate": "2022-12-08 00:59:54"
    },
    {
        "creationUserId": 1913,
        "locationSubZoneId": 1,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "SANTANI",
        "id": 41,
        "creationDate": "2022-12-08 13:00:00"
    },
    {
        "creationUserId": 1913,
        "locationSubZoneId": 1,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "VILLA DEL ROSARIO",
        "id": 42,
        "creationDate": "2022-12-08 13:00:06"
    },
    {
        "creationUserId": 1913,
        "locationSubZoneId": 1,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "VILLA YGATIMI",
        "id": 43,
        "creationDate": "2022-12-08 13:00:38"
    },
    {
        "creationUserId": 1913,
        "locationSubZoneId": 2,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "ANTEQUERA",
        "id": 44,
        "creationDate": "2022-12-08 13:01:05"
    },
    {
        "creationUserId": 1913,
        "locationSubZoneId": 2,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "LIBERACION",
        "id": 45,
        "creationDate": "2022-12-08 13:01:11"
    },
    {
        "creationUserId": 1913,
        "locationSubZoneId": 2,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "SANTA ROSA DEL AGUARAY",
        "id": 46,
        "creationDate": "2022-12-08 13:01:48"
    },
    {
        "creationUserId": 1913,
        "locationSubZoneId": 2,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "TACUATI",
        "id": 47,
        "creationDate": "2022-12-08 13:01:55"
    },
    {
        "creationUserId": 1913,
        "locationSubZoneId": 3,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "CAPITAN BADO",
        "id": 48,
        "creationDate": "2022-12-08 13:02:59"
    },
    {
        "creationUserId": 1913,
        "locationSubZoneId": 3,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "PEDRO JUAN CABALLERO",
        "id": 49,
        "creationDate": "2022-12-08 13:03:06"
    },
    {
        "creationUserId": 1913,
        "locationSubZoneId": 65,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "CONCEPCION",
        "id": 50,
        "creationDate": "2022-12-08 13:04:39"
    },
    {
        "creationUserId": 1913,
        "locationSubZoneId": 1,
        "lastUpdateDate": "2023-01-25 11:55:19",
        "lastUpdateUserId": 1913,
        "active": true,
        "description": "CURUGUATY",
        "id": 38,
        "creationDate": "2022-12-08 00:59:03"
    }
];

function generateZoneTable(subzones, microzones, isEdition) {
    const tableBody = document.getElementById('tBodyContainerLocationSubZone');

    subzones.forEach((subzone) => {
        const subzoneMicrozones = microzones.filter((microzone) => microzone.locationSubZoneId === subzone.id);
        const subzoneRowCount = subzoneMicrozones.length;

        subzoneMicrozones.forEach((microzone, index) => {
            const subzoneRow = document.createElement('tr');

            if (isEdition){
                if (index === 0) {
                    //columna para desasociar
                    const unBind = document.createElement('td');
                    unBind.innerHTML = '<i class="mdi mdi-link-off"></i>'; // Insert icon or content
                    unBind.setAttribute('rowspan', subzoneRowCount);
                    subzoneRow.appendChild(unBind);
                }

                //columna para subzona
                const subzoneCell = document.createElement('td');
                subzoneCell.textContent = subzone.description;
                subzoneCell.setAttribute('rowspan', subzoneRowCount);

                //icono de ojo para la subzona
                const subzoneIcon = document.createElement('i');
                subzoneIcon.classList.add('mdi', 'mdi-eye', 'ml-1');
                subzoneIcon.style.cursor = 'pointer';
                subzoneIcon.addEventListener('click', () => {
                    showLocationSubZone(subzone.id, "zoneView", false);
                });
                subzoneCell.appendChild(subzoneIcon);
                subzoneRow.appendChild(subzoneCell);
            } else {
                if (index === 0) {
                    //columna para subzona
                    const subzoneCell = document.createElement('td');
                    subzoneCell.textContent = subzone.description;
                    subzoneCell.setAttribute('rowspan', subzoneRowCount);

                    //icono de ojo para la subzona
                    const subzoneIcon = document.createElement('i');
                    subzoneIcon.classList.add('mdi', 'mdi-eye', 'ml-1');
                    subzoneIcon.style.cursor = 'pointer';
                    subzoneIcon.addEventListener('click', () => {
                        showLocationSubZone(subzone.id, "zoneView", false);
                    });
                    subzoneCell.appendChild(subzoneIcon);
                    subzoneRow.appendChild(subzoneCell);
                }
            }
            //columna para microzona
            const microzoneCell = document.createElement('td');
            microzoneCell.textContent = microzone.description;

            // icono de ojo para la microzona
            const microzoneIcon = document.createElement('i');
            microzoneIcon.classList.add('mdi', 'mdi-eye', 'ml-1');
            microzoneIcon.style.cursor = 'pointer'; // Cambiar el cursor al puntero
            microzoneIcon.addEventListener('click', () => {
                showLocationSubZone(microzone.id, "zoneView", true);
            });
            microzoneCell.appendChild(microzoneIcon);

            subzoneRow.appendChild(microzoneCell);
            tableBody.appendChild(subzoneRow);
        });
    });
}

generateZoneTable(subZones, microZones, false);

/* Add border to table and cells */
.table-bordered {
    border: 1px solid #dee2e6;
}

.table-bordered th,
.table-bordered td {
    border: 1px solid #dee2e6;
}

/* Add padding to table cells */
.table th,
.table td {
    padding: 0.75rem;
}

/* Center the content of table cells */
.table td,
.table th {
    text-align: center;
}

/* Add margin to the table */
#zoneGeographicAssociation {
    margin-top: 10px; /* Adjust as needed */
}

/* Style the button */
.btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-secondary:hover {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
}

.btn-secondary:focus, .btn-secondary.focus {
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

.btn-secondary.disabled, .btn-secondary:disabled {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

/* Adjust spacing between elements */
.input-group {
    margin-bottom: 10px;
}

/* Optional: Add hover effect to table rows */
.table-hover tbody tr:hover {
    background-color: #f8f9fa;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css">
<div class="col-md-12 col-sm-12 mt-3">
    <div class="row">
        <div class="input-group">
            <h4>Asociación Geográfica</h4>
            <button type="button" class="btn btn-secondary btn-sm ml-1 " onclick="createLocationSubZone(true)">Agregar</button>
        </div>
        <table class="table table-bordered table-centered mb-0 mt-3" id="zoneGeographicAssociation" style="width:100%;">
            <thead>
                <tr>
                    <th class="w-50">Sub-Zonas</th>
                    <th class="w-50">Micro-Zonas</th>
                </tr>
            </thead>
            <tbody id="tBodyContainerLocationSubZone">
            </tbody>
        </table>
    </div>
</div>

However whenever I need to edit the data then my HTML transforms to add an extra column before subzone with the header “desasociar” and the value of the isEdition parameter becomes true and that’s when my table gets all messed up and it looks like this

const subZones = [
    {
        "creationUserId": 1913,
        "locationZoneId": 1,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "SI-N4",
        "id": 65,
        "creationDate": "2022-12-08 13:04:23"
    },
    {
        "creationUserId": 2,
        "locationZoneId": 1,
        "lastUpdateDate": "2019-12-18 10:39:27",
        "lastUpdateUserId": 2,
        "active": true,
        "description": "SI-N1",
        "id": 1,
        "controlId": "9",
        "creationDate": "2019-11-15 15:03:09"
    },
    {
        "creationUserId": 2,
        "locationZoneId": 1,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "OF-N3",
        "id": 49,
        "creationDate": "2020-11-26 16:44:41"
    },
    {
        "creationUserId": 2,
        "locationZoneId": 1,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "PU-N2",
        "id": 28,
        "controlId": "18",
        "creationDate": "2019-12-18 11:39:44"
    },
    {
        "creationUserId": 2,
        "locationZoneId": 1,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "PU-N1",
        "id": 29,
        "controlId": "19",
        "creationDate": "2019-12-18 11:39:44"
    },
    {
        "creationUserId": 2,
        "locationZoneId": 1,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "PU-N4",
        "id": 39,
        "controlId": "20",
        "creationDate": "2020-11-24 16:24:21"
    },
    {
        "creationUserId": 2,
        "locationZoneId": 1,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "OF-N2",
        "id": 48,
        "controlId": "22",
        "creationDate": "2020-11-26 16:44:41"
    },
    {
        "creationUserId": 2,
        "locationZoneId": 1,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "OF-N1",
        "id": 47,
        "controlId": "23",
        "creationDate": "2020-11-26 16:44:41"
    },
    {
        "creationUserId": 2,
        "locationZoneId": 1,
        "lastUpdateDate": "2019-12-18 10:39:19",
        "lastUpdateUserId": 2,
        "active": true,
        "description": "SI-N2",
        "id": 2,
        "creationDate": "2019-11-15 15:03:09"
    },
    {
        "creationUserId": 2,
        "locationZoneId": 1,
        "lastUpdateDate": "2023-12-15 16:26:38",
        "lastUpdateUserId": 2,
        "active": false,
        "description": "SI-N3",
        "id": 3,
        "creationDate": "2019-11-15 15:03:09"
    }
];

const microZones = [
    {
        "creationUserId": 1913,
        "locationSubZoneId": 1,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "COLONIA NUEVA DURANGO",
        "id": 37,
        "creationDate": "2022-12-08 00:58:56"
    },
    {
        "creationUserId": 1913,
        "locationSubZoneId": 1,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "GUAJAYVI",
        "id": 39,
        "creationDate": "2022-12-08 00:59:48"
    },
    {
        "creationUserId": 1913,
        "locationSubZoneId": 1,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "NUEVA CONQUISTA",
        "id": 40,
        "creationDate": "2022-12-08 00:59:54"
    },
    {
        "creationUserId": 1913,
        "locationSubZoneId": 1,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "SANTANI",
        "id": 41,
        "creationDate": "2022-12-08 13:00:00"
    },
    {
        "creationUserId": 1913,
        "locationSubZoneId": 1,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "VILLA DEL ROSARIO",
        "id": 42,
        "creationDate": "2022-12-08 13:00:06"
    },
    {
        "creationUserId": 1913,
        "locationSubZoneId": 1,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "VILLA YGATIMI",
        "id": 43,
        "creationDate": "2022-12-08 13:00:38"
    },
    {
        "creationUserId": 1913,
        "locationSubZoneId": 2,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "ANTEQUERA",
        "id": 44,
        "creationDate": "2022-12-08 13:01:05"
    },
    {
        "creationUserId": 1913,
        "locationSubZoneId": 2,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "LIBERACION",
        "id": 45,
        "creationDate": "2022-12-08 13:01:11"
    },
    {
        "creationUserId": 1913,
        "locationSubZoneId": 2,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "SANTA ROSA DEL AGUARAY",
        "id": 46,
        "creationDate": "2022-12-08 13:01:48"
    },
    {
        "creationUserId": 1913,
        "locationSubZoneId": 2,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "TACUATI",
        "id": 47,
        "creationDate": "2022-12-08 13:01:55"
    },
    {
        "creationUserId": 1913,
        "locationSubZoneId": 3,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "CAPITAN BADO",
        "id": 48,
        "creationDate": "2022-12-08 13:02:59"
    },
    {
        "creationUserId": 1913,
        "locationSubZoneId": 3,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "PEDRO JUAN CABALLERO",
        "id": 49,
        "creationDate": "2022-12-08 13:03:06"
    },
    {
        "creationUserId": 1913,
        "locationSubZoneId": 65,
        "lastUpdateUserId": 0,
        "active": true,
        "description": "CONCEPCION",
        "id": 50,
        "creationDate": "2022-12-08 13:04:39"
    },
    {
        "creationUserId": 1913,
        "locationSubZoneId": 1,
        "lastUpdateDate": "2023-01-25 11:55:19",
        "lastUpdateUserId": 1913,
        "active": true,
        "description": "CURUGUATY",
        "id": 38,
        "creationDate": "2022-12-08 00:59:03"
    }
];

function generateZoneTable(subzones, microzones, isEdition) {
    const tableBody = document.getElementById('tBodyContainerLocationSubZone');

    subzones.forEach((subzone) => {
        const subzoneMicrozones = microzones.filter((microzone) => microzone.locationSubZoneId === subzone.id);
        const subzoneRowCount = subzoneMicrozones.length;

        subzoneMicrozones.forEach((microzone, index) => {
            const subzoneRow = document.createElement('tr');

            if (isEdition){
                if (index === 0) {
                    //columna para desasociar
                    const unBind = document.createElement('td');
                    unBind.innerHTML = '<i class="mdi mdi-link-off"></i>'; // Insert icon or content
                    unBind.setAttribute('rowspan', subzoneRowCount);
                    subzoneRow.appendChild(unBind);
                }

                //columna para subzona
                const subzoneCell = document.createElement('td');
                subzoneCell.textContent = subzone.description;
                subzoneCell.setAttribute('rowspan', subzoneRowCount);

                //icono de ojo para la subzona
                const subzoneIcon = document.createElement('i');
                subzoneIcon.classList.add('mdi', 'mdi-eye', 'ml-1');
                subzoneIcon.style.cursor = 'pointer';
                subzoneIcon.addEventListener('click', () => {
                    showLocationSubZone(subzone.id, "zoneView", false);
                });
                subzoneCell.appendChild(subzoneIcon);
                subzoneRow.appendChild(subzoneCell);
            } else {
                if (index === 0) {
                    //columna para subzona
                    const subzoneCell = document.createElement('td');
                    subzoneCell.textContent = subzone.description;
                    subzoneCell.setAttribute('rowspan', subzoneRowCount);

                    //icono de ojo para la subzona
                    const subzoneIcon = document.createElement('i');
                    subzoneIcon.classList.add('mdi', 'mdi-eye', 'ml-1');
                    subzoneIcon.style.cursor = 'pointer';
                    subzoneIcon.addEventListener('click', () => {
                        showLocationSubZone(subzone.id, "zoneView", false);
                    });
                    subzoneCell.appendChild(subzoneIcon);
                    subzoneRow.appendChild(subzoneCell);
                }
            }
            //columna para microzona
            const microzoneCell = document.createElement('td');
            microzoneCell.textContent = microzone.description;

            // icono de ojo para la microzona
            const microzoneIcon = document.createElement('i');
            microzoneIcon.classList.add('mdi', 'mdi-eye', 'ml-1');
            microzoneIcon.style.cursor = 'pointer'; // Cambiar el cursor al puntero
            microzoneIcon.addEventListener('click', () => {
                showLocationSubZone(microzone.id, "zoneView", true);
            });
            microzoneCell.appendChild(microzoneIcon);

            subzoneRow.appendChild(microzoneCell);
            tableBody.appendChild(subzoneRow);
        });
    });
}

generateZoneTable(subZones, microZones, true);

/* Add border to table and cells */
.table-bordered {
    border: 1px solid #dee2e6;
}

.table-bordered th,
.table-bordered td {
    border: 1px solid #dee2e6;
}

/* Add padding to table cells */
.table th,
.table td {
    padding: 0.75rem;
}

/* Center the content of table cells */
.table td,
.table th {
    text-align: center;
}

/* Add margin to the table */
#zoneGeographicAssociation {
    margin-top: 10px; /* Adjust as needed */
}

/* Style the button */
.btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-secondary:hover {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
}

.btn-secondary:focus, .btn-secondary.focus {
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

.btn-secondary.disabled, .btn-secondary:disabled {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

/* Adjust spacing between elements */
.input-group {
    margin-bottom: 10px;
}

/* Optional: Add hover effect to table rows */
.table-hover tbody tr:hover {
    background-color: #f8f9fa;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css">
<div class="col-md-12 col-sm-12 mt-3">
    <div class="row">
        <div class="input-group">
            <h4>Asociación Geográfica</h4>
            <button type="button" class="btn btn-secondary btn-sm ml-1 " onclick="createLocationSubZone(true)">Agregar</button>
        </div>
        <table class="table table-bordered table-centered mb-0 mt-3" id="zoneGeographicAssociation" style="width:100%;">
            <thead>
                <tr>
                    <th class="w-10">Desasociar</th>
                    <th class="w-40">Sub-Zonas</th>
                    <th class="w-50">Micro-Zonas</th>
                </tr>
            </thead>
            <tbody id="tBodyContainerLocationSubZone">
            </tbody>
        </table>
    </div>
</div>

The behaviour I’m expecting to get is just an extra column at the beggining of the table with an icon that will have a function later(this part not important now) the extra column with the icon is supposed to share the same rowspan as the subzone, the rest needs to look the same but my table is all messed up.

Any help is appreciated

I am using highcharts. Everything seems fine but I am not sure how to make the series text (LLLL! LLLL! LLLL!, XYZM XYZM XYZM XYZM) responsive/ wrap text depending upon the screen size? Right now, if I minimize the screen, the text overlaps on each other. Is there a way to make the text wrap instead of overlapping? Here is my code.

// container7
var chartOptions = {
  chart: {
    type: 'column',
    inverted: true,
    height: 200


  },
  title: {
    text: ''
  },
  xAxis: {
    lineColor: 'white',
    categories: ['ABCD'],
    labels: {
      padding: 40, // Add padding of 40 to the x-axis labels
      style: {
        fontSize: '12px' // Adjust the font size as needed
      }
    }
  },
  yAxis: {
    allowDecimals: false,
    max: 100,
    title: {
      text: ''
    },
    labels: {
      enabled: false // Hide y-axis labels
    },
    gridLineWidth: 0 // Remove grid lines
  },
  plotOptions: {
    column: {
      stacking: 'normal', // this will be our default
      dataLabels: {
        enabled: true,
        style: {
          color: 'black', // Set font color to black
          fontSize: '13px', // Set font size to 12px
          textShadow: 'none' // Remove text shadow
        },
        backgroundColor: 'rgba(0, 0, 0, 0)', // Set background color to transparent
        formatter: function() {
          return this.series.name + ': ' + Highcharts.numberFormat(this.y, 0) + '%';
        }
      }
    }
  },


  colors: ['#d37295', '#fabfd2'],
  series: [{
    name: 'LLLL!LLLL!LLLL!LLLL!LLLL!LLLL!LLLL!',
    data: [57]
  }, {
    name: 'XYZM XYZMXYZMXYZMXYZM XYZMXYZM XYZM XYZM',
    data: [43]
  }],
  legend: {
    enabled: false // Hide the legend
  },
  credits: {
    enabled: false // Hide the credits
  }
};

// Render the chart using Highcharts
Highcharts.chart('container7', chartOptions);

<script src="https://code.highcharts.com/highcharts.js"></script>
<h2>... look like this:</h2>
<div id="container7" style=" border: 1px solid lightgray;"></div>

I have the following script ready for calculating the attendance of staff

index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Table</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center mb-5">Dynamic Table</h1>
        <form id="myForm">
            <table class="table">
                <thead>
                    <tr>
                        <th>Description</th>
                        <th>Start Time</th>
                        <th>End Time</th>
                        <th>Time Taken</th>
                        <th>Total Time Taken</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input type="text" name="description[]" class="form-control">
                        </td>
                        <td>
                            <input type="datetime-local" name="start_time[]" class="form-control start_time" required>
                        </td>
                        <td>
                            <input type="datetime-local" name="end_time[]" class="form-control end_time" required>
                        </td>
                        <td>
                            <input type="text" name="time_taken[]" class="form-control time_taken" readonly>
                        </td>
                        <td>
                            <input type="text" name="total_time_taken[]" class="form-control total_time_taken" readonly>
                        </td>
                        <td>
                            <i class="fas fa-trash delete-row" style="display: none;"></i>
                        </td>
                    </tr>
                </tbody>
            </table>
            <button type="button" class="btn btn-primary" id="addRow">Add Row</button>
            <button type="button" class="btn btn-primary" id="validate" style="display: none;">Validate</button>
            <button type="submit" class="btn btn-primary" id="submit" style="display: none;">Submit</button>
            <p class="error-message"></p>
        </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

script.js

$(document).ready(function() {
    let rowCounter = 1;
    let totalTimeTaken = 0;

    // Function to calculate time difference
    function calculateTimeDifference(start, end) {
        const startDate = new Date(start);
        const endDate = new Date(end);

        const diffInMilliseconds = Math.abs(endDate - startDate);
        const days = Math.floor(diffInMilliseconds / (1000 * 60 * 60 * 24));
        const hours = Math.floor((diffInMilliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((diffInMilliseconds % (1000 * 60 * 60)) / (1000 * 60));

        return `${days} days ${hours} hrs ${minutes} mins`;
    }

    // Function to calculate total time taken
    function calculateTotalTimeTaken(timeTakenArray) {
        let totalTimeTaken = 0;

        timeTakenArray.forEach(timeTaken => {
            totalTimeTaken += timeTaken;
        });

        return totalTimeTaken;
    }

    // Function to create a new row
    function createNewRow() {
        if (rowCounter > 1) {
            $('input[name="start_time[]"]:last').attr('readonly', true);
            $('.delete-row:last').show();
        }

        const rowHtml = `<tr>
                <td>
                    <textarea name="description[]" class="form-control" rows="1"></textarea>
                </td>
                <td>
                    <input type="datetime-local" name="start_time[]" class="form-control start_time" required>
                </td>
                <td>
                    <input type="datetime-local" name="end_time[]" class="form-control end_time" required>
                </td>
                <td>
                    <input type="text" name="time_taken[]" class="form-control time_taken" readonly>
                </td>
                <td>
                    <input type="text" name="total_time_taken[]" class="form-control total_time_taken" readonly>
                </td>
                <td>
                    <i class="fas fa-trash delete-row"></i>
                </td>
            </tr>
        `;

        $('#myForm table tbody').append(rowHtml);
        rowCounter++;
    }

    // Function to remove the last row
    function removeLastRow() {
        if (rowCounter > 1) {
            $('table tbody tr:last-child').remove();
            rowCounter--;
        }
    }

    // Event listener for adding a new row
    $('#addRow').click(function() {
        createNewRow();
    });

    // Event listener for removing the last row
    $(document).on('click', '.delete-row', function() {
        removeLastRow();
    });

    // Event listener for datetime input
    $(document).on('change', '.start_time, .end_time', function() {
        const row = $(this).closest('tr');
        const startTime = row.find('.start_time').val();
        const endTime = row.find('.end_time').val();

        if (endTime < startTime) {
            row.find('.end_time').addClass('is-invalid');
            row.find('.start_time').addClass('is-invalid');
            $('.error-message').text('End time cannot be less than start time.');
        } else {
            row.find('.end_time').removeClass('is-invalid');
            row.find('.start_time').removeClass('is-invalid');
            $('.error-message').text('');

            const timeTaken = calculateTimeDifference(startTime, endTime);
            row.find('.time_taken').val(timeTaken);

            const timeTakenArray = $('input[name="time_taken[]"]').map(function() {
                return $(this).val();
            }).get();

            let currentRowTotalTimeTaken = calculateTotalTimeTaken(timeTakenArray);

            if (rowCounter > 1) {
                currentRowTotalTimeTaken += timeTaken;
            } else {
                currentRowTotalTimeTaken = timeTaken;
            }

            row.find('.total_time_taken').val(currentRowTotalTimeTaken);
            totalTimeTaken = currentRowTotalTimeTaken;
        }
    });

    // Event listener for form submission
    $('#myForm').on('submit', function(e) {
        e.preventDefault();

        if ($('.is-invalid').length > 0) {
            return;
        }

        $.ajax({
            url: 'submit.php',
            method: 'post',
            data: $(this).serialize(),
            success: function(response) {
                console.log(response);
                alert('Data submitted successfully!');
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error(textStatus, errorThrown);
                alert('Error occurred while submitting data.');
            }
        });
    });

    // Show/hide buttons
    $('#addRow').click(function() {
        $('#validate').show();
    });

    $('button[type="button"]').click(function() {
        if ($(this).attr('id') === 'validate') {
            $('#submit').show();
            $(this).hide();
        }

        if ($(this).attr('id') === 'submit') {
            $(this).hide();
        }
    });
});

submit.php

<?php
// Database connection
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Get data from the form
$description = $_POST['description'];
$start_time = $_POST['start_time'];
$end_time = $_POST['end_time'];
$time_taken = $_POST['time_taken'];
$total_time_taken = $_POST['total_time_taken'];

// Insert into the database
for ($i = 0; $i < count($description); $i++) {
    $sql= "INSERT INTO your_table (description, start_time, end_time, time_taken, total_time_taken)
            VALUES ('{$description[$i]}', '{$start_time[$i]}', '{$end_time[$i]}', '{$time_taken[$i]}', '{$total_time_taken[$i]}')";

    if ($conn->query($sql) === FALSE) {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }
}

// Close the connection
$conn->close();
?>

I need the value as below,
First row time taken = 1 days 16 hrs 32 mins | Total time taken = 1 days 16 hrs 32 mins
Second row time taken = 8 mins | Total time taken = 1 days 16 hrs 40 mins

The total time taken should be the sum of all time taken upto the current row. But when i run the code, the total time taken just add the text values like below

First row time taken = 1 days 16 hrs 32 mins | Total time taken = 1 days 16 hrs 32 mins
Second row time taken = 8 mins | Total time taken = 1 days 16 hrs 32 mins 0 days 0 hrs 8 mins

I tried changing the type of input from text to date-time with no luck.

Secondly
I would like to validate if the end time of the first/previous row is equal to the start time of the current row if not to throw an error.

I’m not able to retrieve the live value of the fields since js is run when the documents is loaded.

I have implemented google-map in my Angular project with below settings:

this.options = {
      center: { lat: this.filters.locationLat, lng: this.filters.locationLong },
      zoom: 8,
      zoomControl: true,
      fullscreenControl: true,
      disableDefaultUI: false,
      clickableIcons: true,
      draggable: false,
      mapTypeControl: false,
      streetViewControl: false,
      tilt: 0,
      keyboardShortcuts: false,
      maxZoom: 18,
    };

<google-map (mapInitialized)="onMapReady($event)" [options]="options">
  <map-marker-clusterer> </map-marker-clusterer>
</google-map>

But somehow it is breaking the zoom plus, minus, tilt map and full screen icons as below:

Note: I am not getting any error on my console regarding Google map.

I am creating and downloading an excel sheet using excel.js. I have a task like making certain columns and rows uneditable. I searched for it, I got a way like giving protected{locked: true} should protect the cells and should be uneditable, but when i download the excel, iam still able to edit the cells.

mergedWorkbook.eachSheet((worksheet) => {
    const lastColumnIndex = worksheet.columns.length;

    const protectedColumns = [0, 1, 2, lastColumnIndex];

    // Protect specified columns
    worksheet.columns.forEach((column, columnIndex) => {
      if (protectedColumns.includes(columnIndex)) {
        column.eachCell((cell) => {
          cell.protection = {
            locked: true,
          };
        });
      }
    });

    // Protect header row
    worksheet.getRow(1).eachCell((cell) => {
      cell.protection = {
        locked: true,
      };
    });
  });

If I use var words=['ac', 'bd', 'bf','uy','ca'];, the system works.

But if I use var words=['cá', 'cả', 'biểu','bíu','tịu']; (Vietnamese characters), the system doesn’t work

Is there a way to control an array of characters of languages different from English in javascript?

I don’t know how to get (#document (url)) under <object>.

I want get that URL at variable, then use .

Is it possible at jQuery and console ?

I try this, but I think it’s not what I want.

ex)

<object id="ext_obj_1" type="text/html" data="https://en.wikipedia.org/wiki/">Not loading</object>

If I action this code in browser, devTool(F12) monitor is that.

<object id="ext_obj_1" type="text/html" data="https://en.wikipedia.org/wiki/">
    #document (https://en.wikipedia.org/wiki/Main_Page)
        <!DOCTYPE html>
        ~ ~ ~
</object>

Then if I click any keyword in wiki(embeded screen by <object>), monitor change that.

<object id="ext_obj_1" type="text/html" data="https://en.wikipedia.org/wiki/">
    #document (https://en.wikipedia.org/wiki/Encyclopedia)
        <!DOCTYPE html>
        ~ ~ ~
</object>

So I want how to get (#document (url)) under <object>.

Is it possible at jQuery and console ?

This jQuery Ui Autocomplete code with image works perfectly well, but the image appears on top of the text, I would like the image to appear on the left and text on the right, like the photo below. Any suggestions?

$(function() {
var cache = {};
$("#myAutocomplete").autocomplete({
 minLength: 1,     
 source: function(request, response) {
  var term = request.term;
  if (term in cache) {
   response(cache[term]);
   return;
  }
  $.getJSON("services/test_ima_JAutocomplete1.asp", request, function(data, status, xhr) {
   status, xhr ) {
   cache[term] = data;
   response(data);
  });
 }
}).data("ui-autocomplete")._renderItem = function (ul, item) {
     return $("<li></li>")
         .data("item.autocomplete", item)
         .append("<img src="+ item.image + ">" + "<a>" + item.label + "</a>" )
          .appendTo(ul);
  }
});

I need to display the datetime received in CET to the local time of user by using javascript in a .NET MVC application. How can this be done?

<table>
    <thead>
        <tr>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-utc-time="@item.ScheduledTime?.ToUniversalTime().ToString("o")">@item.ScheduledTime.HasValue ? item.ScheduledTime.Value.ToUniversalTime() : "N/A"</td>
        </tr>
    </tbody>
</table>

function convertUtcToLocal() {
    document.querySelectorAll('[data-utc-time]').forEach(function (element) {
        const utcTime = element.getAttribute('data-utc-time');
        if (utcTime) {
            const localTime = new Date(utcTime).toLocaleString('en-GB', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                hour12: false
            });
            element.textContent = localTime;
        }
    });
}

This is the code I tried I added a class for each datetime and got the utc time using ToUniversalTime() and then used ToLocaleString() to convert the UTC time to local time of user but this does not work