Dropdown + Filter & Collapse + Expand

Ask the community
,
1

I am working on this webpage in development .

The goal of this page is to filter a dataset containing prior fraternity officers based on years. Since our fraternity goes back to 1818, some officers don’t have headshots, and I want to collapse image containers when there is no image in the linked dataset.
The Issue is that when someone changes the dropdown image, I cannot get the code to run after the dropdown changes, which causes datasets to re-filter based on the information in the dropdown.
Other Info … There are three datasets. One dataset returns a large image of the president (grand master) for the year, a second return a large picture of his pin, and the third returns the officer line below (smaller images.)
For testing , use only the years:
-1818 which has “Grand Master” and should show without an image so the image container should be collapsed
-2022-2023 has a “Grand Master,” a “Grand Master’s Pin,” and a full officer line, so all information returned should return an officer image
My Assumption is that I lack an understanding of asynchronous code and that I am calling either an incorrect event handler or I have a general misunderstanding of how to code after the filter finishes running. I have added a button next to the dropdown box that “proves” that the collapse / expand code works … it just isn’t running at the right time.

Here is the code I have, including my test button code:

$w.onReady(function () {
    // This sets the default value of the drop down box
 $w("#dropdown1").value = "1818"
});

export function dropdown1_change(event) {
    //the goal here was to, after the dropdown changed and the filters updated to the three datasets,
    //to re-expand the images that may have been collapsed prior then re-run the analysis of 
    //if images are included in the piece of data. 
    
    $w("#image6").expand();
    $w("#image7").expand();
    $w("#image5").expand();
    $w("#dataset2").onReady(() => {
        const item = $w("#dataset2").getCurrentItem();
        if (!item.photo) {
            $w("#image6").collapse();
        }
    });
    
    $w("#dataset3").onReady(() => {
        const item = $w("#dataset3").getCurrentItem();
        if (!item.photo) {
            $w("#image7").collapse();
        }
    });

    $w("#dataset1").onReady(() => {
        const item = $w("#dataset1").getCurrentItem();
        if (!item.photo) {
            $w("#image5").collapse();
        }
    });
}

export function dataset2_ready() {
    //tried to call this after one of the three datasets returned "ready" - Doesn't Work
    $w("#image6").expand();
    $w("#dataset2").onReady(() => {
        const item = $w("#dataset2").getCurrentItem();
        if (!item.photo) {
            $w("#image6").collapse();
        }
    });
    }

export function dataset1_ready() {
    //tried to call this after one of the three datasets returned "ready" - Doesn't Work

    $w("#image5").expand();
    $w("#dataset1").onReady(() => {
        const item = $w("#dataset1").getCurrentItem();
        if (!item.photo) {
            $w("#image5").collapse();
        }
    });
}

export function dataset3_ready() {
    //tried to call this after one of the three datasets returned "ready" - Doesn't Work
    $w("#image7").expand();
    $w("#dataset3").onReady(() => {
        const item = $w("#dataset3").getCurrentItem();
        if (!item.photo) {
            $w("#image7").collapse();
        }
    });
    }

export function button20_click(event) {
    //So I did this to prove out the code does function. When you click Apply with "1818" selected then go to "2022-2023"
    //Then hit "Apply" again, the correct opjects either expand or collapse based on if the image is contained.
    
    $w("#image6").expand();
    $w("#image7").expand();
    $w("#image5").expand();
    $w("#dataset2").onReady(() => {
        const item = $w("#dataset2").getCurrentItem();
        if (!item.photo) {
            $w("#image6").collapse();
        }
    });
    
    $w("#dataset3").onReady(() => {
        const item = $w("#dataset3").getCurrentItem();
        if (!item.photo) {
            $w("#image7").collapse();
        }
    });

    $w("#dataset1").onReady(() => {
        const item = $w("#dataset1").getCurrentItem();
        if (!item.photo) {
            $w("#image5").collapse();
        }
    });

}

I have been scouring the forums to try to figure this out, but I can’t put together how to wait for the filter to finish before the code runs to collapse/expand the containers.

Thanks!

2

Following Up. I added a command to wait for the repeater to become ready, then async the if statement. This seems to work.

export function dropdown1_change(event) {
    $w('#repeater1').onItemReady(async() => {
    $w('#repeater1').forEachItem(($item, itemData, index) => {
    if (!itemData.photo) {
            $item('#image5').collapse();
        } else {
            $item('#image5').expand();
        }
    });
    });


    $w('#repeater2').onItemReady(async() => {
    $w('#repeater2').forEachItem(($item, itemData, index) => {
    if (!itemData.photo) {
            $item('#image6').collapse();
        } else {
            $item('#image6').expand();
        }
    });
    });
    
    $w('#repeater3').onItemReady(async() => {
    $w('#repeater3').forEachItem(($item, itemData, index) => {
    if (!itemData.photo) {
            $item('#image7').collapse();
        } else {
            $item('#image7').expand();
        }
    });
    });   
}