Velo pauze data retieval from CMS

Ask the community
, ,
1

Ask on on WIX Velo

What are you trying to achieve:
When opning a page the CMS dat should not be retrieved, only after selecting in a dropdown element it should present the data.

What have you already tried:
Articles, Copilot/Chatgpt, Creation code
import wixData from ‘wix-data’;

$w.onReady(function () {
// Zorg ervoor dat de repeater leeg is bij het laden van de pagina
$w(“#listRepeater”).data = ;

// Voeg een eventhandler toe voor de selectie in het dropdown-element
$w("#selectPeregrine").onChange((event) => {
    const selectedTitle = $w("#selectPeregrine").value;

    if (selectedTitle) {
        // Haal gegevens op uit de collecties met de geselecteerde filter
        wixData.query("PeregrinesCamDetails")
            .eq("Title", selectedTitle)
            .find()
            .then((results) => {
                if (results.items.length > 0) {
                    // Toon de data in de repeater
                    $w("#listRepeater").data = results.items;
                } else {
                    // Geen data gevonden
                    $w("#listRepeater").data = [];
                }
            })
            .catch((error) => {
                console.error("Fout bij ophalen gegevens: ", error);
            });
    }
});

});

But I can’t get it working

Additional information:
dropdown element ‘selectPeregrine,’
fetch the data from the CMS DataCollection: ‘PeregrinesCamDetails’
Dataset: ‘PeregrinesCamSite.’
The filter field name is ‘Title,’
and the data should be displayed in the repeater named ‘listRepeater.’"

Just can’t get it working, when opening the page it keep pulling data from the CMS

Hope someone can give me some suggestions

Brgds Kees

2

Hi, @Kees_Klopping !!

So, you don’t want the data to be retrieved when the page loads, right? Is the repeater also connected to a dataset? When handling this kind of process, it’s best to either use only the dataset or only Velo code, rather than mixing both. If you are using a dataset, that might be the cause of the issue. :raised_hands:

3

That’s how datasets work. If you do not want it to pull any data at all on load, then you will have to custom code it all.

Although, if you aren’t worrying about it pulling the data, just don’t want to show it initially, here’s what you can do:

Simply keep the repeater invisible by default by checking the Collapsed field in the repeater’s properties panel and use this code (make sure to remove any previous coding and also ensure there are no red lines in the code):

$w.onReady(function () {

    $w('#selectPeregrine').onChange((event) => {
        $w('#listRepeater').expand();
    });

});

This will fire just when the user selects an item from the dropdown and display the repeater that we have hidden by default. (Alternatively, you can also use hide and show).

1 Like
4

Thanks Pratham, but this does not seem to work,

5

Well that sounds fair, the current reapter does not seem to be willing disconnect from the dataset.

btw this is the page talking about

This is the testing page where I’m trying to get it working

6

As Pratham mentioned, that seems to be the default behavior of datasets. To avoid confusion, as I mentioned before, it’s best to decide whether you want to use a dataset or Velo code exclusively. :thinking:

That being said, I believe the simple code Pratham suggested should be able to achieve what you want. In his code, the repeater is set to appear when the dropdown selection changes. If this isn’t working in your environment, the most likely reason is that the repeater is not set to be collapsed by default in the editor.

To fix this, select the repeater, open the Properties panel, and set it to be collapsed by default. Additionally, if your code already includes $w("#listRepeater").expand();, that might be causing the issue as well, so be sure to check for that. :smiling_face_with_sunglasses:

1 Like
7

Still trying,

now I got this when running in DEV mode:
TypeError: $w(…).onChange is not a function

Brgds Kees

8

found it, was missing the #

changed it to:
$w.onReady(function () {
$w(“#selectPeregrine”).onChange((event) => {
$w(“#listRepeater”).expand();
});
});

Now it is working,

Thansk so much you both!

Brgds Kees

1 Like
9

Aw Snap! One little hash can cause all the difference!

I had initially written generic code that would work for all dropdowns on your page, like so:

 $w('Dropdown').onChange((event) => {
        $w('#listRepeater').show();
    });

And then replaced it with your dropdown ID, totally forgetting to add the hash.
Thanks for pointing it out, I have edited my original reply as well to help anyone looking for a solution in the future!