CODEWITHSUNDEEP
javascriptbuttonloadsveltesveltekit
Hefeust CORTES
Hefeust CORTES

Reputation: 129

Unable to refresh page when clicking a button

I'm trying to build some SvelteKit page with a button to get an ID generated randomly from the server side. As load system works for a page loading, I tried :

EDIT: I have corrected my code according to HB's comment.

// src/routes/test/+page.js
const generateID = () => {
    let key = '00:12:34:56:63'
    
    /* randomize an array of length N with with 64-digits */
    /* and join it with ':' to build a string */
    
    return key
}

// EDIT: track affeced/attributed keys    
const lookups = new Map ()

// EDIT: added 'depends' parameter
export const load = async ({ params, depends }) => {
    let uid
    
    do {
        uid = generateID ()
    } while (lookups.has (uid))
    
    lookups.set (uid, 1)
    
    // EDIT: ddepends usage
    depends ('app:randomkey')

    return {
        props: {
            uid
        }
    }
}

and the client side looks like:

<!-- src/routes/+page.svelte -->
<script lang="ts">
    // -- import { goto } from '$app/navigation'
    import { invalidate } from '$app/navigation'
    import { page } from '$app/stores'
     
    export let data
    
    const handler = () => {
       // EDIT: do not use 'goto' anymore
       // goto ($page.url.pathname)
       // EDIT: use 'depends key' instead
       invalidate ('app:randomkey')
    }
</script>
<p> Click button to refresh UID from server </p>
<p>     
    <button on:click={ handler }> refresh UID </button>
    { data.props.key } 
</p>

At page reload 'F5 on keyboard) ut refresh the UID "key" value, but NOT when cluicking the button

So what's wring ? and I could fix it, while persisiting application layout and internal state ?

EDIT: et voilà !

Enjoy coding !

Upvotes: 0

Views: 2257

Answers (1)

brunnerh
brunnerh

Reputation: 185300

The URL is the same, hence nothing changes. You should use invalidate instead.

Upvotes: 2

Related Questions