Category: javascript

I’m working on a JSP project and there is a main page that have a button, by clicking on that button a pop up opens and we fill the details and submit. after submitting that pop get closed but a new tab is opening in the browser with “about:blank”.
I have checked the code there is no function of java script that open that.
Also it is not opening the blank tab in IE browser.

I tried to check all the code on body onload, form submit on click no such function is calling

I’m trying to make an ‘add’ option inside of select, so when i enter an input, the value of the input becomes the option value.
However, on Django Admin, when i check if it worked, the option value gets logged as empty

                  <div id="color-form">
                    <select class="custom-select" id="color" name="color" onChange="check(this);">
                      <option disabled selected value>Select</option>
                      <option value="Pink">Pink</option>
                      <option value="White">White</option>
                      <option value="Black">Black</option>
                      <option value="Blue">Blue</option>
                      <option value="Gray">Gray</option>
                      <option value="Brown">Brown</option>
                      <option value="Purple">Purple</option>
                      <option id="color-custom-value">Add</option>
                    </select>

                    <div id="option-div" style="display:none;">
                      <label>Enter Color<input id="custom-input"></input></label>
                    </div>

                  </div>

        function check(elem) {
        if (elem.value == 'Add') {
            document.getElementById("option-div").style.display = 'block';

            const optionvalue = document.querySelector("#custom-input").value
            document.querySelector("#color-custom-value").value = optionvalue
        } else {
            document.getElementById("option-div").style.display = 'none';
        }
      }

I’m working on a webpage that does a function with what the user chooses in the select element right after input. So I used the code bellow in Javascript to save the input value in a variable:

var userInput = document.querySelector('select').value;

But when I open the page in the browser, the browser generates this error:

Uncaught TypeError: Cannot read properties of null (reading ‘value’)

But there’s an interesting note. I copied the code in the browser’s console, and the console didn’t generate any errors and could read it successfully! This problem also happens in other scripts, for example the style property in a HTML element.

I want to know what’s the reason and how to solve it.

a have a site that is server-sided through node.js, it generates a new code each time you refresh the page, I want to detect if 24h has passed since the last code generation, problem is that for me to do I will need to figure out if 24 hours has passed or not if I use setTimeout() on the user’s IP there’s 2 problems, first problem they can easily change their ip and get a new code or even restart their router and be assigned a new ip as some routers come with dynamic ips, second issue considering that there will be thousands of users coming daily or even hourly to the website with that amount of setTimeouts the server will be overloaded with the amount of memory allocated for setTimeouts alone. I’ve read how setTimeouts work and they allocate some space in the JavaScript compiler to run at their specified time so my heap or memory will most definitely be overloaded because of it, is there a better way to figure out if 24 hours has passed or not without using setTimeout()?

I tried looking up the same issue and couldn’t find anything that solves this problem, I thought of using a database for this but another issue will arise as I will need to loop through the entire database checking if current time is 24 hours higher than the document creation time and a loop like that will either take days to complete and will fail in case if the API goes down (i restart it regularly to update stuff)

I expect a solution that won’t destroy my server with setTimeouts and won’t fail if the API goes down for whatever reason and optionally be able to figure out if the user is spoofing ips or not

Using ApolloClient – the client is making a GraphQL request to Contentful for a reasonably complex query (altho only 1021 query cost) – it is a ‘page‘ with sections of various types, and some of the section entry types can have a collection of ‘items‘. The ‘items‘ are queried for just their __typename and their sys object – so that they can be requested directly and fully in due course.

The request returns the correct data (see first image), but if I log the response from ApolloClient query immediately after the resolution, the sys object is missing (see second image).

I’m logging a parsed JSON string of the resolved response, so I’m confident it’s not that the object is being mutated further down the line – if it’s being mutated, it must be somewhere in the Apollo client.

The sys object is correctly included for other items at the same level, with the same content type, elsewhere in the page response.

It’s not practical to make a reproducible example because of the level of integration required, so I guess my question is: why might this be happening?

I am trying to upload an image using nuxt, uppy and my backend (adonisjs), but I’ve encountered an issue and I don’t understand what I am doing wrong and how I could fix this issue.
here is how I am trying to do it.

in my nuxt application I have a file in my server folder where I am just redirecting the request to my backend

// server/api/images.post.ts

export default defineEventHandler(async (event) => {
  const body = await readRawBody(event)
  const content = getHeader(event, 'content-type') as string
  const length = getHeader(event, 'content-length') as string

  const {
    context: { params }
  } = event

  return await $fetch<{
    message: string
  }>(`/categories/${params?.id}/images`, {
    baseURL,
    method: 'POST',
    headers: {
      'content-type': content,
      'content-length': length
    },
    body,
    onRequestError(context) {
      console.log('==== onRequestError', context.error)
    }
  })
})

the error I am getting from this request is UND_ERR_REQ_CONTENT_LENGTH_MISMATCH

content-type header looks like this

content-type':  'multipart/form-data; boundary=---------------------------60647965127734541503372833747'

content-length header looks like this

'content-length': '893753'

Does anyone has an idea how can I debug further this issue? I tried everything I knew so far, but I don’t know what to do anymore.

Mee Yaaliin Kun Haa Milkaa’u Jedhaa

Maaloo Yaaliidha! Namaste I

2Phe. 2

¯¯¯¯¯¯¯¯¯¯

⁶ Inni mandaroota Sodoomii fi Gomoraatti faradee, ibiddaan balleessee daaraa gochuu isaatiin, warra Waaqayyo malee jiraatanitti wanta dhufuuf jiru fakkeenya isaanii irraa akka argan godheera.

⁷ Looxin nama qajeelaa, isa gad-dhiisatti jiraachuu warra jal’ootaatti yaadaan rakkachaa ture immoo in oolche.

⁸ Namichi qajeelaan sun yeroo isaan gidduu jiraatu waan arguu fi waan dhaga’uun, lubbuun isaa isheen qajeeltuun sababii hojii isaanii isa seeraan walii hin galleef guyyaa guyyaatti isa keessatti in rakkatti turte.

⁹ Egaa gooftichi, namoota Waaqayyoof bulan qorama keessaa baasuu; warra jal’oota immoo hamma guyyaa firdiitti adabaaf kaa’uu in beeka.

¹⁰ Caalaadhumatti immoo warra kajeellaa foonii isa nama xureessu duukaa bu’an, warra gooftummaa Waaqayyo isaan irraa qabu tuffatan adabaaf in kaa’a. Isaan warra addaggee, warra of gammachiisaniidhas; warra akka ergamootaa waaqa keessatti ulfina qaban in arrabsu malee hin safeeffatan.

So I am making a Storybook 7 Typescript component library with React.
And obviously I am also importing this library into another project using a private NPM package.

One of my components, namely the “Select” component, is throwing this error when I import it into said project:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function ... Check the render method of Select.

Now the first thing I did was check my imports in the library, but nothing seems to be off, let alone different from all the other components, which seem to be loading just fine.
Even more so strange, the component works perfectly when I load it up in Storybook,

I am currently building a website with this component library and this component is the only problem causer. My best guess is that it has something to do with the imports inside the Select component, but I checked those from the files they were exported from and they seemed to be just fine as well.

Here is the code of Select.tsx:

import React, { Fragment, useState } from 'react';
import { Listbox, Transition } from '@headlessui/react';
import { CheckIcon, SelectorIcon } from '@heroicons/react/solid';

function classNames(...classes: string[]) {
  return classes.filter(Boolean).join(' ');
}

type Option = {id?: string | any;
  text?: string | any;
  default?: boolean;}

// interface to declare all the prop types
export interface Props {
  options?: Option[];
  title?: string | any;
  length?: 'sm' | 'md' | 'lg' | 'fit';
  placeholder?: string;
  className?: string;
  onChange: (value: string) => void;
}

// Select component
export const Select: React.FC<Props> = ({
  options,
  title,
  className,
  length,
  placeholder,
  onChange
}) => {
  const selects = options;
  let selectedOption;
  let i = 0;
  selects?.map(select => {
    if (select.default) {
      selectedOption = selects[i];
      return true;
    }
    i++;
    return false;
  });

  const [selected, setSelected] = useState<any>(selectedOption);

  return (
    <div className={className}>
      <Listbox value={selected} onChange={(value) => {
        setSelected(value);
        onChange(value);
      }}>
        {({ open }) => (
          <>
            <Listbox.Label className="block text-sm font-medium text-gray">
              {title}
            </Listbox.Label>
            <div className={`relative`}>
              <Listbox.Button
                className={`cursor-pointer bg-white relative border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left focus:outline-none focus:ring-1 focus:ring-primary/60 focus:border-primary sm:text-sm ${
                  !length || length === 'md'
                    ? 'w-72'
                    : length === 'fit'
                    ? 'w-full'
                    : length === 'lg'
                    ? 'w-96'
                    : length === 'sm' && 'w-44'
                }`}
              >
                <span
                  className={`block truncate ${
                    placeholder && !selected ? 'text-gray-400' : 'text-gray'
                  }`}
                >
                  {selected ? selected.text : placeholder}
                </span>
                <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
                  <SelectorIcon
                    className="h-5 w-5 text-primary"
                    aria-hidden="true"
                  />
                </span>
              </Listbox.Button>

              <Transition
                show={open}
                as={Fragment}
                leave="transition ease-in duration-150"
                leaveFrom="opacity-100"
                leaveTo="opacity-0"
              >
                <Listbox.Options
                  className={`absolute z-10 mt-1 bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm ${
                    !length || length === 'md'
                      ? 'w-72'
                      : length === 'fit'
                      ? 'w-full'
                      : length === 'lg'
                      ? 'w-96'
                      : length === 'sm' && 'w-44'
                  }`}
                >
                  {selects?.map(select => (
                    <Listbox.Option
                      key={select.id}
                      id={select.id}
                      className={({ active }) =>
                        classNames(
                          active ? 'text-white bg-primary' : 'text-gray-900',
                          'cursor-pointer select-none relative py-2 pl-3 pr-9'
                        )
                      }
                      value={select}
                    >
                      {({ selected, active }) => (
                        <>
                          <span
                            className={classNames(
                              selected ? 'font-semibold' : 'font-normal',
                              'block truncate'
                            )}
                          >
                            {select.text}
                          </span>

                          {selected ? (
                            <span
                              className={classNames(
                                active ? 'text-white' : 'text-primary',
                                'absolute inset-y-0 right-0 flex items-center pr-4'
                              )}
                            >
                              <CheckIcon
                                className="h-5 w-5"
                                aria-hidden="true"
                              />
                            </span>
                          ) : null}
                        </>
                      )}
                    </Listbox.Option>
                  ))}
                </Listbox.Options>
              </Transition>
            </div>
          </>
        )}
      </Listbox>
    </div>
  );
};

Now again keep in mind, that it works perfectly in Storybook.

This is how I export the component from the index.ts:

import { Select } from './components/Select';
// ...
export { ..., Select };

And here’s how I import the component into another component of the library. Keep in mind, that I actually only use the Select component through SearchResultHeader but i also tried importing the Select component on its own but the outcome was the same.

import { ..., SearchResultHeader, Select } from "@naos/ioe-ui-library";

Thanks in advance to everyone that answers!

opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error’ ],
library: ‘digital envelope routines’,
reason: ‘unsupported’,
code: ‘ERR_OSSL_EVP_UNSUPPORTED’
}

I tried to add another set of scripts it diidnt work

Hi all we have just changed our website and this is the error we are gettting on checking source we are not able to find the code and we want to remove all this from our website there are almost 900 links that are broken by brizy

BizTech –
https://www.knowledgenile.com/biztech/bpage/2 https://www.knowledgenile.com/?brizy_media=21154&brizy_crop=iW=591&iH=338&oX=70&oY=0&cW=450&cH=338 404 13 Jul 2023 (21:21)

We rebulid the website by using brizy and then when we impoorted data this happened

I have a simple ajax form. But Progress Bar doesn’t work on ajax form output, it freezes. I have put an example on the page so you can see it working normally.
my goal is to be able to provide the code(progress bar) here in ajax output.
https://stackoverflow.com/a/35985771/20310847

The problem here is, I believe there is a conflict/conflict between the script that checks the progress bar in the AJAX output and the ajax. It appears then, when it finished, it disappear, but no visual progression on… I wonder what I need to do to make progress bar from Ajax Output look normal without freezing?

Form.htm

<html>
<head>
    <!-- progress bar style  start -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
    .progress,
    .alert {margin: 8px;}   
    .alert {display: none;} 
    .alert-success {
        --bs-alert-color: #2c4238;
        --bs-alert-bg: #f8faff;
        --bs-alert-border-color: #768478;
        width: auto;
        max-width: max-content;
    }   
    @media screen and (max-width: 1568px) {
        .alert-success {
            width: auto;
            max-width: max-content;
        }
    }
    </style>
</head>
<!-- progress bar style  end -->

<body><br>
    <!-- form start -->
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <form class="form" action="process.php" method="POST" name="checkaddress" id="checkaddress">
    <input type="text" name="v" /> </td><input type="submit" id="submit" value="Submit" /> 
    </form>
    <!-- form end -->
    
    <!-- ajax output div is here -->
    <div class="done"></div>
    
    <!-- Here is the progress code I want to reflect in the ajax output. start -->
    <br>====================================
    <br> Example: normally this code(progress bar) works below. but it doesn't work when I call the code with ajax. freezes as above.
    <br>
    <div class='progress col-md-7 ps-0 pe-0'>
        <div class='progress-bar' role='progressbar' aria-valuenow='60' aria-valuemin='0' aria-valuemax='100' style='width: 60%;'></div>
    </div>
    <div class='alert alert-success' role='alert'>hello xxxxx</div><br>
    <!-- end -->
    
    
    <!-- form ajax script start -->
    <script>
    $('#checkaddress').on('submit', function(e) {
        // get formdata in a variable that is passed to the ajax request
        var dataToPassToAjax = $(this).serialize();
        $.ajax({
            url: "process.php",
            type: "POST",
            data: dataToPassToAjax,
            cache: false,
            success: function(resultHtml) {
                // add the returned data to the .done element
                $('.done').html(resultHtml).fadeIn('slow');
            }
        });
        // cancel the default form submit
        return false;
    });
    </script>
    <!-- end -->
    
    <!-- progress bar script start -->
    <script>
    var $progress = $('.progress');
    var $progressBar = $('.progress-bar');
    var $alert = $('.alert');
    setTimeout(function() {
        $progressBar.css('width', '10%');
        setTimeout(function() {
            $progressBar.css('width', '30%');
            setTimeout(function() {
                $progressBar.css('width', '45%');
                setTimeout(function() {
                    $progressBar.css('width', '80%');
                    setTimeout(function() {
                        $progressBar.css('width', '90%');
                        setTimeout(function() {
                            $progressBar.css('width', '95%');
                            setTimeout(function() {
                                $progressBar.css('width', '98%');
                                setTimeout(function() {
                                    $progressBar.css('width', '99%');
                                    setTimeout(function() {
                                        $progressBar.css('width', '100%');
                                        setTimeout(function() {
                                            $progress.css('display', 'none');
                                            $alert.css('display', 'block');
                                        }, 500); // WAIT 5 milliseconds
                                    }, 500); // WAIT 5 milliseconds
                                }, 800); // WAIT 5 milliseconds
                            }, 600); // WAIT 2 seconds
                        }, 700); // WAIT 1 seconds
                    }, 900);
                }, 600); // WAIT 2 seconds
            }, 400); // WAIT 1 seconds
        }, 700); // WAIT 1 seconds
    }, 800); // WAIT 1 second
    </script>
    <!-- progress bar script end -->
</body>
</html>

process.php

<?php 
$v= $_POST['v'];
echo "<div class='progress col-md-7 ps-0 pe-0'> 
<div class='progress-bar' role='progressbar' aria-valuenow='60' aria-valuemin='0' 
aria-valuemax='100' style='width: 60%;'></div>  
</div>
<div class='alert alert-success' role='alert'>hello $v</div>";
?>

I thought of increasing performance in my NextJS V12 project. By changing domain language change switcher towards sub-path language switcher. Since it won’t have to do a page reload. Found out, that NextJS already provices i18n functionality, just had to tweak next.config.js file.

However, I came to the point where it also tries to access images folder with the specified locale. To just give perspective, I only added three language locales inside next.config.js file:

locales: ['nl', 'en', 'ru'],
defaultLocale: 'nl',
localeDetection: false,

Due to fact, that nl locale can be reached by page of /, it finds static images folder in images/.... However, whenever I use different locale than the default one (let’s pick ‘en’ for this example), it searches for en/images/... folder. I don’t have and do not want to structure like that (content isn’t related with any specific words to the given locale)

Are there any workarounds regarding disabling static assets search by locales towards just accessing static assets?

NextJS @12

This is the code I write:
enter image description here

I need to pass this test case:
enter image description here

Everything is working fine. If I run this program with the command ‘node task add 5 “Run PC”‘. It takes the value of arg[3] and arg[4] and store the values in task.txt file. But the test case if fails frequently. I need to solve the test case.

I want to add header and one cancel button in my ag-grid side-bar on the top. Below that I want toolPanel: ‘agColumnsToolPanel’.
I think one way to do that is by adding custom tool panel. But I dont know how to add agColumnsToolPanel inside custom tool panel.

enter image description here
I want header at the top also I want to add subheading with cancel button. rest all the functionality I want same as default agFiltersToolPanel and agColumnsToolPanel.

I have create an upi intent on my payment page, and I am also opening same on click of button in mobile phone. When I pay to the intent through the QR I generated using the intent, it works properly. But when I click the button, and open the same intent in any UPI app, it throws error. Here’s the code for the button with upi intent:
<a href="upi://pay?pa=<upi_vpa>&pn=Name&tn=HBLNN&am=1&cu=INR">Pay using UPI app</a>
phonepe error