html and php or js select using query with relative field

Hi i have a customer and customer locations. When i select a customer i want to load the related customer location in another select. how can i do that using html and php

<div class="form-group">
<label for="customerID" class="col-sm-3 control-label">Customer</label>
<div class="col-sm-9">
<select class="form-control" name="customerName[]" id="customerName" onchange="getCustomerData()" >
<option value="">~~SELECT~~</option>
<?php
$customerSql = "SELECT * FROM customers WHERE transactionstatus='1' and companyid='1'";
$customerData = $connect->query($customerSql);

while($row = $customerData->fetch_array()) {                                            
echo "<option value='".$row['customerid']."' id='changeCustomer".$row['customerid']."'>".$row['customername']."</option>";
} // /while 

?>

</select>
</div>
</div> <!--/form-group-->             
<div class="form-group">

Problem updating array with reffs React framer-motion

My task is to implement 2 lists. One of the lists is just a “toolbar” that contains items. Also, from this list, you can drag items to the second list, which is the “target”. It will not be possible to drag items from the target list to the other, but in the future I want to make it possible to delete items. The main task of the target list is the ability to sort items by dragging (taking into account the position the cursor is hovering over).

I implemented this functionality in some form, but ran into some problems. I solved the first one (it’s pretty ugly, but it works). And with the second one, unfortunately, I could not figure out on my own. The problem is that after adding an item to the middle of the list, strange behavior occurs – it is impossible to drag the next item to a certain position. I tried to figure it out and looked at the logs. I saw that targetItemRefs.current is not updated properly. After that, I tried to update it manually in the onReorderTarget() function. But this was also unsuccessful. Here is a reproducible example of my problem: sandbox

Pin the before content when doing horizontal scroll

I am using GSAP for horizontal scrolling. Here it is working but I need to stick the above inro also untill horizontal scroll end. Currently it scrolls up and horizontal scrolling start.

<div class="container">
    <div class="process__intro__wrap" >
        <div class="process__intro">
            <div class="process__intro__title">
                <% if $ShowTitle %>
                    <h2>{$Title}</h2>
                <% end_if %>
            </div>
            <div class="process__intro__desc">
                $ElementProcessDescription
            </div>
        </div>
        <% if $ElementProcessLink %>
        <div class="process__intro__cta">
            <a href="$ElementProcessLink.LinkURL" class="btn">
                {$ElementProcessLink.Title}
                <% include SVG/arrow %>
            </a>
        </div>
        <% end_if %>
    </div>
    <div class="process__grid__wrap">
        <div class="mobile-hide" >
            <div class="process__grid horiz-gallery-wrapper"  > 
                <div class="process__items horiz-gallery-strip">
                        <% loop $getPathwayElements %>
                            <div class="process__item sticky-process-item ">
                                <div class="process__item__title">
                                    <div class="process__item__num">
                                        <h4>$Counter</h4>
                                    </div>
                                    <div class="process__item__topic">
                                        <h4>$Title</h4>
                                    </div>
                                </div>
                                <div class="process__item__desc">
                                    $Description.Raw
                                </div>
                            </div>
                        <% end_loop %>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="process__grid desktop-hide" data-fadein> 
        <div class="process__items js-clients-carousel">
                <% loop $getPathwayElements %>
                    <div class="process__item">
                        <div class="process__item__title">
                            <div class="process__item__num">
                                <h4>$Counter</h4>
                            </div>
                            <div class="process__item__topic">
                                <h4>$Title</h4>
                            </div>
                        </div>
                        <div class="process__item__desc">
                            $Description.Raw
                        </div>
                    </div>
                <% end_loop %>
            </div>
        </div>
    </div>
</div>

This is the js code which is using GSAP scrolling should be happen if there are more than 2 elements. currently block intro scrolls up then starts horizontal scrolling. It looks odd in big screens.

import gsap from "gsap";
import { ScrollTrigger } from 'gsap/ScrollTrigger';

export default () => {
  const buildProcess = document.querySelectorAll(".process");
  gsap.registerPlugin(ScrollTrigger);
  const processBlocks = gsap.utils.toArray('.process');

  processBlocks.forEach((processBlock) => {
    const horizontalSections = gsap.utils.toArray(processBlock.querySelectorAll('.horiz-gallery wrapper'));
    const processElements = processBlock.querySelectorAll('.sticky-process-item');

    if (processElements.length > 2) {
      horizontalSections.forEach((sec) => {
        const pinWrap = sec.querySelector(".horiz-gallery-strip");

        if (!pinWrap) {
          console.warn('No pinWrap found for', sec);
          return;
        }

        let pinWrapWidth;
        let horizontalScrollLength;

        function refresh() {
          pinWrapWidth = pinWrap.scrollWidth + 320; // Adjust width as needed
          horizontalScrollLength = pinWrapWidth - window.innerWidth;
          
        }

        refresh();

        gsap.to(pinWrap, {
          scrollTrigger: {
            scrub: 1,
            trigger: processBlock.querySelector('.process__grid__wrap'), // Use the grid wrap as the trigger
            pin: true,
            start: "center center", // Adjust to control when the horizontal scroll should start
            end: () => `+=${pinWrapWidth}`,
            invalidateOnRefresh: true,
            onEnter: () => console.log(`Entering ${sec}`),
            onLeave: () => console.log(`Leaving ${sec}`)
          },
          x: () => -horizontalScrollLength,
          ease: "none"
        });

        ScrollTrigger.addEventListener("refreshInit", refresh);
      });
    }
  });
};`

`

I tried to change start atribute but it was not success.

How can I make an API call to a website, obtain a Bearer token, store it in the browser, and use it for subsequent requests? [closed]

I’m working on a web application where I need to make an API call to a website, obtain a Bearer token from the response, store it in the browser (e.g., in local storage), and then use this token for subsequent API requests.

Could someone guide me through the best practices for implementing this securely and efficiently? Any code examples or detailed explanations would be greatly appreciated!

I have implemented an API call using fetch in JavaScript and successfully retrieved the Bearer token from the response. I stored the token in local storage using localStorage.setItem(‘token’, token). However, I’m unsure if this is the most secure approach, and I’m also having trouble figuring out how to use the stored token in subsequent API requests.

I was expecting to securely store the token and seamlessly use it for future API calls without manually passing it every time. I’m looking for best practices on how to achieve this, especially considering security concerns like token expiration and potential vulnerabilities.

What is and how to access the value above A1 in a google spreadsheet with app script?

I’m working on a pre-built google spreadsheet, and it has a thing looks like “table name” on the very top roll “above” cell A1, which I failed to found what it is called nor how to access it with app script.

the value

What I’m doing is use the sheet as a template, dup it and give it whatever name I want.
I don’t think it is a range, so the code below does not really explain much I guess.

const ss = SpreadsheetApp.getActiveSpreadsheet();
const temp = ss.getSheetByName('template');
const cell = 'the thing to edit';
const name = 'new_name'

temp.copyTo(ss).setName(name).activate()
  .getRange(cell).setValue(name);

How can I avoid duplicate posts when using pagination in MongoDB?

I am building a blog web app where I want to display posts on the home page. I am currently using MongoDB to retrieve posts based on tags.

i want the data of the home page to be random and mixed between latest posts and popular posts.

the problem is that i don’t know to prevent duplicate data when getting more data

i am using express with mongo as database.

so after 2 pages i start getting data i already had.
i did handle it in the front-end (react)

but i want a way to handle it in the back-end
like what other websites do.

i used this as an example
the second request suppose to return data but ignore data returned in the first request (page)

db.test.aggregate([ { $match: { tags: { $in: ["python", "java"] } } }, { $sample: { size: 10 } }, { $project: { text: true } }]).toArray()

element plus sub-menu get wrong data

Then an error was reported:

i use a element plus menu as top navigation bar,and a menu as side bar,i want to implement when i click on the top navigation bar,change the side bar and jump to new page, at once side bar open the first menu.

const changeNavBar = (val: string) => {
  navBarSelect.value = val
  router.push(`/${val}`)
  nextTick(() => {
    siderBar.value.open(menuInfo[val][0].children[0].pathName)
  })
}
 <el-menu
          :router="true"
          :default-active="$route.name"
          class="sideBar"
          :collapse="isCollapse"
          ref="siderBar"
        >
          <template v-for="item in menuInfo[navBarSelect]">
            <el-sub-menu v-if="item.children" :index="item.title">
              <template #title>
                <el-icon><component :is="item.icon" /></el-icon>
                <span class="menuTitle">{{ item.title }}</span>
              </template>
              <el-menu-item v-for="v in item.children" :index="v.pathName">{{
                v.title
              }}</el-menu-item>
            </el-sub-menu>
            <el-menu-item v-else :index="item.pathName">
              <template #title>
                <el-icon><component :is="item.icon" /></el-icon>
                <span class="menuTitle">{{ item.title }}</span>
              </template>
            </el-menu-item>
          </template>
          <div class="sideBarFold" @click="changeCollapse">
            <el-icon :size="25"><Fold /></el-icon>
          </div>
        </el-menu>
const menuInfo = reactive<Record<string, Array<any>>>({
  appAnalyse: [
    {
      title: '数据总览',
      icon: 'PieChart',
      children: [
        {
          pathName: 'OverView',
          title: '工作台'
        }
      ]
    },
    {
      title: '信息管理',
      icon: 'Histogram',
      children: [
        {
          pathName: 'GameManageView',
          title: '游戏管理'
        },
        {
          pathName: 'PlayerManageView',
          title: '玩家管理'
        }
      ]
    },
    {
      title: '数据分析',
      icon: 'DataAnalysis',
      children: [
        {
          pathName: 'KeepView',
          title: '留存分析'
        },
        {
          pathName: 'UserTrendView',
          title: '用户趋势'
        }
      ]
    }
  ],
  appManage: [
    {
      title: '基本信息',
      icon: 'PieChart',
      children: [
        {
          pathName: 'GameBaseInfo',
          title: '基本信息'
        }
      ]
    },
    {
      title: '事件管理',
      icon: 'PieChart',
      pathName: 'EventManage'
    }
  ]
})

Then an error was reported:

Uncaught (in promise) TypeError: Cannot destructure property 'indexPath' of 'subMenus.value[index]' as it is undefined.

While I was debugging, The data was found to be wrong:

const open = (index) => {
        const { indexPath } = subMenus.value[index];
        indexPath.forEach((i) => openMenu(i, indexPath));
      };

this is debbuger info,this should be 基本信息:…,事件管理:….,but

EventManage: {index: 'EventManage', indexPath: ComputedRefImpl, active: {ComputedRefImpl}

数据总览: {index: '数据总览', indexPath: ComputedRefImpl, active:{ComputedRefImpl}

i want to now why,and how to solve

Fabric.js and react, sendBackward and bringForward are being reported as not functions, despite other fabric options/ functions working

This is a React/ Fabric.js test I’m trying in order to figure out what I’m doing wrong with moving objects in the stack. The canvas inits and the red and blue boxes are there, they can be manipulated using the gizmo, and preserveObjectStacking is working, however, both bringForward and sendBackward report that there is no such function, these are canvas functions, yes? They are in the documentation, but they always error with “* is not a function”
Any help would be much appreciated.

import React, { useEffect, useRef, useState } from 'react';
import { Canvas, Rect } from 'fabric';

const FabricCanvasTest = () => {
  const canvasRef = useRef(null);
  const [canvas, setCanvas] = useState(null);
  const [activeObject, setActiveObject] = useState(null);

  useEffect(() => {
    const initCanvas = new Canvas(canvasRef.current, {
      width: 400,
      height: 400,
      backgroundColor: '#f0f0f0',
      preserveObjectStacking: true,
    });

    const redSquare = new Rect({
      left: 50,
      top: 50,
      fill: 'red',
      width: 100,
      height: 100
    });

    const blueSquare = new Rect({
      left: 200,
      top: 200,
      fill: 'blue',
      width: 100,
      height: 100
    });

    initCanvas.add(redSquare, blueSquare);
    setCanvas(initCanvas);

    initCanvas.on('selection:created', (e) => setActiveObject(e.selected[0]));
    initCanvas.on('selection:updated', (e) => setActiveObject(e.selected[0]));
    initCanvas.on('selection:cleared', () => setActiveObject(null));

    return () => {
      initCanvas.dispose();
    };
  }, []);

  const bringForward = () => {
    if (activeObject) {
      activeObject.bringForward();
      canvas.renderAll();
    }
  };

  const sendBackward = () => {
    if (activeObject) {
      activeObject.sendBackwards();
      canvas.renderAll();
    }
  };

  return (
    <div>
      <canvas ref={canvasRef} />
      <div>
        <button onClick={bringForward} disabled={!activeObject}>Bring Forward</button>
        <button onClick={sendBackward} disabled={!activeObject}>Send Backward</button>
      </div>
      <p>
        {activeObject
          ? `Selected: ${activeObject.fill} square`
          : 'No object selected'}
      </p>
    </div>
  );
};

export default FabricCanvasTest;

Discord.js RoleSelectMenuBuilder filtering roles

I am trying to make a discord bot that users can give themselves role but they shouldn’t get all the roles they want so im trying to filter roles but i couldn’t solve this.

I’ve got the wanted roles for filter, and tried to .addOptions() func and filter roles inside,it didn’t worked.

When calling window.print() in Chrome, how can I fix the issue where it behaves unexpectedly only on the first print?

This issue has been occurring for about a month. It doesn’t happen in Naver Whale browser but does occur in Chrome and Edge. When window.print() is called for the first time, it behaves unexpectedly. How can I resolve this issue?

I’m using Angular, and the parameters required for printing are passed through the URL. When window.print() is called for the first time, the print preview window opens, but the URL gets reset, causing an issue. From the second print onwards, it works as expected. How can I resolve this issue?

Why does input type=”time” display as radio button on iOS?

I have a time input field in my React app. Code:

      <div style={{ marginTop: '30px' }}>
    <input
      aria-label="Time"
      type="time" 
      onChange={handleTimeChange}
      style={{ padding: '8px', fontSize: '16px', width: 'auto' }}
    />
  </div>

Why on iOS it shows as radio buton? On dekstop it shows as expected as time input field. Using Safari on both devices.

Safari iOS

Safari OSX

Need a library to use SQL queries on JavaScript objects [closed]

I’m looking for a library that can use SQL queries on JavaScript objects in a web environment. I tried Alasql, but I’m concerned because it doesn’t support many keywords that I need.

Current situation:

  • Files (such as CSVs) uploaded by users of the app are stored in IndexedDB in a columnar format using our own logic.
  • I’d like to be able to run SQL queries on this data in the web environment when needed.

Requirements:

  • Since we don’t know what kind of CSV users will upload, we can’t ‘precisely’ declare column types, etc., using CREATE TABLE.
    • This means it would be the best to query directly from the javascript object/array in memory..
  • It should support most of the keywords used in standard SQL.
  • Ideally, it should be able to write SQL queries directly on the current columnar data structure.
    • If not possible, I’m also considering extracting only the columns needed for the query and changing the data structure to row-wise.

Are there any good libraries that meet these requirements? Thank you.

Write a program that declares a named constant to hold the number [closed]

I need help Writing a program that declares a named constant to hold the number of quarts in a gallon (4). Also declare a variable to represent the number of quarts
needed for a painting job. Name the variable quartsNeeded, and assign 18 to
it. Compute and display the number of gallons and quarts needed for the job.
Display explanatory text in the format A job that needs 18 quarts requires 4
gallons plus 2 quarts.

import java.util.Scanner;

public class PS2p1 {

public static void main(String[] args) {
    // TODO Auto-generated method stub
    // Declare a constant for the number of quarts in a gallon
    int qrtsinaglln = 4;
    float qrtsNeeded = 18;
    float gallns;
    float remainingqrts;
    
    // INPUTFACE 
    
    Scanner inputdevice = new Scanner(System.in); 
    qrtsinaglln=inputdevice.nextInt();
            
    
    //Process 
    gallns = qrtsNeeded / qrtsinaglln;
    
    remainingqrts = qrtsNeeded % qrtsinaglln;
    
    //OUTPUT 
    System.out.println("A job needs"+qrtsNeeded Quarts Required"+gallns"gallons plus"+remainingqrts"; "
            + "

How to work with DATES on Javascript different server and client timezones

I am working with an app with this conditions:

  1. Client is in different countries. (Local time zone will vary)
  2. I do not now exactly which time-zone will server located at.

Example:

In MongoDB using mongoose time stamp functionality :

createdAt: 2024-09-02T22:44:26.794+00:00 //Local time in client: 2024-09-02T16:44:26.794-06:00

Now the issue I am facing is:

“I want to retrieve all the documents created “TODAY” , but the meaning off today is relative to “local time” where the query was used, example:

Day starts in GTM-6 at 2024-09-02T06:00:00.000+00:00
Day starts in GTM-1 at 2024-09-02T01:00:00.000+00:00

So I need the “best practice” to work with dates on javascript.

¿How to tell the query that it needs to use a specific offset?