Category: javascript

I made a project based on Scroll and I was fine using onscroll() to listen for scroll changes. I needed to switch to TranslateX(), now I need another listener to listen for changes in the div

the backend it said undefined (reading ‘idshow’) also Request body: undefined

const incrementShowNumber = async (labelshow) => {
  console.log(labelshow.idshow); // result is 5
  try {
    const response = await axios.put("http://localhost:50100/regisshow", {
      idshow: labelshow.idshow
    });

This is my backend code

app.put('/regisshow', function(req, res) {
  console.log('Request body:', req.body); // add this line to log the request body
  const idshow = req.body['idshow'];
  
  Regisshow.findOneAndUpdate({ idshow: idshow }, { $inc: { numbershow: 1 } }, { new: true }, (err, regisshow) => {
    if (err) {
     

I am writing a simple popup for my website build with Nextjs. It uses the onclick attribute. I am simply taking the id and checking if display property in CSS is none using if else. Accordingly I am setting display to none or block. It works fine, the only problem is when the page loads, for the first time, it takes two clicks.

Following in the code in Nextjs concerned to this issue that is working and I have tried. As described, for it to start working it takes two clicks. I want it to work in the first click itself.
Url of the website – gurjotsinghdev.vercel.app
Github Source code – https://github.com/gurjotsinghdev/gurjotsinghdev

let pokepop = () => {
    let pokepop = document.getElementById("pokepopboxid");
    if (pokepop.style.display == "none") {
        pokepop.style.display = "block";
      } else {
        pokepop.style.display = "none";
      }

}
export default function Header() {
    return (
        <>

            <div className={styles.header}>
                <h1 className={styles.logo}>
                    <Link href="/"><a>
                        <Image
                            src={logo}
                            alt="Picture of the author"
                            className={styles.logo}
                            width={80}
                            height={80}
                        />
                    </a></Link>
                </h1>
                <div className={styles.mainMenu}>
                    <Link href="/projects"><a>Projects</a></Link>
                    <Link href="/about"><a>About</a></Link>
                    <Link href="/blog"><a>Blog</a></Link>
                    <Link href="/">
                    <a onClick={() => pokepop()} >
                    <Image
                        src={pokeball}
                        alt="Picture of the author"
                        className={styles.pokeball}
                        width={40}
                        height={40}

                    /></a></Link>

                </div>
                <div id="pokepopboxid" className="pokepopbox">
                    <h2>My Pokemon</h2>
                    
                </div>
            </div >
        </>
    )
}

I am receiving a runtime error when attempting to query a postgres database using TypeORM.

Code

import { BaseEntity, Column, ConnectionOptions, DataSource, Entity, PrimaryGeneratedColumn } from 'typeorm';

interface IPuzzle {
  puzzle: string[][];
  puzzle_num: number;
  active_from: Date;
  active_to: Date;
}

@Entity()
class PuzzleEntity extends BaseEntity implements IPuzzle {
  @PrimaryGeneratedColumn()
  id: number;

  @Column('jsonb')
  puzzle: string[][];

  @Column({ unique: true })
  puzzle_num: number;

  @Column({ type: 'timestamptz', nullable: false })
  active_from: Date;

  @Column({ type: 'timestamptz', nullable: false })
  active_to: Date;
}


export const dbConnection: ConnectionOptions = {
  type: 'postgres',
  host: 'localhost',
  port: 5432,
  username: 'root',
  password: 'admin',
  database: 'test',
  synchronize: true,
  logging: false,
  entities: [PuzzleEntity],
};

console.log('Creating data source');
const appDataSource = new DataSource(dbConnection);
console.log('Initializing data source');

appDataSource.initialize();

const getCurrentPuzzle = async (): Promise<PuzzleEntity> => {
  const now = new Date();

  const res = await appDataSource
      .createQueryBuilder()
      .select("Puzzle")
      .from(PuzzleEntity, "Puzzle")
      .where(":now > Puzzle.active_from AND :now < Puzzle.active_to ", { now })
      .orderBy('active_from', 'DESC')
      .getOne();
  return res;
}

console.log('Attempting to query');
getCurrentPuzzle().then(p => console.log(p));

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "lib": ["es2017", "esnext.asynciterable"],
    "typeRoots": ["node_modules/@types"],
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "pretty": true,
    "sourceMap": true,
    "declaration": true,
    "outDir": "dist",
    "allowJs": false,
    "noEmit": false,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "importHelpers": true,
    "baseUrl": "src",
    "downlevelIteration": true,
    "paths": {
      "@/*": ["*"],
      "@controllers/*": ["controllers/*"],
      "@databases": ["databases"],
      "@dtos/*": ["dtos/*"],
      "@entities/*": ["entities/*"],
      "@exceptions/*": ["exceptions/*"],
      "@interfaces/*": ["interfaces/*"],
      "@middlewares/*": ["middlewares/*"],
      "@routes/*": ["routes/*"],
      "@services/*": ["services/*"],
      "@utils/*": ["utils/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.json", ".env"],
  "exclude": ["node_modules", "src/http", "src/logs", "src/tests"]
}

Output

Creating data source
Initializing data source
Attempting to query
(node:9148) UnhandledPromiseRejectionWarning: TypeError: Class constructor PuzzleEntity cannot be invoked without 'new'
    at SelectQueryBuilder.createFromAlias (C:UsersDavid StewartDownloadso_my_word-maino_my_word-mainweb_appservernode_modulestypeormquery-builderQueryBuilder.js:424:37)

Full stack trace

(node:29724) UnhandledPromiseRejectionWarning: TypeError: Class constructor PuzzleEntity cannot be invoked without 'new'
    at SelectQueryBuilder.createFromAlias (C:UsersDavid StewartDownloadso_my_word-maino_my_word-mainweb_appservernode_modulestypeormquery-builderQueryBuilder.js:424:37)
    at SelectQueryBuilder.from (C:UsersDavid StewartDownloadso_my_word-maino_my_word-mainweb_appservernode_modulestypeormquery-builderSelectQueryBuilder.js:164:32)
    at C:UsersDavid StewartDownloadso_my_word-maino_my_word-mainweb_appserverdistapp.js:73:10
    at Generator.next (<anonymous>)
    at C:UsersDavid StewartDownloadso_my_word-maino_my_word-mainweb_appservernode_modulestslibtslib.js:117:75
    at new Promise (<anonymous>)
    at Object.__awaiter (C:UsersDavid StewartDownloadso_my_word-maino_my_word-mainweb_appservernode_modulestslibtslib.js:113:16)  
    at getCurrentPuzzle (C:UsersDavid StewartDownloadso_my_word-maino_my_word-mainweb_appserverdistapp.js:68:40)
    at Object.<anonymous> (C:UsersDavid StewartDownloadso_my_word-maino_my_word-mainweb_appserverdistapp.js:81:30)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:29724) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:29724) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Environment

I initially opened this an issue on the TypeORM github issue tracker but after sleeping on it I’m not so sure that it’s a bug with TypeORM.

I’m running a Vite app using Vue 3 with Vue Router 4.1.6 and I’m having some trouble working with Vue Router.

AppBar.vue:

export default {
  name: 'AppBarComponent',
  methods: {
    login() {
      this.$router.go(-1)
    }
  }
}
</script>

For some reason, it shows as Unresolved variable go, and does the same for push, etc. I’m not quite sure why it’s being undefined.

main.js:

import { createApp } from "vue";
import App from './App.vue'
import router from './router'
import { registerPlugins } from '@/plugins'

const app = createApp(App).use(router)

registerPlugins(app)

app.mount('#app')

index.js:

import app from '../App.vue'
import login from '../components/LoginComponent'
import home from '../components/HomeComponent'

const routes = [
  {
    path: '/',
    component: home
  },
  {
    path: '/login',
    component: login
  }
  ]


const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router;

how to make a bot respond to commands

For example

I’m writing hello

the bot should reply hello

tried through

client.on("message", msg => {
  if (msg.content === "hello") {
    msg.reply("hello");
  }
})

but it doesn’t work, the bot just doesn’t answer anything.

I have some functions set up in my html file and my javascript file. Everything seems to work except for my initial asynchronous function to store the current exchange rates of some currencies. The function works, but it isn’t running in order to save the values of the currencies.

The javascript code for scraping is below:

const puppeteer = require('puppeteer');
var EUR;
var JPY;
var GBP;
var CHF;
var CAD;
var AUD;
var HKD;
var USD;

const values = async function () {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto("https://www.exchange-rates.org/");

    const [el] = await page.$x('/html/body/div[1]/div[4]/div/div/section[2]/div[1]/div/table[2]/tbody/tr[1]/td[3]/text()');
    const txt = await el.getProperty('textContent');
    const eur = await txt.jsonValue();

    const [el1] = await page.$x('/html/body/div[1]/div[4]/div/div/section[2]/div[1]/div/table[2]/tbody/tr[1]/td[4]/text()');
    const txt1 = await el1.getProperty('textContent');
    const jpy = await txt1.jsonValue();
    
    const [el2] = await page.$x('/html/body/div[1]/div[4]/div/div/section[2]/div[1]/div/table[2]/tbody/tr[1]/td[5]/text()');
    const txt2 = await el2.getProperty('textContent');
    const gbp = await txt2.jsonValue();

    const [el3] = await page.$x('/html/body/div[1]/div[4]/div/div/section[2]/div[1]/div/table[2]/tbody/tr[1]/td[6]/text()');
    const txt3 = await el3.getProperty('textContent');
    const chf = await txt3.jsonValue();

    const [el4] = await page.$x('/html/body/div[1]/div[4]/div/div/section[2]/div[1]/div/table[2]/tbody/tr[1]/td[7]/text()');
    const txt4 = await el4.getProperty('textContent');
    const cad = await txt4.jsonValue();

    const [el5] = await page.$x('/html/body/div[1]/div[4]/div/div/section[2]/div[1]/div/table[2]/tbody/tr[1]/td[8]/text()');
    const txt5 = await el5.getProperty('textContent');
    const aud = await txt5.jsonValue();

    const [el6] = await page.$x('/html/body/div[1]/div[4]/div/div/section[2]/div[1]/div/table[2]/tbody/tr[1]/td[9]/text()');
    const txt6 = await el6.getProperty('textContent');
    const hkd = await txt6.jsonValue();
    
    EUR = parseFloat(eur);
    JPY = parseFloat(jpy);
    GBP = parseFloat(gbp);
    CHF = parseFloat(chf);
    CAD = parseFloat(cad);
    AUD = parseFloat(aud);
    HKD = parseFloat(hkd);
    //USD = parseFloat(1);

    //console.log([EUR,JPY,GBP,CHF,CAD,AUD,HKD,USD]);

    browser.close();
    return [EUR,JPY,GBP,CHF,CAD,AUD,HKD,USD];
}

I don’t need the value of the return array since I am setting the values equal to global variables. Additionally, how I got the code to work for outputting to the console was by creating an async function and using await values() in it. So, I made this function:

async function awaiter(){
    await values();
}

I would just like the global variables to be set so that I can run the functions and output the values to the correct section of my HTML file. Everything else runs correctly besides this. I’ve tried running awaiter() or values() during onload in the body tag. this gave a result of NaN which means that the global vars didn’t set. Additionally, I tried calling awaiter() or values() in the main HTML below:

<h2>
        <div id="prompt3">
            <script>
                function main(){
                    generateDataIni();
                    var holder = generateDataExp();
                    document.getElementById("prompt3").innerHTML = holder;
                }
            </script> 
        </div>
</h2>

I’m not too sure if it is possible to get the values to store in the variables. This is the last thing that isn’t working. To get the output in the HTML doc, I have a button to run the function main(). Ideally, I’d like values() to be run each time the button is clicked in order to update the current exchange rates.

Creating custom hooks for POST method in fetch(). Unfortunately, the API is not calling with in the useCallBack() Is there anything missing with in the code?

usePostQuery.js

import { useCallback, useState } from "react";

const usePostQuery = (url, data) => {
  const [responseData, setResponseData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  const callPost = useCallback(
    async (data) => {
      try {
        setLoading(true);

        const response = await fetch(url, {
          method: "POST",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            title: data.message,
            userId: 5
          })
        });

        console.log("---------response---------");
        console.log(response);
        const jsonResult = await response.json();

        setResponseData(jsonResult);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    },
    [url]
  );

  return { responseData, loading, error, callPost };
};

export default usePostQuery;

Javavscript help (array at bottom)
I have a 2D array which holds a date of month in one column (a string) and an integer next to it i.e. array= [‘Oct 2020’ , 23456], [‘Nov 2020’ , 34567], [‘Dec 2020’ , -4567]…etc I have to work out:

• total amount of months in this array (which I’ve managed),
• the total of all the profit/loss form the integers (which I’ve managed alt methods welcome it’ll help me learn more),
• the average difference of profit/loss between each month’s by calculating the difference between each month first then adding and dividing by total number of months,
• the month with the biggest profit in the array
• the month with biggest lost in the array.

I’m able to provide the code. I think I understand how to do this in a 1D array but with a 2D array the results didn’t work. Please could I have some help and a walk through of your answer. I don’t mind how its worked out but if you could have an example with the reduce function in your answer and an answer without that would be great if not no problem.

var finances = [
['Jan-2010', 867884],
['Feb-2010', 984655],
['Mar-2010', 322013],
['Apr-2010', -69417],
['May-2010', 310503],
['Jun-2010', 522857],
['Jul-2010', 1033096],
['Aug-2010', 604885],
['Sep-2010', -216386],
['Oct-2010', 477532],
['Nov-2010', 893810],
['Dec-2010', -80353],
['Jan-2011', 779806],
['Feb-2011', -335203],
['Mar-2011', 697845],
['Apr-2011', 793163],
['May-2011', 485070],
['Jun-2011', 584122],
['Jul-2011', 62729],
['Aug-2011', 668179],
['Sep-2011', 899906],
['Oct-2011', 834719],
['Nov-2011', 132003],
['Dec-2011', 309978],
['Jan-2012', -755566],
['Feb-2012', 1170593],
['Mar-2012', 252788],
['Apr-2012', 1151518],
['May-2012', 817256],
['Jun-2012', 570757],
['Jul-2012', 506702],
['Aug-2012', -1022534],
['Sep-2012', 475062],
['Oct-2012', 779976],
['Nov-2012', 144175],
['Dec-2012', 542494],
['Jan-2013', 359333],
['Feb-2013', 321469],
['Mar-2013', 67780],
['Apr-2013', 471435],
['May-2013', 565603],
['Jun-2013', 872480],
['Jul-2013', 789480],
['Aug-2013', 999942],
['Sep-2013', -1196225],
['Oct-2013', 268997],
['Nov-2013', -687986],
['Dec-2013', 1150461],
['Jan-2014', 682458],
['Feb-2014', 617856],
['Mar-2014', 824098],
['Apr-2014', 581943],
['May-2014', 132864],
['Jun-2014', 448062],
['Jul-2014', 689161],
['Aug-2014', 800701],
['Sep-2014', 1166643],
['Oct-2014', 947333],
['Nov-2014', 578668],
['Dec-2014', 988505],
['Jan-2015', 1139715],
['Feb-2015', 1029471],
['Mar-2015', 687533],
['Apr-2015', -524626],
['May-2015', 158620],
['Jun-2015', 87795],
['Jul-2015', 423389],
['Aug-2015', 840723],
['Sep-2015', 568529],
['Oct-2015', 332067],
['Nov-2015', 989499],
['Dec-2015', 778237],
['Jan-2016', 650000],
['Feb-2016', -1100387],
['Mar-2016', -174946],
['Apr-2016', 757143],
['May-2016', 445709],
['Jun-2016', 712961],
['Jul-2016', -1163797],
['Aug-2016', 569899],
['Sep-2016', 768450],
['Oct-2016', 102685],
['Nov-2016', 795914],
['Dec-2016', 60988],
['Jan-2017', 138230],
['Feb-2017', 671099]
];

code for how many months:

let monthsTotal = finances.length;

console.log("Total months: ", monthsTotal);

my first attempt to try and find the total profits/losses (i.e. sum of all integers). It just printed out the array in a messy form

const netTotal =finances.reduce((sum, curVal) => sum + curVal); 

console.log("Total Profits/Loses: ", netTotal);

my second attempt actually works to find the sum which i have called netTotal

let netTotal = finances.map(function(v) { return v[1] })         // second value of each
     .reduce(function(a,b) { return a + b });  // sum
     console.log('Total:', netTotal)

so just the the last 3 bullet points technically

I have a parent component which is having Outlet for sub routes.
I wanted to pass the data from the parent component (App.js) to the component rendered by Outlet for the default Link (Test.js).

For which, I used the state object of location and passed the data from parent Component.

 <Link to="" state={{ data }}>
    Render test
 </Link>

Although on initial render, it is still null in child component (Test.js), but if I navigate to some other route (route: /dummy, component : Dummy.js) within that parent and come back to Test.js components route, I am able to see value in the location.state.

Codesandbox link for more clearity: https://codesandbox.io/s/location-state-zjs5rt

I tried adding location.state as dependency in useEffect but it is not getting triggered on the initial render.

  useEffect(() => {
    if (location.state) {
      setTestData(location.state.data);
    }
  }, [location?.state]);

I wanted to pass some async data from App.js and use it inside Test.js component to render certain things, how can i acheive this?

n my Google Sheets app script, I currently have three template.html files and a few scripts; I’d like to create a preview email and send it to the user once he or she is satisfied; however, the event listeners that (openAI) built for me do not work; when I change the buttons, the preview does not work or change. The AI keeps modifying my code; it no longer looks like the original; after a week of trying, I’ve realized that I need assistance with this. Here’s my most recent code as of today. The AI also insisted on using Google Drive, which I declined because I have the HTML files in the app scrip sheet itself and used to obtain it with this.

This code is not used anymore, But use to work when I used it in GmailApp to get the template File Name.

var html = HtmlService.createTemplateFromFile('Proposal Template.html');  
var html = HtmlService.createTemplateFromFile('Marketing Template.html');  
var html = HtmlService.createTemplateFromFile('Trusted Partner Template.html'); 

Keep in mind that while I am not an expert in Jave or JS, I am familiar with them.

My code

function showEmailPreview() {
  // Get values from the active sheet and active row
  var sheet = SpreadsheetApp.getActiveSheet();
  var row = sheet.getActiveRange().getRowIndex();
  var userEmail = sheet.getRange(row, getColIndexByName("Primary Email")).getValue(); 
  var userFullName = sheet.getRange(row, getColIndexByName("Contact Full Name")).getValue();  
  var userCompanyName = sheet.getRange(row, getColIndexByName("Company Name")).getValue();  
  var title = sheet.getRange(row, getColIndexByName("Title")).getValue();   
  var company_location = sheet.getRange(row, getColIndexByName("Company Location")).getValue();    
  var company_phone1 = sheet.getRange(row, getColIndexByName("Company Phone 1")).getValue();    
  var subjectLine = "Company Proposal - " + userCompanyName;
 
  // Create the select element
  const select = `
    <select id="template-select">
      <option value="Proposal Template.html">Proposal Template</option>
      <option value="Marketing Template.html">Marketing Template</option>
      <option value="Trusted Partner Template.html">Trusted Partner Template</option>
    </select>
  `;

  // Create the button element
  const button = `<button id="send-button">Send Email</button>
<div id="preview"></div>`; //This could be a issue? The ai did not know where to place this or cut down before giving me a proper answer. 

  // Create an HTML output page that displays the email template, the select element, and a button to send the email
  var output = HtmlService.createHtmlOutput(`
    <script>
      var buttonElement;
  
  function getElementById(id) {
    return document.getElementById(id);
  }

  function init() {
    // Add a change event listener to the select element
    document.getElementById('template-select').addEventListener('change', function() {
      // Get the selected template file name
      var templateFile = this.value;
      
      // Read the contents of the selected file
      var template = readFile(templateFile);
      
      // Set values in the template
      var html = HtmlService.createTemplate(template);
      html.userFullName = userFullName;
      html.userCompanyName = userCompanyName;
      html.title = title;
      html.company_location = company_location;
      html.company_phone1 = company_phone1;
      
      // Get the filled-in email template as a string
      var emailTemplate = html.evaluate().getContent();
      
      // Update the preview window with the selected template
      document.getElementById('preview').innerHTML = emailTemplate;
    });
    
    // Add a click event listener to the button element
    buttonElement = getElementById('send-button');
    buttonElement.addEventListener('click', function() {
      // Get the selected template file name
      var templateFile = document.getElementById('template-select').value;
      // Pass the selected template file name as an argument to the sendEmail function
      sendEmail(templateFile);
    });
  }

  window.onload = init; 
 
function sendEmail(templateFile) {
  // Read the contents of the selected file
  var template = readFile(templateFile);

  // Set values in the template
  var html = HtmlService.createTemplate(template);
  html.userFullName = userFullName;
  html.userCompanyName = userCompanyName;
  html.title = title;
  html.company_location = company_location;
  html.company_phone1 = company_phone1;
  
  // Get the filled-in email template as a string
  var emailTemplate = html.evaluate().getContent();
  
  // Send the email
  GmailApp.sendEmail(userEmail, subjectLine, '', {htmlBody: emailTemplate});
}  
 
    </script>
    <script>
  init();
</script>

    ${select}
    ${button}
  
  `)
    .setWidth(950)
    .setHeight(750)
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);

// Display the output page in a modal dialog box

SpreadsheetApp.getUi().showModalDialog(output, 'Email Preview');
//output.evaluate();
//window.onload = init;


};
function readFile(templateFile) {
  // Get the contents of the selected file
  var file = DriveApp.getFilesByName(templateFile);
  var contents = file.next().getBlob().getDataAsString();
  return contents;
}//window.onload = init;

Results.

Trying to use blockonomics to aceped payments on my next js site. I have added a meta tag –

 <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.blockonomics.co"/>

in my _document.tsx file –

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
         <Head>
         <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.blockonomics.co"/>

      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

But it still gets blocked. –

Loading failed for the <script> with source “https://www.blockonomics.co/js/pay_button.js”. 
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”). 
Content Security Policy: The page’s settings blocked the loading of a resource at https://www.blockonomics.co/js/pay_button.js (“default-src”). 

Any help is appreciated. This site is a tor site.

I am using GraphQL/Apollo in my web code. I need to query one API with different parameters (patial difference). I cannot change the signature of the API, but I want to optimize the query with one useQuery in Apollo. How to do this? and how to get the data?

My code is like :

const{data, loading} = useQuery(QUERY, {
   query getResults(
         $cityId: Int
         $countryId: Int
         $version1: Int
         $version2: Int) {
           // first one
            getApi( 
               cityId: $cityId, 
               countryId: $countryId,
               version: version1) {  
               id
            }
           // second one
           getApi( 
               cityId: $cityId, 
               countryId: $countryId,
               version: version2) {  
               id
            }
         }
})

I think this might not work and maybe bad practise. So how write userQuery in this scenarios??

Also, even if it works, how I get the data back?
Usually if I only have one API call, when I want to get id from the results, I will do like

data.getApi.id

But as I have two api calls in useQuery, how to get the all ids?

bonsoir tout le monde , sa fait 2 mois que jai commencez a faire du html et css j’ai un peu était dans le javaScript mais sans plus , sa fait plusieurs semaines que jessaye de faire fonctionner la commande toggle mais je n’y arrive pas pourtant jai tout essayer

jai essayer de regarder des video , tuto de partout mais je ne trouve pas c’est pour sa que je m’adresse a vous si quelqu’un a la solution peut-il me l’expliquer simplement . Merci a vous d’avoir pris le temps de lire mon message

I’m using Bootstrap with the data-live-search property. In the code, even though there are no errors in inspect element, the CSS is rendering very poorly.

Below is the code for the select. I’m using a template so I have no idea where the javascript is stored for this feature.

<select class="form-control show-tick" data-size="79" data-style="btn btn-primary btn-round" title="Select all present personnel" data-live-search="true" data-selected-text-format="count" tabindex="-98" multiple>
 <?php
    $personnel = new Personnel();
    foreach(Personnel::Data() as $row)
    {
      $personnel->setID($row['id']);
      echo "<option>{$personnel->print_name()}</option>";
    }
 ?>
</select>

All the PHP here does is add all personnel from the database as an option. The errors described in this post happen with or without the PHP.

I’ve noticed that changing the data-size property to be greater than or equal to the number of options shows the full title of options, but it then adds an ugly overflow of white where the search bar is.

(In the examples below, personnel names have been censored, but the errors exist even before the censoring code.)

CSS Rendering when data-size property is not set OR the property is lower than the number of options In this example, the error is not fixed by expanding the size of the div. It stays that way and just adds white space between the name and the scrollbar.

CSS Rendering when data-size property is set to the amount of options or is greater than

Even with the search bar visually overflowing, text put in the search bar will not overflow. It simply expands the entire container, and pushes the overflow further to the right.

I’m expecting it to look like the second picture without the overflow of the search bar.