Pre selected option dropdown Coding with Velo

[ritus2762]

NEED HELP I WANT PRE SELECTED ONE OPTION

[tony-brunsman]

@ritus2762 Set it to the value that you have in mind in the onReady function. All the dropdowns we be initialized at that point.

$w.onReady(function () {
    $w('#dropdown1').value = oneOfTheDropdownValues;
});

[ritus2762]

thanku so much plz gave me your whatsapp number

[Julian_Brink]

Hi! I tried to you this function. But the connected repeater of the dropdown dont get updated… Anyone has a idea?

[CODE-NINJA]

No?

Because anyone can see your code, or what and how you have done it.

[Julian_Brink]

Here you can see the code. The dropdown filters the repeater below. But actually on the live website, the value get selected at the dropdown, but the repeater don’t get updated.

Link: 2. Mannschaft | My Site (wixstudio.io)

[CODE-NINJA]

Tja mein Freund, wenn du meinst dass der CODE zaubern kann, dann hast du leider Pech.

Alles was du bis jetzt an code geschrieben hast, ist das setzen des VALUES in dein → SAISON-Dropdown.

Mehr passiert da aber auch nicht mehr. Oder meinst du, nur weil du ein DATASET angeschlossen hast dass es damit getan sei???

Das sind immer die selben Fehler die gemacht werden. Dein DATASET-SETUP arbeitet unabhängig von deinem Code. Du fährst gerade ZWEIGLEISIG und sobald einer anfängt ZWEIGLEISIG zu fahren bekommt man PROBLEME.

1. Du hast keinen CODE der deinen REPEATER und dessen FILTER-FUNCTION steuert.
2. Du musst auch darauf achten ob dein Dropdown → INNERHALB ← oder → AU?ERHALB <— deines REPEATERS befindet.

Ich nehme an du hast deinen REPEATER bequem mit deinem DATASET verbunden und erwartest nun CODING-WUNDER?

Meine Empfehlung:
Du kannst zwar die Verbindung deines DATASETs zu deiner DATABSE lassen, schreibst aber alle Funktionen manuell → by code <— und nutzt nicht das PROPERTY-PANEL, das was du momentan nutzt.

Wenn du dennoch deinen bereits angepeilten Weg gehen möchtest, dann solltest du mit FILTTERN arbeiten…

Sowas wie…

$w('#dataset1').setFilter(wixData.filter().eq('_id', id)).then(() => {.....});

Das heißt, du wälst deine Saison aus aus deinem Dropdown.
Du initialisierts das VALUE und deklarierst es in einer Variablen.
let saison = $w('#saisonDropdown').value;

Natürlich sollte das ganze durch die Auswahl-action des Dropdown passieren, nämlich dann, wenn du den Wert deines Dropdowns änderst.

$w('#saisonDropdown').onChange(()=>{
    let saison = $w('#saisonDropdown').value;
});

Natürlich sollte sich dein gesamter CODE in dem $w.onReady() bereich befinden.

$w.onReady(()=>{
    $w('#saisonDropdown').onChange(()=>{
        let saison = $w('#saisonDropdown').value; console.log('Gewählte-Saiso: ', saison);
    });
});

Und was war da nochmal mit …
$w(‘#dataset1’).setFilter(wixData.filter().eq(‘_id’, id)).then(() => {…});
… wo kommt dass denn nun hin ?

Du möchtest doch deinen Filter irgendwie starten um nach etwas zu filtern richtig?

Ich würde aber sagen, erst mal das hier alles lesen…

Introduction - Velo API Reference - Wix.com

[Julian_Brink]

Astreine Antwort. Sehr Sympathisch.

[CODE-NINJA]

Hier gehts nicht um Symphatie , hier geht’s um Wissen, welches ich dir gerade versuche zu vermitteln (UMSONST!!!)

Anbei kannst du dir gerene auch den folgenden post mal ansehen, um noch viel mehr über dein eigenes Problem zu erfahren und welches deine Lösung sein könnte (zumindest teilweise) …

Das könnte dir weiterhelfen…

Help on connecting repeater to a filtered dropdown via dataset

@russian-dima Hello! Really appreciate your help! Again, i’ve looked through the code and tried to figure it out through the link you gave me but i’m such a novice, i’m struggling I’ve pasted below where i’m currently at with the code. Please help if you can. After your instruction of " //-----loading of DropDown-Unique-Titles for all given DropDowns…" I have no idea if I have inputted the data correctly from there on down. And then this bit >> function FILTER_ENGINE() { if (…

[Julian_Brink]

Hab mich nun etwas reingearbeitet. Leider funktioniert das direkte Filtern immer noch nicht…

Hier mein aktueller Code:

import wixData from 'wix-data';

$w.onReady(function () {
    wixData.query('Spielubersicht1Mannschaft') // replace 'CollectionName' with the name of your collection
    .find()
    .then((results) => {
        let items = results.items;
        let options = items.map(item => {
            return {label: item.saison, value: item.fieldName}; // replace 'fieldName' with the name of the field in your collection
        });
        $w("#dropdownSaison").options = options;
    })
    .catch((err) => {
        console.log(err);
    });
    $w("#dropdownSaison").value = "2023/2024";
    $w("#dropdownSaison").onChange((event) => {
        let selectedValue = $w("#dropdownSaison").value;
        let filter = wixData.filter().eq("saison", selectedValue);
        $w("#spieluebersicht2").setFilter(filter);
    });
});

Dropdown zieht die möglichen values aus dem Datensatz
Value wird im Dropdown angezeigt
Repeater wird gefiltert

Hier meine ID’s:

Dropdown Saison: #dropdownSaison
Datensatz: #spieluebersicht2

[Julian_Brink]

Hab die Lösung gerade selber gefunden.

Hier der Code für Leute die ihn eventuell gebrauchen können:

import wixData from 'wix-data';

$w.onReady(function () {
    wixData.query('#yourCollectionName#') //
    .find()
    .then((results) => {
        let items = results.items;
        let options = items.map(item => {
            return {label: item.#yourFieldId#, value: item.fieldName}; // replace 'fieldName' with the name of the field in your collection
        });
        $w("#yourDropdown#").options = options;
        $w("#yourDropdown#").value = "#yourWishedValue#";
        applyFilter();
    })
    .catch((err) => {
        console.log(err);
    });

    $w("#yourDropdown#").onChange((event) => {
        applyFilter();
    });
});

function applyFilter() {
    let selectedValue = $w("#yourDropdown#").value;
    let filter = wixData.filter().eq("#yourFieldId#", selectedValue);
    $w("#yourDataset#").setFilter(filter);
}

[CODE-NINJA]

Sieht ja schon mal nach etwas aus, aber leider hast du die wichtigeste Frage immer noch nicht beatwortet.

Liegt dein DROPDOWN —> ISNIDE OF REPEATER <— oder —> OUTSIDE OF REPEATER ?

Ich gehe mal start von aus, dass dein Dropdown außerhalb des REPEATERS is.

Ok, was sind also deine STEPS ???

1. Step-1 → wir beachten dass wir unseren gesamten CODE im $w.onReady-Bereich schreiben → CHECKED !

2. Um unser DropDown DANYMISCH mit Werten zu befüllen, müssten wir die Werte erst mal aus unserer DATABASE laden (dies kann auch statisch gemacht werden, indem man das Dropdown mit statischen Werten prepariert). Wir laden also die Dropdown-Optionen.
   Unser Dropdown sollte zu diesem ZEitpunkt mit OPTIONEN befüllt sein (Auswahl-Optionen). —> CHECKED !

3. Was passiert nun als nächster Schritt? → Die Auswahl aus dem Dropdown ???
   Das heißt du klickst auf das Dropdown und wählst ein → VALUE <—. Das wiedderum heißt wir initieren einen TRIGGER (Event-Trigger), wir läsen also ein Ereignis aus.
   $w("#dropdownSaison").onChange((event) => { ... });
   —> CHECKED !

4. Auch das selektierte → VALUE <— hast du ja bereits in eine Variable gepackt! → CHECKED !

5. Was passiert denn hier ? ----> $w(“#spieluebersicht2”).setFilter(filter);
   Was ist den → spieluebersicht2 <— ist das ein APFEL, eine BANANE, ein Flugzeug?
   Nein das wird wohl eher ein → DATASET <— sein, dass weis man aber auch nur weil man schon erfahren ist. Was ich dir hier an dieser Stelle sagen möchte, deklariere jedes deiner benutzten ELEMENTE auf deiner → PAGE <— mit sinnvollen NAMEN / BEZEICHNUNGEN und noch viel besser mit -->PREFIXEN<—.

Ist es ein REPEATER → repMeineRepeaterIDhier
Ist ein DROPDOWN —> ddnMeineDropdownIDhier
Ist es ein DATASET -----> dstMeineDatasetIDhier

Und so weiter. Somit strukturierst du deinen CODE noch viel besser und kannst diesen später bei komplexeren Projekten auch schneller und besser lesen und gibst außerdem EXTERNEN-CODERN die Möglichkeit keinen CODE ebenfalls so zu lesen, als ob Sie ihn selbst geschrieben hätten, da jedes ELEMENT innerhald des CODES auf den ersten Blick erkennbar ist, ohne den CUSTOMER nachfragen zu müssen, was denn da für ein Element für welche ID verwendet wurde, wenn du verstehst was ich meine.

So das war ein kleiner Ausflug in die Welt der richtigen DEKLARATIONEN.

Nachdem wir nun also wissen dass —> $w(“#spieluebersicht2”).setFilter(filter); ein dataset ist, was dementsprechend —> $w(“#dstspieluebersicht2”).setFilter(filter); sein sollte (immer noch nicht perfekt aber schon mal ok. —> CHECKED !

Nun bis hierher sieht doch alles schon mal gar nicht mal so übel aus.
DOCH WARTE MAL !!!

Wir haben hier doch ein DATASET vorliegen nicht wahr? ? ?
Wo war denn dann das —> $w(‘#dstspieluebersicht2’).onReady() <------

Haben wir vergessen erst darauch zu warten bis das DATASET → READY ist ? ? ?

Ja das sieht gut aus. Mit dem APPLY-FILTER is eine gute Lösung.

import wixData from 'wix-data';

$w.onReady(function () {
    wixData.query('#yourCollectionName#') //
    .find()
    .then((results) => {
        let items = results.items;
        let options = items.map(item => {
            return {label: item.#yourFieldId#, value: item.fieldName}; // replace 'fieldName' with the name of the field in your collection
        });
        $w("#yourDropdown#").options = options;
        $w("#yourDropdown#").value = "#yourWishedValue#";
        applyFilter();
    })
    .catch((err) => {
        console.log(err);
    });

    $w("#yourDropdown#").onChange((event) => {
        applyFilter();
    });
});

function applyFilter() {
    let selectedValue = $w("#yourDropdown#").value;
    let filter = wixData.filter().eq("#yourFieldId#", selectedValue);
    $w("#yourDataset#").setFilter(filter);
}

Dennoch fehlt noch das mit dem DATASET.onReady() !
Man merke → immer wenn du mit einem DATASET arbeitest → ghört ein DATASET.onReady() in deinen CODE!

Naja, scheinst ja schnell lernfähig zu sein!