Category: javascript

I’ve a survey page in Vue JS which there is a dropdown which contains multiple options. There must be an answer selected by default whose answerid is stored in the api response as DefaultAnswerId. The problem is:
Whenever I’m opening the dropdown and trying to clear the default option which is No Answer, I’m neither able to clear it nor deselect it from the dropdown.
Can anyone help what can be the reason. Code given below

<template>
  <v-select
    v-model="question.SelectedAnswers"
    :items="question.Answers"
    item-text="ansName"
    item-value="ansId"
    clearable
    placeholder="Select Answer"
    multiple
@update:modelValue="getAvailableAnswers"
  ></v-select>
</template>
methods: {
  getAvailableAnswers() {
    if (!this.question.Answers || this.question.Answers.length === 0) {
      return [];
    }

    if (this.question.SelectedAnswers === null || 
        this.question.SelectedAnswers === undefined || 
        this.question.SelectedAnswers.length === 0) {
      // Check if there is a default system ID and it's not null
      if (this.question.DefaultAnswerId !== undefined && this.question.DefaultAnswerId !== null) {
        this.question.SelectedAnswers = [this.question.DefaultAnswerId];
      } 
      this.question.saveResponse = true; // This saves the answer
    } 
      // Regular handling for answers
      const answers = this.question.Answers.filter(ans => ans.ResponseId === this.question.ResponseId);
      return answers; //This returns the answers array
    
  }

  
}

So I am creating my portfolio right now and I want to put emphasis on some words inside my paragraph by changing their color. I’ve been using the mark tag, which makes sure screen readers are aware of the emphasis, but it also acts as if the mark tag is separate from the paragraph; making the screen reader stop until the user continues manually.

I just want to make sure this is not an accessibility concern. Here is my code:

<p>
  Having <mark class="blue">authority</mark> over your brand is important in business. You decide how you want your brand to be <mark class="blue">perceived</mark>, interacted with, and <mark class="blue">connected</mark> to your community. If you ever need guidance on any of these aspects, I am more than willing to provide feedback and services related to brand identity.
</p>

If anyone could provide some tips that would be very appreciated. I just want to learn a little more about accessibility and ways to keep a good visual style at no cost.

I am using swiper.js and and I’m trying to have a swiper with text slide, video slide and image slide, the slide are created in a js file because their is different swiper with not the same amount of slide, not problem when creating a swiper with only image but when I try to add text slide it won’t work, the text isn’t really considered a slide and so on the same slide their is the text and the next slide an image or an another text for example.I don’t understand why I can’t put the text on a slide by himself.

function forceLazyLoad(swiper) {
    const slides = swiper.slides;
    slides.forEach((slide) => {
        const images = slide.querySelectorAll('.swiper-lazy');
        images.forEach((img) => {
            if (!img.src) {
                img.src = img.getAttribute('data-src');
            }
        });
    });
}


function createSlides(collection) {
    const swiperWrapper = document.getElementById('swiper-wrapper');
    swiperWrapper.innerHTML = '';
    collection.forEach((item, index) => {
        const slide = document.createElement('div');
        slide.className = 'swiper-slide';
        
        if (item.type === 'text' || item.type ==='textS') {
            const textDiv = document.createElement('div');
            textDiv.className = 'carousel-text swiper-lazy';
            textDiv.style.display = 'block';
            textDiv.innerHTML = item.content; 
            textDiv.style.textAlign = 'center';
            slide.appendChild(textDiv);
        } else if (item.type === 'video') {
            const video = document.createElement('video');
            video.setAttribute('data-src', item.src);
            video.className = 'swiper-lazy';
            video.controls = true;
            video.setAttribute('data-text', item.text);
            const preloader = document.createElement('div');
            preloader.className = 'swiper-lazy-preloader';
            slide.appendChild(video);
            slide.appendChild(preloader);
        } else if (item.type === 'double') {
            const img1 = document.createElement('img');
            img1.setAttribute('data-src', item.src1);
            img1.className = 'img-fluid swiper-lazy';
            img1.setAttribute('data-text', item.text);
            
            const img2 = document.createElement('img');
            img2.setAttribute('data-src', item.src2);
            img2.className = 'img-fluid swiper-lazy';
            img2.setAttribute('data-text', item.text2);
            
            const preloader1 = document.createElement('div');
            preloader1.className = 'swiper-lazy-preloader';
            
            const preloader2 = document.createElement('div');
            preloader2.className = 'swiper-lazy-preloader';

            slide.appendChild(img1);
            slide.appendChild(preloader1);
            slide.appendChild(img2);
            slide.appendChild(preloader2);
        } else if (item.type === 'quatre') {
            const img1 = document.createElement('img');
            img1.setAttribute('data-src', item.src1);
            img1.className = 'img-fluid2 swiper-lazy';
            img1.setAttribute('data-text', item.text);
            
            const img2 = document.createElement('img');
            img2.setAttribute('data-src', item.src2);
            img2.className = 'img-fluid2 swiper-lazy';
            img2.setAttribute('data-text', item.text2);

            const img3 = document.createElement('img');
            img3.setAttribute('data-src', item.src3);
            img3.className = 'img-fluid2 swiper-lazy';
            img3.setAttribute('data-text', item.text3);

            const img4 = document.createElement('img');
            img4.setAttribute('data-src', item.src4);
            img4.className = 'img-fluid2 swiper-lazy';
            img4.setAttribute('data-text', item.text4);
            
            const preloader1 = document.createElement('div');
            preloader1.className = 'swiper-lazy-preloader';
            
            const preloader2 = document.createElement('div');
            preloader2.className = 'swiper-lazy-preloader';

            const preloader3 = document.createElement('div');
            preloader3.className = 'swiper-lazy-preloader';

            const preloader4 = document.createElement('div');
            preloader4.className = 'swiper-lazy-preloader';

            slide.appendChild(img1);
            slide.appendChild(preloader1);
            slide.appendChild(img2);
            slide.appendChild(preloader2);
            slide.appendChild(img3);
            slide.appendChild(preloader3);
            slide.appendChild(img4);
            slide.appendChild(preloader4);
        } else if (item.type === 'slime') {
            const slimeDiv = document.createElement('div');
            slimeDiv.className = 'slime-slide';
            slimeDiv.innerHTML = '<div class="slime"></div>';
            slide.appendChild(slimeDiv);
        } else {
            const img = document.createElement('img');
            img.setAttribute('data-src', item.src); 
            img.id = 'dynamicImage';
            img.className = 'img-fluid swiper-lazy'; 
            img.setAttribute('data-text', item.text);
            img.onclick = () => toggleFullscreen(img);
            const preloader = document.createElement('div');
            preloader.className = 'swiper-lazy-preloader';
            img.addEventListener('mouseover', () => {
                const curseurTexte = document.getElementById('curseurTexte');
                curseurTexte.textContent = item.text;
                curseurTexte.style.display = 'block';
            });
    
            img.addEventListener('mousemove', (e) => {
                const curseurTexte = document.getElementById('curseurTexte');
                curseurTexte.style.left = (e.clientX + window.scrollX - 10) + 'px';
                curseurTexte.style.top = (e.clientY + window.scrollY - 30) + 'px';
            });
    
            img.addEventListener('mouseout', () => {
                const curseurTexte = document.getElementById('curseurTexte');
                curseurTexte.style.display = 'none';
            });
            slide.appendChild(img);
            slide.appendChild(preloader); 

        }
        swiperWrapper.appendChild(slide);
    });
    
    swiper.update(); 
    swiper.slideTo(0); 
    currentSlide = 0;
    swiper = new Swiper('.swiper-container', {
        loop: true,
        slidesPerView : 'auto',
        mousewheel: {
            invert: true,
        },
        lazy: {
            loadPrevNext: true,
            loadOnTransitionStart: true,
        },
        on:{
        slideChangeTransitionEnd: function () {
            currentSlide = swiper.realIndex; 
            if( currentSlide === previousIndex ) {
                swiper.slideTo(0);
            }
            previousIndex = currentSlide;
            //updateCarousel();
        },
        slideChange: function () {
            forceLazyLoad(swiper);
        }
    }
 
    });
}`

In this code their is a case for every type of slide, it’s use whenever their is a new swiper
I also “store” my image and text like this

'KITTY': [
        { type:'text', content:"text example"},
        { src: '/Carousel/HELLO KITTY/affiche/モントルハローキティ.webp', text: 'モントルハローキティ' }
    ],

And the html

<div class="swiper-container">
                <div class="swiper-wrapper" id="swiper-wrapper">
                </div>
                <div class="carousel-controls">
                  <div class="carousel-control-prev">&#8249;</div>
                  <div class="carousel-control-next">&#8250;</div>
              </div>
 </div>

I tried to change the setting of my swiper, slide per view or things like that, the thought the problem came from the lazy loader because without the forceLazyLoad function the image won’t show up but even without the problem remains the same.
Thank you for the help.

I have this CKEditor 5 code for my website. I want to get the data and set new data but i can’t get the editor instance. Here is revelant codes.

<script type="module">
import {
    // ...
} from 'ckeditor5';

import translations from 'ckeditor5/translations/tr.js';

const editorConfig = {
    // ...
};

let CKeditor;
ClassicEditor.create(document.querySelector('#editor'), editorConfig).then( editor => {
        editor.setData("<p>Hello World</p>");

        CKeditor = editor;
    } )
    .catch( error => {
        console.error( error );
    } );

console.log (CKeditor);
CKeditor.setData("<p>Another Hello World</p>");
</script>

<textarea name="content" id="editor" class="block"></textarea>

When executed, CKeditor value is undefined and the editor shows “Hello World”, not “Another Hello World”.
I tried other aproaches like this, but it didn’t work either.

const domEditableElement = document.querySelector( '.ck-editor__editable' );
    
const editorInstance = domEditableElement.ckeditorInstance;
    
editorInstance.setData( '<p>Another Hello World<p>' );

I’m an IT student and to pass my 3rd year i have to make a project based on business application.
I want to create a website that will allow for hotel service, i.e. accepting reservations, handling orders and tasks. Therefore, I am wondering which technologies I should use. In the classes I dealt with the older version of node.js, but reading articles on the Internet I often see that Flask is mentioned as an easier and more pleasant way of creating websites. Any opinions on these technologies? Or maybe other suggestions?

I was using old version of node.js and i was reading some articles about flask and both have their own advantages etc

So I was making this sticky note adding project, where if you click on the “plus” icon a window will pop up where you can type your note content with your name.

For the first note it’s working good when I tap on preview another window pops-up and I can how my note actually looks before submitting or I can tap on “submit” in the first window to save it in an empty container.

So as I was saying it’s working well for the first note but from the second note the “preview” button isn’t working all the notes are getting saved inside preview but I want them inside that empty container just like the first Note.

HTML

<!DOCTYPE html> <html lang="en"> <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="sticky.css"> </head> <body>

<div class="welcome">
    <div class="text-1">
        <h1 class="h1">Welcome to stickey Notez just stick something memorable </h1>
    </div> </div>


<div class="plus">
    <div class="icon-plus">
        <div id="plus" class="fa-solid">+</div> 
    </div> </div>

<div id="newModel" class="model">    <h2>Note Form</h2>    <div class="close" id="closeButton">X</div>    <div id="notePreview" class="notez">
    <!-- <label class="content" for="inputTitle">Name:</label> -->
    <input class="content" placeholder="Name:" id="inputTitle" name="title">
    <!-- <label class="content" for="inputContent">Content:</label> -->
    <textarea class="content" placeholder="Content:" id="inputContent" name="content"></textarea>
    <div class="color-opts">

        <label class="color-option" style="background-color: rgb(131, 26, 26);">

        </label>
        <div class="color-option" style="background-color: rgb(118, 212, 117);">

        </div>
        <div class="color-option" style="background-color: rgb(250, 159, 220);">

        </div>
        <div class="color-option" style="background-color: rgb(102, 200, 215);">

        </div>
    </div>

   </div>    <div class="sutton">    <button  type="button" id="submitNote">Submit</button>    <button type="menu" id="noteMenu">Preview?</button>    </div>



</div>

<div id="preview" class="preview1">
    <div class="rutton">
    <button  type="button" id="submitNote1">Submit</button>    <button type="menu" id="noteeMenu">Back?</button> </div> </div>




<div id="savedNotesContainer">

</div>



<script src="sticky.js"></script> <script src="https://kit.fontawesome.com/29e2b58a51.js" crossorigin="anonymous"></script> </body> </html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');



body{
    padding: 0 40px;
    display: grid;
    /* align-items: center;
    flex-direction: column; */
    background: #0c0e16;
}

.h1{
    font-family: 'Lobster',cursive;
    display: flex;
    justify-content: center;
    font-size: 60px;
    color: #cc00ff;
    text-shadow: 2px 2px #601e6298;


}


.fa-solid{
    
  
    color: #ffffff;
    font-size: 70px;
    position: fixed;
    right: 50px;
    bottom: 70px;
    padding: 10px 14px;
    border-radius: 50%;
    transition:  background 0.5s ease;
    cursor: pointer;;
}
.fa-solid:hover{
    background: #cc00ff2c;
    
}
.icon-plus{
    display: flex;
    position: absolute;
    /* padding: 30px; */
    flex-direction: column;
    justify-content: center;
    right: 70px;
    top: 500px;
    
}

h2{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 35px;
    color: white;
    margin: 0 0 20px 0;
}

.model{
    height: 400px;
    width: 50%;
    align-items: center;
    display: none;
    padding: 30px;
    justify-self: center;
    flex-direction: column;
    justify-content: space-evenly;
    background-color: rgba(67, 31, 44, 0.418);
    position: relative;
    border-radius: 20px;
    position: absolute;
    bottom: 100px;
}



.close{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    font-weight: bolder;
    padding: 10px;
    color: white;;

}
.close:hover{
    color: red;
}

label{
    display: block;
}

.color-opts{
    display: flex;
    margin: 10px;
}

.notez{
    background-color: #0c0e16;
    justify-content: center;
    align-self: center;
    flex-direction: column;
    padding: 30px;
    display: flex;
    width: 40%;
    border-radius: 20px;
}
.content{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: large;
    color: rgb(105, 93, 218);
    padding: 5px;
}
input, textarea{
    background-color: transparent;
    border: none;
    width: 70%;
    border-bottom: 1px dashed  green;
    margin: 10px; 
    /* resize: none;  */
    height: auto;
    
}

#inputTitle{
    font-weight: bolder;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 30px;
    color: white;
}

#inputContent{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: white;
}

input,textarea:focus{
    outline: none;
}


textarea::-webkit-scrollbar {
    width: 10px;
  
}

textarea::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    
}

textarea::-webkit-scrollbar-thumb {
  background-color: rgba(53, 48, 48, 0.377);
  cursor: pointer;
}

button{
    padding: 10px 10px;
    border: 3px solid rgb(255, 0, 0);
    background-color: #0c0e16;
    color: white;
    font-size: medium;
    cursor: pointer;
}

.color-option {
   height: 45px;
   width: 50px;
   margin: 0 10px;
   border-radius: 10px;
   border: 2px solid black;
}

.sutton{
    width: 100%;
    display: flex;
    justify-content: space-between;
}


.preview1{
    height: 500px;
    width: 600px;
    display: none;
    background-color: rgba(255, 255, 255, 0);
    position: absolute;
    bottom: 50px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    justify-self: center;
    padding: 0 20px;

}

.note{
    width: 340px;
    height: 370px;
    display: flex;
    border-radius: 20px;
    color: white;
    font-size: 29px;
    flex-direction: column;
    padding: 10px;
    margin: 20px;
    align-items: center;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
/* .note h3{
    
} */

.rutton{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {

const  newModel = document.getElementById("newModel");
const  plus = document.getElementById("plus")
const closeBtn = document.getElementById("closeButton")
const notePreview = document.getElementById("notePreview")

plus.addEventListener('click', () => {
    if(newModel.style.display === "none"){
        newModel.style.display = "flex"
    }
    else if(newModel.style.display = "flex"){
        newModel.style.display = "none"
    }
})

closeBtn.addEventListener('click',() =>{
    newModel.style.display = "none"
} 
)

const colorBtn = document.querySelectorAll(".color-option")


if (colorBtn.length > 0) {
    notePreview.style.backgroundColor = getComputedStyle(colorBtn[0]).backgroundColor;
}

colorBtn.forEach(child => {
    child.addEventListener('click', () => {
        notePreview.style.backgroundColor = getComputedStyle(child).backgroundColor;
    })
})


const noteMenu = document.getElementById("noteMenu");
const preview = document.getElementById("preview");
let newNote = null;


noteMenu.addEventListener('click', () => {
    const title = document.getElementById("inputTitle");
    const content = document.getElementById("inputContent");
    const noteColor = getComputedStyle(notePreview).backgroundColor;
    
    // const newNote = document.createElement('div');
        // newNote.classList.add('note');
        newNote = document.createElement('div');
        newNote.className = 'note';
        newNote.style.backgroundColor = noteColor;
        newNote.innerHTML = `
            <h3>${title.value}</h3>
            <p>${content.value}</p>
        `;

        preview.appendChild(newNote);
     
    
        // if (noteMenu === 'click') {
            // Toggling the preview visibility
            if (preview.style.display === "flex") {
                preview.style.display = "none";
            } else {
                preview.style.display = "flex";
            }
        

        inputTitle.value = "";
        inputContent.value = "";
        newModel.style.display = "none";
})



const noteemenu = document.getElementById("noteeMenu");
const submiteNote = document.getElementById("submitNote");
const savedNotesContainer = document.getElementById("savedNotesContainer");
const submiteNote1 = document.getElementById("submitNote1");











    noteemenu.addEventListener('click', () => {
    


        preview.style.display = "none";
        
        newModel.style.display = "flex"
        
        // newNote.remove();
    
    
    
    })
    



  
    // const note = document.getElementsByClassName("note");
   submiteNote.addEventListener('click', () => {
    


    if (newNote) {
        const savedNote = newNote.cloneNode(true); // Clone the previewed note
        savedNotesContainer.appendChild(savedNote);
        newNote = null;
        preview.innerHTML = ''; // Clear the preview after submission
        preview.style.display = "none"; // Hide the preview
    } else {
        console.log("No note to submit.");
    }
});

submiteNote1.addEventListener('click', ()=>{
    if (newNote) {
        const savedNote = newNote.cloneNode(true); // Clone the previewed note
        savedNotesContainer.appendChild(savedNote);
        newNote = null;
        preview.innerHTML = ''; // Clear the preview after submission
        preview.style.display = "none"; // Hide the preview
    } else {
        console.log("No note to submit.");
    }
})











})

Gas Fees is being deducted but not swap is performed (Uniswap v3 router), wrote this code for swap exchange between usdc and dai in node js, the swap function is working but there is no exchange being taken place, althought the gas fees is being deducted

const ethers = require('ethers');
require('dotenv').config();
const express = require('express');
const ABI = require('./abi.json');
const ERC = require('./ERC20abi.json');
const PRIVATE_KEY = process.env.PRIVATE_KEY;

const provider = new ethers.JsonRpcProvider('https://base-mainnet.g.alchemy.com/v2/alcht_ECRFwRe1pH5sKP1FSBGo3SpLFVTXNS');
const wallet = new ethers.Wallet(PRIVATE_KEY, provider);

const routerAddress = "0xE592427A0AEce92De3Edee1F18E0157C05861564";

const routerABI = ABI;

const routerContract = new ethers.Contract(routerAddress, routerABI, wallet);

async function swapTokens(inputToken, outputToken, amountIn, slippage, recipient) {
    const amountInWei = ethers.parseUnits(amountIn, 6); // assuming USDC has 6 decimals
    const slippageTolerance = ethers.parseUnits(slippage, 2);

    const tokenContract = new ethers.Contract(inputToken, ERC, wallet);
    const approveTx = await tokenContract.approve(routerAddress, amountInWei);
    await approveTx.wait();

    const swapParams = {
        tokenIn: inputToken,
        tokenOut: outputToken,
        fee: 3000, 
        recipient: recipient,
        deadline: Math.floor(Date.now() / 1000) + 60 * 10, // 10 minutes from now
        amountIn: amountInWei,
        amountOutMinimum: 0,
        sqrtPriceLimitX96: 0
    };

    const tx = await routerContract.exactInputSingle(swapParams);
    console.log(`Transaction hash: ${tx.hash}`);
    await tx.wait();
    console.log('Swap complete');
}

async function checkBalance(address,) {
  try {
      // Get the wallet's public address
      const address = wallet.address;

      // Get the balance of the wallet in wei (smallest denomination)
      const balanceWei = await provider.getBalance(address);

      // Convert the balance to Ether (Base chain uses ETH-like denominations)
      const balanceEth = ethers.utils.formatEther(balanceWei);

      console.log(`Balance of ${address}: ${balanceEth} ETH`);
  } catch (error) {
      console.error('Error checking balance:', error);
  }
}

const app = express();
app.use(express.json());
app.post('/swap', async (req, res) => {
    const { inputToken, outputToken, amountIn, slippage, recipient } = req.body;
    try {
        await swapTokens(inputToken, outputToken, amountIn, slippage, recipient);
        res.status(200).send('Swap successful');
    } catch (error) {
        console.error(error);
        res.status(500).send('Swap failed');
    }
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

the swap function is working but there is no exchange being taken place, althought the gas fees is being deducted

Triggered Input to perform Modal

<input class="btn btn-outline-dark w-100" data-bs-toggle="modal" data-bs-target="#updateEkskulModal" data-bs-cdcod="cdcod" data-bs-cdpts="cdpts" data-bs-cduid="cduid" data-bs-cdref="cdref" data-bs-cdsmt="cdsmt" type="button" value="cdpts"`>

Modal

<div class="modal-body">
<input class="form-control" maxlength="1" id="ekskulpts" name="ekskulpts" required style="text-transform:uppercase">
</div>

JS

<script>
    const cdptsModal = document.getElementById('updateEkskulModal')
    if (cdptsModal) {
      cdptsModal.addEventListener('show.bs.modal', event => {
        const button = event.relatedTarget
        const cdcod = button.getAttribute('data-bs-cdcod')
        const cduid = button.getAttribute('data-bs-cduid')
        const cdsub = button.getAttribute('data-bs-cdsub')
        const cdpts = button.getAttribute('data-bs-cdpts')
        const cdsmt = button.getAttribute('data-bs-cdsmt')
        $("#ekskulcod").val(cdcod);
        $("#ekskuluid").val(cduid);
        $("#ekskulsub").val(cdsub);
        $("#ekskulpts").val(cdpts);
        $("#ekskulsmt").val(cdsmt);
      })
    }
</script>

Bootstrap 5 input-form accept only value “A, B, C or 0” since JQuery is no longer used in BS 5 (Modal)

I have a React app where I am using Apollo client to handle GraphQL queries and caching.

I have two GraphQL queries, one that fetches a whole menu and another that fetches top level menu sections.

I fetch the whole menu when I first load the app in an attempt to cache the menu data. I then call the query that fetches the menu top level sections which I would expect to fetch from the cache but for some reason the data is not available from the cache and must fetch from the network.

The first query that fetches the whole menu looks like this

query GetMenu(
  $menuId: ID
  $restaurantId: ID!
  $filter: MenuSectionFilterInput
) {
  getMenu(menuId: $menuId, restaurantId: $restaurantId) {
    id
    sections(filter: $filter) {
      ...Section
      sections {
        ...Section
      }
    }
  }
}

fragment Section on MenuSection {
  id
  items(restaurantId: $restaurantId) {
    ...Item
  }
}

The second query that fetches all the top level sections looks like this

query GetMenuSections($restaurantId: ID!, $getMenuFilter: MenuFilterInput) {
  getMenu(restaurantId: $restaurantId, filter: $getMenuFilter) {
    id
    sections {
      name
      id
    }
  }
}

Since the second query is run at a later stage than the first one, should the sections already be in the cache?

I am trying to run the following query with fetchPolicy: 'cache-only', which fails because the data isn’t in the cache. It passes if I allow it to fetch from network.

useQuery(GET_MENU_SECTIONS,
  {
    fetchPolicy: 'cache-only',
    variables: {
      restaurantId,
      getMenuFilter
    }
  }
);

Do the query args make a difference to how things get cached? Do both GetMenu and GetMenuSections need to have the same args in order for it to cache?

I don’t have any typePolicies set up in my Apollo Client that would override default caching policies. I did try to add a custom policy for getMenu but it didn’t work and shouldn’t even be necessary since both queries are querying for id fields which is what should get used for caching.

How do I make the GetMenuSections query use the already cached data?

I am getting a TypeError of Type 'AccessorKeyColumnDef<Reservation, number>' is not assignable to type 'ColumnDef<Reservation>' while trying to create a column in @tanstack/react-table.

Here is my code:

type Reservation ={
 id: number
 shift: string
 quantity: number
}

const columnHelper = createColumnHelper<Reservation>()

// This is the area where the error comes up, when defining columns
const columns = useMemo<ColumnDef<Reservation>[]>(
        () => [
            columnHelper.accessor('id', {
                header: () => 'S/N',
                cell: info => info.getValue(),
            }),
            columnHelper.accessor('shift', {
                header: 'Shift',
            }),

            columnHelper.accessor('quantity', {
                header: () => 'Quantity',
                cell: info => info.renderValue(),
            }),
        ],
        [],
    )

This what my data looks like

export const data = [
    {
        id: 1,
        shift: 'BREAKFAST',
        quantity: 1,
    }
    ...
]

This is the full error

Type 'AccessorKeyColumnDef<Reservation, number>' is not assignable to type 'ColumnDef<Reservation>'.
 Type 'AccessorKeyColumnDefBase<Reservation, number> & Partial<StringHeaderIdentifier>' is not assignable to type 'ColumnDef<Reservation>'.
   Type 'AccessorKeyColumnDefBase<Reservation, number> & Partial<StringHeaderIdentifier>' is not assignable to type 'AccessorKeyColumnDefBase<Reservation, unknown> & Partial<IdIdentifier<Reservation, unknown>>'.
      Type 'AccessorKeyColumnDefBase<Reservation, number> & Partial<StringHeaderIdentifier>' is not assignable to type 'AccessorKeyColumnDefBase<Reservation, unknown>'.
        Types of property 'footer' are incompatible.
          Type 'ColumnDefTemplate<HeaderContext<Reservation, number>> | undefined' is not assignable to type 'ColumnDefTemplate<HeaderContext<Reservation, unknown>> | undefined'.
            Type '(props: HeaderContext<Reservation, number>) => any' is not assignable to type 'ColumnDefTemplate<HeaderContext<Reservation, unknown>> | undefined'.

I’ve tried several types but none seems to work and I think this is happening because the cell value returned for each columnHelper.accessor has a varying type like number and string.

"@tanstack/react-table": "^8.20.1"
"typescript": "^5"

I recently came across the new features in MySQL 9.0 and found out about JavaScript Stored Programs in this link and in the MySQL docs.
I also read this part about the new feature here.

So, I decided to test it using NodeJS and Postman.

Let’s say I executed the below code in MySQL:

CREATE FUNCTION sum(arg1 INT, arg2 INT) 
RETURNS INT LANGUAGE JAVASCRIPT AS 
$$
  return arg1 + arg2;
$$;

I have the main NodeJS file (server.js) below:

const express = require('express');
const cors = require('cors');
const connection = require('./db/connection');
const try = require('./utilities/try');


//Creating an Express application
const app = express();

//Use CORS
app.use(cors());

//Routes
app.use('', try);

// Initializing server
app.listen(3000, "localhost", () => {
    console.log("Server is running on port 3000");
});

Below I have connection.js for connceting the server to the DB.

"use strict"
require('dotenv').config();
const mysql = require('mysql2');

//MySQL connection
const connection = mysql.createConnection({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASS,
    database: process.env.DB_NAME
});

connection.connect(err => {
    if (err) throw err;
    console.log('Connected to the MySQL server.');
});

module.exports = connection;

And here, I’ve got my try.js for executing the MySQL statements:

const express = require('express');
const router = express.Router();
const connection = require('./db/connection');

router.post('/sum', (req, res) => {
    const {num1, num2} = req.body;
    if(!num1 || !num2){
        return res.status(400).json({ error: 'The numbers are required' });
    } else {
        const sql = "SELECT sum(?, ?)";
        const values = [num1, num2];
        connection.execute(sql, values, (err, results) => {
            if (err) {
                res.status(500).json({ error: 'Error while executing the function' });
            } else {
                res.status(200).json({ message: `The sum is ${results[0]['sum(?, ?)']}` });
            }
        });
    }
});

module.exports = router;

However, I’m not sure how to display the sum of the 2 values. Is this the correct way to do this? Or is it different? Any help would be appreciated. Note: I’m using the Community Edition, not the Enterprise Edition.

Any help would be appreciated. Thanks!

NOTE: I am not using the Enterprise Edition, I am using the Communtity Edition.

EDIT: The code leads to this response:

{
    "error": "Error while executing the function"
}

I’m working on a Scoreboard dashboard as part of a learning project. The JavaScript functions in my app work perfectly in Visual Studio Code. However, after deploying the project to GitHub Pages and Netlify, the buttons in my counter app don’t work at all. When I click them, I get a “function is not defined” error (404), which makes me think that the index.js file isn’t loading properly.

Here’s the live site: https://neon-lily-6553ae.netlify.app/
And here’s the GitHub repository: https://github.com/jaysonfeldman/scoreboard-final

I double-checked the script tags in my index.html file to ensure they are correctly pointing to the index.js file. I’ve also verified that the JavaScript code works in a local environment, so I expected the same behavior after deployment. However, the deployed version fails to load the script properly, leading to a 404 error when trying to call the functions. I suspect there might be an issue with how the files are referenced in the deployed environment, but I’m not sure

I’m new to programming and have been trying to fix this for about 2 hours, but I’m stuck. As This is the first time for me asking a question on Stackoverlow, any guidance or tips would be greatly appreciated!

Screenshot 1

Screenshot 2

How to get the value from selected text by select combobox?
Here is the aspx.cs code for bind combobox

service.BindHTMLDropdownList(cmb_labelno, "tbl_StockRunning", "StockTagNo", "StockId", "where IsActive = 1 and StockTypePrefix = 'T' and " +
    "BranchId = " + Session["BranchId"] + "");

Combobox Name : cmb_labelno
Table Name : tbl_StockRunning
Text : StockTagNo
Value : StockId

Here is the aspx code

<select id="cmb_labelno" runat="server"></select>
<input type="button" id="btnGetStock" value="VIEW"/>


$("#btnGetStock").click(function (e) {               
    alert(document.getElementById('cmb_labelno').value);
});

Now, the place of alert(document.getElementById(‘cmb_labelno’).value I used
alert(document.getElementById(‘cmb_labelno’).val also still value is not showing.

While the same thing if I am doing in Jquery still showing the selectedtext only not value
Here is my Jquery code,

document.getElementById('<%= cmb_labelno.ClientID %>').value

Is there any problem in code…???

I have two very similar functions but typescript can infer the return value of only one of them:

interface URItoKind<A> {}
type URIS = keyof URItoKind<any>;
type Kind<URI extends URIS, A> = URItoKind<A>[URI];

const URI = "Option";
export type URI = typeof URI;
interface URItoKind<A> {
  readonly [URI]: Option<A>;
}
class Option<A> {
  static of: <A>(a: A) => Option<A>;
}

function test1<F extends URIS, A, B>(f: (a: A) => Kind<F, B>): Option<B>;

function test2<F extends URIS>(): <A, B>(f: (a: A) => Kind<F, B>) => Option<B>;

const func = (x: number) => Option.of(x.toString()); // (x: number) => Option<string>
const r1 = test1(func); // Option<unknown> - Doesn't work
const r2 = test2()(func); // Option<string> - Works Fine

Playground Link

I was hoping somebody could explain to me what’s the issue. Is this expected or is it a bug? Is there some kind of workaround to make test1 work without specifying the types manually?

I want to get all classNames, I think as long as I match all the class node, I could get the classname,

so I tried below code:

const Parser = require("tree-sitter")
const JavaScript = require("tree-sitter-javascript")
const { Query } = Parser 


const parser = new Parser()
parser.setLanguage(JavaScript)

const query = new Query(
  JavaScript,
  `
    (class_declaration name: (identifier) @class-name)
  `
);


const tree = parser.parse(`
class Person {}
 
const TestPerson = class {}

class Person2 {}
 
const TestPerson2 = class {}
  `);
const matches = query.matches(tree.rootNode);

matches.forEach(item => {
  console.log(item.captures[0])
})

When I execute it:

$ node query-test.js 
{
  name: 'class-name',
  node: IdentifierNode {
    type: identifier,
    startPosition: {row: 2, column: 6},
    endPosition: {row: 2, column: 12},
    childCount: 0,
  }
}
{
  name: 'class-name',
  node: IdentifierNode {
    type: identifier,
    startPosition: {row: 8, column: 6},
    endPosition: {row: 8, column: 13},
    childCount: 0,
  }
}

there is no classname ['Person', 'Person2'],

please tell me how to get the class names.