Confused about showing lightbox as an alert about empty content in a dataset after search/filter on a dropdown

Ask the community
,
1

I have this homepage layout that contains a dropdown and a dataset repeater that the dropdown has been successfully connected to the dataset repeater as a search/filter dropdown without using any code.

1855×1346 295 KB

But I should show up a lightbox alert when a user choose a dropdown value and that the dropdown value is not exist in the dataset . The lightbox will inform the user that the data is not available yet.

Would you please help me what should I do to do that? Unfortunately, I’m new to the Javascript world and Velo world. But I’ll do my best to understand. This is the last try that I did but still not working.

import wixWindow from 'wix-window'; 
import wixData from 'wix-data';

$w.onReady(function () {
 // Write your JavaScript here
 
 // To select an element by ID use: $w("#elementID")

 // Click "Preview" to run your code
    dropdown1();
});

export function dropdown1_onChange(event) {
 if ($w('#dropdown1').value) {
        $w('#dataset1').onReady( () => {
            let item = $w('#dataset1').getCurrentItem();
            console.log("dataset");
            if (item) {
                console.log("lightbox close");
                wixWindow.lightbox.close();
            } else {
                console.log("lightbox open");
                wixWindow.openLightbox("Kosong");
            }
        });
    }
}

Thank you for your kindness😊

2

Can you please copy and paste the code here? Maybe we/other can edit easier…

use the code block!

3

I’m sorry for that. I’ve been updated my question with code block. Would you mind to check it?

4

I’ve been solved my case with if condition. May this will help others that struggle with this too.

import wixLocation from 'wix-location'; 
import wixData from 'wix-data';
import wixWindow from 'wix-window';

$w.onReady(function () {
 // Write your JavaScript here
 
 // To select an element by ID use: $w("#elementID")

 // Click "Preview" to run your code
    $w('#dropdown1').onChange(() => {
        if ($w('#dropdown1').value === 'Value1' | $w('#dropdown1').value === 'Value2') {
            wixWindow.openLightbox("LightBoxName");
            $w('#newsRepeater').collapse();
            console.log("open lightbox");
        } else {
            $w('#newsRepeater').expand();
            console.log("close lightbox");
        }
    })
});

I use console.log to check if the condition is correct.