Category: javascript

import { FlatGrid } from 'react-native-super-grid';


class Grid extends React.Component () {
    
export default function Example() {

I just write until here..
But, don’t work…
What I have to do ..

code not saving
but the .js file saves without any problem
solution explorer if you guys need it

so I’ve been trying out the bouncing balls assessment from MDN web docs but my javascript doesn’t work, I;ve tried both tried internal and external. all it says is that code is not saved every time I save it. ( just the script portion).

Is this my issue or a vs 2022 issue?

I have 4 sliders on my website that are interconnected, and when switching one slider, all the others should switch, I implemented this using controller.control, but the problem is that on 2 sliders I have SliderPerView:3, and on the other two by SliderPerView:1, and that is, the last 2 switch not to their full slide, but to 1/3. Maybe someone has encountered this and knows how to solve it, I will be very grateful?

This is an image what exactly, i am facing the problem “type ‘string null’ is not assignable to type ‘string’. typescript”

I have two object with same method

const obj1 = {
    log: () => {
        console.log('Call function')
    }
}
const obj2 = {
    log: () => {
        console.log('Call function')
    }
}

I want to call this method but with the name of the dynamic object. I have try this but that d’ont work :

let dynamiqueName = "obj1"
dynamiqueName.log()

[dynamiqueName].log()

I keep getting the following error when I try to run a GET request from Rapid API

Uncaught (in promise) ReferenceError: Cannot access 'getData' before initialization

const RAPIDAPI_KEY =
  import.meta.env.VITE_RAPIDAPI_KEY;
const GEOLOCATION_URL = "https://ip-geo-location.p.rapidapi.com/ip/check?format=json";
const GEOLOCATION_HOST = "ip-geo-location.p.rapidapi.com";

const getData = async(url, host) => {
  const response = await fetch(url, {
    method: "GET",
    headers: {
      accept: "application/json",
      "x-rapidapi-host": host,
      "x-rapidapi-key": RAPIDAPI_KEY
    }
  })

  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`)
  }

  return await response.json();
}

const runApiQueries = async() => {
  // GET CITY NAME
  const getData = await getData(GEOLOCATION_URL, GEOLOCATION_HOST);
  console.log(getData);
}

runApiQueries();

The general appearance of the program is as follows:
enter image description here

the details
In this exercise, we complete a simple slider. You must add the previous and next button in this event. The next or previous image should be displayed when the next or previous button is clicked. You can use the functions defined in the initial project.

When the slider is on the last image and the next button is clicked, the first image should be displayed and also when the first image of the previous button is clicked, the last image should be displayed.

Note: When an image is displayed, its opacity must be 1 and the rest of the images must be 0.

Notes
You are only allowed to make changes to the main.js file.
html code :

const sliderImages = [
    "./images/image1.jpg",
    "./images/image2.jpg",
    "./images/image3.jpg",
    "./images/image4.jpg",
];
const sliderDom = document.getElementById("slider");

let currentImage = 0;

function renderImages() {
    sliderImages.forEach((image) => {
        sliderDom.innerHTML += "<img src='" + image + "' />";
    });
}

function clearImages() {
    const images = document.getElementsByTagName("img");
    for (let i = 0; i < images.length; i++) {
        images[i].style.opacity = 0;
    }
}

function showImage(image) {
    clearImages();
    document.getElementsByTagName("img")[image].style.opacity = 1;
}

function init() {
    renderImages();
    showImage(currentImage);
}

init();

let myBtn = document.querySelector("#prevButton");

myBtn.onclick = function() {
    const newImage = (currentImage + 1) % sliderImages.length;

    showImage(newImage);
}
let myBtn2 = document.querySelector("#nextButton");

myBtn2.onclick = function() {
    const newImage = (currentImage + 1) % sliderImages.length;
    showImage(newImage);


}

* {
  margin: 0;
  padding: 0;
}

button {
  padding: 8px;
}

.container {
  width: 500px;
  margin: 20px auto;
}

#slider {
  position: relative;
  height: 400px;
  margin-bottom: 20px;
}

#slider img {
  width: 500px;
  height: 400px;
  position: absolute;
  transition: all .5s;
}

.buttons {
  display: flex;
  justify-content: space-between;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Slider</title>
</head>
<body>
  <div class="container">
    <div id="slider"></div>

    <div class="buttons">
      <button id="prevButton"><</button>
      <button id="nextButton">></button>
    </div>
  </div>
  
  <script src="main.js"></script>
</body>
</html>

I need to add a website that is blocked from being embedded in an iframe. I need a legal workaround that allows me to post my store on my website. I’m not trying to hack anybody. Just want to safely and legally bypass this restriction. Thanks. 🙂
As it is not working kindly give me a solution or solve it and sent me the code will be appreciated thanks alot

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
  <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
  <META HTTP-EQUIV="Expires" CONTENT="-1">

  <html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>NextierAffiliate.com</title>

    <style type="text/css">
      <!-- html {
        height: 100% !important;
        margin-bottom: 0px;
      }
      
      td img {
        display: block;
      }
      
      body {
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 0px;
      }
      
      #apDiv1 {
        POSITION: fixed;
        WIDTH: 292px;
        BOTTOM: -22px;
        DISPLAY: block;
        HEIGHT: 222px;
        VISIBILITY: visible;
        RIGHT: 145px;
        padding: 0px;
      }
      
      -->
    </style>

    <script language="javascript">
      function DoClose() { <!-- Close the Popup
        document.getElementById('apDiv1').style.visibility = "hidden";
        return false;
      }
    </SCRIPT>

    <script type="text/javascript">
      <!--
      function MM_reloadPage(init) { //reloads the window if Nav4 resized
        if (init == true) with(navigator) {
          if ((appName == "Netscape") && (parseInt(appVersion) == 4)) {
            document.MM_pgW = innerWidth;
            document.MM_pgH = innerHeight;
            onresize = MM_reloadPage;
          }
        }
        else if (innerWidth != document.MM_pgW || innerHeight != document.MM_pgH) location.reload();
      }
      MM_reloadPage(true);
      //-->
    </script>



  </head>

  <body>

    <iframe id="iframe" src="<%= Session(" goURL ") %>" style="margin:0; width:100%; height: 100%; border:none; " cellpadding="0"></iframe>

    <div id="apDiv1">

      <table width="200" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><img src="<%= Session(" naPopupImage ") %>" width=4 00; height=1 93; alt="" usemap="#mfmLink" border="0" />
            <map name="mfmLink" id="mfmLink"><area shape="rect" coords="367,4,391,26" onmouseover=" this.style.cursor='pointer';" onclick= "DoClose()"  />
          <area shape="rect" coords="5,29,394,217" href="http://www.nextieraffiliate.com" target="_blank" />
      </map></td>
        </tr>
      </table>


  </body>

  </html>

A constant variable defined with the primitive types like number, string cannot be changed. But I tried the following example in console and got unexpected behaviour.

const word = "example";
word[0] = 'a';
console.log(word) //prints "example"
console.log(word[0]) // prints "e"

As word variable is declared with the const and as the string is a primitive data type and as per the rule, we cannot change the constant string than how come the 2nd line in above code did not gave any error?

am creating facebook post page for my project, and almost done, but am not getting how to close the selected gif and once i close the selected gif am not able to get other gif. If any knows please help.

import axios from "axios";
import { useState } from "react";
import { useEffect } from "react";
import "./componentsStyles/GifInText.css"
 
const GifInText = ({gifId}) => {

    const [post, setPost] = useState({});
    const [closeGif, setCloseGif] = useState(false)
     

    const fetchData = async () =>{
          await axios.get(`https://api.giphy.com/v1/gifs/${gifId}`,{
                params: { 
                    api_key: "Xoa3mXrWxKXw6lJscrKUTsbZsXLbGuGY",
                    gif_id: gifId
                }
            }).catch((error) =>{
                console.log("error at fetching gifID2", error);
              }).then(response => {
                setPost(response.data)
               
              });
            }
    useEffect(()=>{
        fetchData()
        }, [  ])

        

        return (
            <div className='gif-section'>   
            {post.data && (
                    <>
                    <div className='image-gifs'>
                     <i className="fas fa-times" onClick={()=>setCloseGif(!post)}></i>
                     <img className="live-gifs" src={post.data.images.fixed_height.url} alt="..."/>
                    </div>
                    </>
                )}
            </div> 
         )
}
export default GifInText;

Explanation

here, I sent one get req to ABC.com/Users/Login using Axios after this I sent a post request to ABC.com/Users/Login with form data and Cookie.

but it does not work properly. It works properly in postmen

My Code

axios.get('ABC.com/Users/Login')
.then(async response => {

   console.log("call login page");
   let tokenKey = "__RequestVerificationToken";
   let tokenValue = "CfDJ8DF1Ubmz1lpEibYtvvnYRTVXaJ-HWILEtqE_A3bGmDrD-yyKyJPbYK7qrcS9AIzezPo5- 
    tOWmcXs6WgYThZP-5qo1o1XXpalkJDEPnBtnVa7EhaUYbY2XNcANuugyWgkIf3-O2-_f5h7mNu960qGIaM";
   const userName="XYZ";
   const pass="test@123";

   let form=new FormData();
   form.append('UserName', userName);
   form.append('Password', pass);
   form.append([tokenKey], tokenValue);

   headers={
        'Cookie':response.headers['set-cookie'];
   }

   await axios.post('ABC.com/Users/Login', form, 
   { headers: {...form.getHeaders(),...headers}})
   .then(async response => {
        console.log(`Login success in ${userName}`);
        console.log("response",response.data);
   })
   .catch(error => {
       console.log(error);
   });

}
.catch(error => {
console.log(error);
});

In the First Axios call, I got:-

Set-Cookie: .AspNetCore.Antiforgery.b02ILwhXMuw=CfDJ8DF1Ubmz1lpEibYtvvnYRTXz_0rOkGhY6OXEw3d3vsDNG81V4IaMPfVZm5Hk3_icgp_ToLDG9xKu2mcM1VtEOMnSCktfZwG7Dj9_549SUiKht6Yv33pozagGjseFsfXI74wBwu-mMJkzgwfPx3jS4OA; path=/; samesite=strict; httponly
Set-Cookie: ABC.Session=CfDJ8DF1Ubmz1lpEibYtvvnYRTViv4PoRc%2F7jhjXdtCo4m1GZbcMf60xe9sOva27QUGL0BvT2A2SQZaCmrXlj%2FVL9lTvower%2B1lF87MQVTwDQKAFoEODlnPfWEM6SsrqDa0tomlRynXOtyCROBltiwNI27vo3uo4Y8jEn834lZ4OHYG3; path=/; samesite=lax; httponly 

I Want to set cookie like this :-

Cookie: .AspNetCore.Antiforgery.b02ILwhXMuw=CfDJ8DF1Ubmz1lpEibYtvvnYRTXz_0rOkGhY6OXEw3d3vsDNG81V4IaMPfVZm5Hk3_icgp_ToLDG9xKu2mcM1VtEOMnSCktfZwG7Dj9_549SUiKht6Yv33pozagGjseFsfXI74wBwu-mMJkzgwfPx3jS4OA; ABC.Session=CfDJ8DF1Ubmz1lpEibYtvvnYRTViv4PoRc%2F7jhjXdtCo4m1GZbcMf60xe9sOva27QUGL0BvT2A2SQZaCmrXlj%2FVL9lTvower%2B1lF87MQVTwDQKAFoEODlnPfWEM6SsrqDa0tomlRynXOtyCROBltiwNI27vo3uo4Y8jEn834lZ4OHYG3

It works in postmen but not in Axios call. Even I used this also but its not working

let cook1 = response.headers['set-cookie'][0].replace(" path=/; samesite=strict; httponly", "");
let cook2 = response.headers['set-cookie'][1].replace("; path=/; samesite=lax; httponly", "");
let mainCookie=cook1 + " " + cook2
// mainCookie .AspNetCore.Antiforgery.b02ILwhXMuw=CfDJ8DF1Ubmz1lpEibYtvvnYRTUh3vyphSzebPn04M1GqaH8KdFgWLSBpj5a06HBUhoYBhWdiWJw7Yy5525ZcZ_WblCjF7AzWbhQl2dFbQTwOmzP3K7oa0CLirsSJYkhIG-fHGizaNo-3cf8YdSiECkGhMM; ABC.Session=CfDJ8DF1Ubmz1lpEibYtvvnYRTVEF0LnEGw51HveT2mRMrzmgbHiPWjs8UiPcGcqUpJBhTG1uBSE5NLG8tBwkW1XcJH3OxPcPPsaB30aaRREgroCkO1jw%2BJY6tavDFE0P9RTmk9%2Bf2CTVwaTWYRQgPGam1CWJfODoyCzHwiIdfl8ciJS
headers={
        'Cookie':mainCookie;
}

So I have a checklist for ~1500 items

here’s currently how I do it

  toggleOpenTimeSlot = (timeSlotId) => {
    if (this.isTimeSlotOpened(timeSlotId)) {
      this.setState({
        openedTimeSlots: this.state.openedTimeSlots.filter(
          (id) => id !== timeSlotId
        ),
      });
    } else {
      this.setState({
        openedTimeSlots: [...this.state.openedTimeSlots, timeSlotId],
      });
    }
  };

  isTimeSlotOpened = (timeSlotId) =>
    this.state.openedTimeSlots.includes(timeSlotId);

But this approach is very slow, every time I check a checkbox, it takes more than a second to rerender

I also tried something like this

 toggleOpenTimeSlot = (timeSlotId) => {
    if (this.isTimeSlotOpened(timeSlotId)) {
      this.setState((state) => {
        return {
          ...state,
          openedTimeSlots: {
            ...state.openedTimeSlots,
            [timeSlotId.toString()]: false,
          },
        };
      });
    } else {
      this.setState((state) => {
        const newOpenedTimeSlots = { ...state.openedTimeSlots };
        delete newOpenedTimeSlots[timeSlotId.toString()];

        return {
          ...state,
          openedTimeSlots: newOpenedTimeSlots,
        };
      });
    }
  };

  isTimeSlotOpened = (timeSlotId) =>
    this.state.openedTimeSlots[timeSlotId.toString()];

But it seems the performance gets worse after that

I need to display icons according to data.id value, (the example icons display is in the comment code as well. can you suggest to me how to give an else if condition to display this icon according to the data.id value?

/* eslint-disable react/jsx-pascal-case */
import React, { Fragment, useState, useRef } from "react";
import { Col, Row } from "antd";
import { useNavigate } from "react-router-dom";
import { Menu, Transition } from "@headlessui/react";
import * as Icons from "../../assets/svg/mobile-icons";
import * as Icons2 from "../../assets/svg/icon";

import catData from  './CategoriesData'

function classNames(...classes) {
  return classes.filter(Boolean).join(" ");
}

const catWomen = catData.catWomen.map ((data) => {

  return(
    { 
      id: data.id, 
      name: data.name, 
      icon: <Icons2.frock01 />,
      childs: data.childs
    }
  )
  }
)

const catMen = catData.catMen.map ((data) => {
  return(
    { 
      id: data.id, 
      name: data.name, 
      icon: <Icons2.frock01 />,
      childs: data.childs
    }
  )
  }
)

const catKids = catData.catKid.map ((data) => {
  return(
    { 
      id: data.id, 
      name: data.name, 
      icon: <Icons2.frock01 />,  
      childs: data.childs
    }
  )
  }
)

/*
const catWomen = [
  { id: 1, name: "See All", icon: <Icons2.seeall />, childs: [] },
  {
    id: 2,
    name: "Clothes",
    icon: <Icons2.frock01 />,
    childs: ["item2", "item8"],
  },
  {
    id: 3,
    name: "Shoes",
    icon: <Icons2.shoes06 />,
    childs: ["item3", "item7"],
  },
  { id: 4, name: "Bags", icon: <Icons2.purse01 />, childs: ["item4", "item6"] },
  {
    id: 5,
    name: "Accessories",
    icon: <Icons2.bag05 />,
    childs: ["item5", "item2"],
  },
  { id: 6, name: "Beauty", icon: <Icons2.hat02 />, childs: ["item6", "item4"] },
];

const catMen = [
  { id: 1, name: "See All", icon: <Icons2.seeall />, childs: [] },
  {
    id: 2,
    name: "Clothes",
    icon: <Icons2.shirt1 />,
    childs: ["item2", "item8"],
  },
  { id: 3, name: "Shoes", icon: <Icons2.shoes1 />, childs: ["item3", "item7"] },
  { id: 4, name: "Bags", icon: <Icons2.bag05 />, childs: ["item4", "item6"] },
  {
    id: 5,
    name: "Accessories",
    icon: <Icons2.purse02 />,
    childs: ["item5", "item2"],
  },
  { id: 6, name: "Grooming", icon: <Icons2.hat />, childs: ["item6", "item4"] },
];

const catKids = [
  { id: 1, name: "See All", icon: <Icons2.seeall />, childs: [] },
  {
    id: 2,
    name: "Clothes",
    icon: <Icons2.shirt1 />,
    childs: ["item2", "item8"],
  },
  {
    id: 3,
    name: "Shoes",
    icon: <Icons2.shoes05 />,
    childs: ["item3", "item7"],
  },
  { id: 4, name: "Bags", icon: <Icons2.bag05 />, childs: ["item4", "item6"] },
  {
    id: 5,
    name: "Accessories",
    icon: <Icons2.bow />,
    childs: ["item5", "item2"],
  },
  {
    id: 6,
    name: "Grooming",
    icon: <Icons2.hat03 />,
    childs: ["item6", "item4"],
  },
];
*/
const Categories = () => {
  const navigate = useNavigate();

  function SubCategories(props) {
    return (
      <Transition
        enter="transition ease-out duration-100"
        enterFrom="transform opacity-0 scale-95"
        enterTo="transform opacity-100 scale-100"
        leave="transition ease-in duration-75"
        leaveFrom="transform opacity-100 scale-100"
        leaveTo="transform opacity-0 scale-95"
      >
        <Menu.Items className="origin-top absolute w-auto rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none">
          <div className="py-1 flex">{props.children}</div>
        </Menu.Items>
      </Transition>
    );
  }

  function DropDownItem(props) {
    const items = props.data.map((item) => (
      <Menu.Item key={item.id.toString()}>
        {({ active }) => (
          <div
            onMouseOver={() => setChild(item.id)}
            onClick={() => {
              item.id === 1
                ? navigate(`/allproducts?mainProductCategory=${props.parent}`)
                : navigate(
                    `/allproducts?mainProductCategory=${props.parent}&category=${item.name}`
                  );
            }}
            className={classNames(
              active ? "bg-gray-100 text-gray-900" : "text-gray-700",
              "grid grid-cols-8 block px-4 py-2 text-xs"
            )}
          >
            <div className="col-span-7">{item.name}</div>
            <div className="col-span-1">{item.icon}</div>
          </div>
        )}
      </Menu.Item>
    ));
    return (
      <>
        <div className="border-r border-gray-300 w-40 text-sm">{items}</div>
      </>
    );
  }

  const [child, setChild] = useState(1);

  function LoadChilds(props) {
    const childs = props.data[props.child - 1];
    const subItems = childs.childs.map((item) => (
      <Menu.Item key={item.toString()}>
        {({ active }) => (
          <div
            onClick={() => navigate(`/allproducts?mainProductCategory=${props.parent}&category=${childs.name}&subCategory=${item}`)}
            className={classNames(
              active ? "bg-gray-100 text-gray-900" : "text-gray-700",
              "block px-4 py-2 text-sm"
            )}
          >
            {item}
          </div>
        )}
      </Menu.Item>
    ));
    return <div className="w-56">{subItems}</div>;
  }

  const dropdownRef = useRef();

  return (
    <Row className="bg-white w-full" style={{ position: "fixed", border: 0 }}>
      <Col offset={2}>
        <div className="flex w-full gap-6 text-xs cursor-pointer mt-0.5">
          <Menu as="div">
            <div
              className={`border-b-2 border-b-white hover:border-b-red-400 p-2`}
              onClick={() => navigate(`/allproducts`)}
            >
              <p>Shop</p>
            </div>
          </Menu>

          <Menu as="div">
            <Menu.Button
              className={`border-b-2 border-b-white hover:border-b-red-400 p-2`}
            >
              <p>Women</p>
            </Menu.Button>
            <div ref={dropdownRef}>
              <SubCategories>
                <DropDownItem data={catWomen} parent="Women" />
                <LoadChilds child={child} data={catWomen} parent="Women" />
              </SubCategories>
            </div>
          </Menu>

          <Menu as="div">
            <Menu.Button
              className={`border-b-2 border-b-white hover:border-b-red-400 p-2`}
            >
              <p>Men</p>
            </Menu.Button>
            <div ref={dropdownRef}>
              <SubCategories>
                <DropDownItem data={catMen} parent="Men" />
                <LoadChilds child={child} data={catMen} parent="Men" />
              </SubCategories>
            </div>
          </Menu>

          <Menu as="div">
            <Menu.Button
              className={`border-b-2 border-b-white hover:border-b-red-400 p-2`}
            >
              <p>Kids</p>
            </Menu.Button>
            <div ref={dropdownRef}>
              <SubCategories>
                <DropDownItem data={catKids} parent="Kids" />
                <LoadChilds child={child} data={catKids} parent="Kids" />
              </SubCategories>
            </div>
          </Menu>

          <Menu as="div">
            <div
              className={`border-b-2 border-b-white hover:border-b-red-400 p-2`}
            >
              <p>About</p>
            </div>
          </Menu>
        </div>
      </Col>
    </Row>
  );
};

export default Categories;

I would like to copy and paste new rows(along with its format) from the Main_Sheet to correct tabs. If a tab is missing, a new tab has to be created with the the header and data rows from Main_Sheet. (Header and non-header rows should have same format as the Main_Sheet). Please see pics:

Input Sheet:

Output Sheet:

I am using a AGGrid (actually via custom wrapper) and I have checkoboxes on each row.
Also, I have a bottom row with buttons. I want to enable/disable the buttons based on selected rows.

<AgGrid
                        id="dataListGrid"
                        containerProps={{style: {height: gridData.length * 30, minHeight: 180}}}
                        className="customGrid"
                        columnDefs={dataListColumns}
                        frameworkComponents={{checkboxColRenderer: checkboxColRenderer}}
                        gridDescription="List"
                        onGridReady={handleGridReady}
                        rowData={gridData}
                        enableBrowserTooltips={true}
                        pagination
                        paginationPageSize={100}
                        onCellClicked={onCellClicked}
                        onRowSelected={(params) => {
                              params.api.redrawRows({
                                rowNodes: [params.api.getPinnedBottomRow(0)],
                              });
                            }}
                        isFullWidthCell={(rowNode) => rowNode.rowPinned === 'bottom'}
                        fullWidthCellRenderer={CustomPinnedRowRenderer}
                        pinnedBottomRowData={[{}]}
                        {...props}
                    />   

My data looks like below;

let gridData = [{
            fmIdentifier: 'Test data 1',
            category: 'Test',
            comments: 'Test',
            fm: 'Test',
            gti: 'Test data',
            wins: 'Test',
            identifier: 'Test',
            status: 'Test data',
        }, {
            fmIdentifier: 'Test data 2',
            category: 'Test',
            comments: 'Test',
            fm: 'Test',
            gti: 'Test data',
            wins: 'Test',
            identifier: 'Test',
            status: 'Test data X',
            rowPinned: 'bottom'
        }]
        setDataListColumns(DataListColumns);
        setGridData(gridData);

Below is how my CustomPinnedRowRenderer looks;

class CustomPinnedRowRenderer {
  init(params) {
    this.eGui = document.createElement('div');
// QUESTION : I want to access the grid data here...param.api.data shows empty object {}
    const selectedNodes = params.api.getSelectedNodes();
    this.eGui.innerHTML = finalDOMStr; //finalDOMStr has HTML

  }

  getGui() {
    return this.eGui;
  }

  refresh() {
    return false;
  }
}

My question is inside the CustomPinnedRowRenderer (on row select), I want to check the param.api.data (so that I can accordingly render enabled/disabled buttons)

But param.api.data seems to be empty object for some reason ?