(SOLVED) problem with conditions order

Hello,
I have a dashboard page that has icons/links with a Column “Sidebar that contains buttons “TrainingButton” & Dropdown”
For New members, If item in my dataset is ticked →
Show/Expand Container Box to cover the dashboard & Disable some of the buttons.
However the page loads normally & After refreshing twice the container appers
Not sure what am I doing wrong “on Ready/onLoad” or the order of my code is wrong
I really Appreciate your help
Heres my code below


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

$w("#dataset4").onReady(() => {
    let item = $w("#dataset4").getCurrentItem();
    if (item.disableDashboard) {
        $w("#DisableDashboardBox").show();
        $w("#accountNavBar1").hide();
        $w("#AddSubjectButton").disable();
        $w("#UpdateInfoButton").disable();
    } else {
        $w("#DisableDashboardBox").hide();
        $w("#accountNavBar1").show();
        $w("#AddSubjectButton").enable();
        $w("#UpdateInfoButton").enable();
    }
    if (item.offersBell) {
        $w("#OffersBell").show();
    } else {
        $w("#OffersBell").hide();
    }
    if (item.validationBell) {
        $w("#ValidationBell").show();
    } else {
        $w("#ValidationBell").hide();
    }
    if (item.calendarBell) {
        $w("#CalendarBell").show();
    } else {
        $w("#CalendarBell").hide();
    }
    if (item.fileshareBell) {
        $w("#FileshareBell").show();
    } else {
        $w("#FileshareBell").hide();
    }
    if (item.libraryBell) {
        $w("#LibraryBell").show();
    } else {
        $w("#LibraryBell").hide();
    }
    if (item.communityBell) {
        $w("#CommunityBell").show();
    } else {
        $w("#CommunityBell").hide();
    }
        if (item.feedbackBell) {
        $w("#FeedbackBell").show();
    } else {
        $w("#FeedbackBell").hide();
    }
         if (item.extraTrainingBell) {
        $w("#ExtraTrainingBell").show();
    } else {
        $w("#ExtraTrainingBell").hide();
    }
         if (item.humanResourcesBell) {
        $w("#HumanResourcesBell").show();
    } else {
        $w("#HumanResourcesBell").hide();
    }
});

$w.onReady(function () {
    $w("#ChooseStudentDropdown").onChange((event) => {
        let title = $w('#ChooseStudentDropdown').value;
        $w("#toFilter").onReady(() => {
            console.log("The dataset is ready to be filtered.");

        $w("#toFilter").setFilter(wixData.filter()
        .eq("title", title)
        )
        .then(() => {
            console.log("To filter dataset is now filtered with the matching title.");
            let getItem = $w("#toFilter").getCurrentItem();
            let url = getItem.dropdownLinks;
            wixLocation.to(url);
        })
        .catch((err) => {
            console.log(err);
        });
        });
    });
});

Thanks Again

Try this one…

$w.onReady(function () {
    $w("#dataset4").onReady(() => {
        let item = $w("#dataset4").getCurrentItem();
        if (item.disableDashboard) {
            $w("#DisableDashboardBox").show(), $w("#accountNavBar1").hide();
            $w("#AddSubjectButton, #UpdateInfoButton").disable();
        } else {
            $w("#DisableDashboardBox").hide();
            $w("#accountNavBar1").show();
            $w("#AddSubjectButton, #UpdateInfoButton").enable();
        }
        if (item.offersBell) {$w("#OffersBell").show();}
        else{$w("#OffersBell").hide();}
        if (item.validationBell) {$w("#ValidationBell").show();} 
        else {$w("#ValidationBell").hide();}
        if (item.calendarBell) {$w("#CalendarBell").show();} 
        else {$w("#CalendarBell").hide();}
        if (item.fileshareBell) {$w("#FileshareBell").show();} 
        else {$w("#FileshareBell").hide();}
        if (item.libraryBell) {$w("#LibraryBell").show();} 
        else {$w("#LibraryBell").hide();}
        if (item.communityBell) {$w("#CommunityBell").show();} 
        else {$w("#CommunityBell").hide();}
        if (item.feedbackBell) {$w("#FeedbackBell").show();} 
        else {$w("#FeedbackBell").hide();}
        if (item.extraTrainingBell) {$w("#ExtraTrainingBell").show();} 
        else {$w("#ExtraTrainingBell").hide();}
        if (item.humanResourcesBell){$w("#HumanResourcesBell").show();} 
        else {$w("#HumanResourcesBell").hide();}    
    });

    $w("#toFilter").onReady(()=> {console.log("The dataset is ready to be filtered.");
        $w("#ChooseStudentDropdown").onChange((event) => {
            let title = $w('#ChooseStudentDropdown').value;
            $w("#toFilter").setFilter(wixData.filter()
            .eq("title", title))
            .then(() => {
                console.log("Ddataset is now filtered with the matching title.");
                let currentItem = $w("#toFilter").getCurrentItem();
                let url = currentItem.dropdownLinks;
                wixLocation.to(url);
            })
            .catch((err)=> {console.log(err);});
        });
    });
});
1 Like

Thank you so much it worked.
If I understood what was the problem for your code, is that you put them all under 1 onReady Function?
I have another code “Working properly” but looking at what you did there, I have a feeling I might need to apply the same or it doesn’t matter when they are separate onReady function?

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

$w.onReady(() => {
    $w("#dynamicDataset").onReady(() => {
        $w("#ScheduleEmbedhtml").scrolling = "no";
        let widget = $w('#dynamicDataset').getCurrentItem().jotformSchedule;
        $w("#ScheduleEmbedhtml").src = widget;
    });

    $w("#dynamicDataset").onReady(() => {
        $w("#CancelEmbedhtml").scrolling = "no";
        let widget = $w('#dynamicDataset').getCurrentItem().jotformCancel;
        $w("#CancelEmbedhtml").src = widget;
    });
});

$w.onReady(function () {
    $w("#ChooseStudentDropdown").onChange((event) => {
        let title = $w('#ChooseStudentDropdown').value;
        $w("#toFilter").onReady(() => {
            console.log("The dataset is ready to be filtered.");

        $w("#toFilter").setFilter(wixData.filter()
        .eq("title", title)
        )
        .then(() => {
            console.log("To filter dataset is now filtered with the matching title.");
            let getItem = $w("#toFilter").getCurrentItem();
            let url = getItem.dropdownLinks;
            wixLocation.to(url);
        })
        .catch((err) => {
            console.log(err);
        });
        });
    });
});

$w.onReady(function () {

    //DEFINE ACTIVE AND INACTIVE BUTTON COLORS 🤩
    const whiteColor = "#FFFFFF";
    const yellowColor = "#FFDE59";
    const greenColor = "#38AB06";
    const magentaColor = "#CB6CE6";

    //ONCLICK FUNCTIONS FOR EACH BUTTONS. CHANGE STATE ✨
    $w('#firstButton').onClick(() => {
        $w('#stateBox').changeState("firstState");
    });

    $w('#secondButton').onClick(() => {
        $w('#stateBox').changeState("secondState");
    });

    $w('#thirdButton').onClick(() => {
        $w('#stateBox').changeState("thirdState");
    });
    //CHANGE BUTTON COLORS IF THEY ARE ACTIVE OR NOT 🎉
    $w("#stateBox").onChange((event) => {

        if (event.target.currentState.id === "firstState") {
            $w("#firstButton").style.backgroundColor = yellowColor;
            $w("#firstButton").style.color = whiteColor;
        } else {
            $w("#firstButton").style.backgroundColor = whiteColor;
            $w("#firstButton").style.color = yellowColor;
        }

        if (event.target.currentState.id === "secondState") {
            $w("#secondButton").style.backgroundColor = greenColor;
            $w("#secondButton").style.color = whiteColor;
        } else {
            $w("#secondButton").style.backgroundColor = whiteColor;
            $w("#secondButton").style.color = greenColor;
        }

        if (event.target.currentState.id === "thirdState") {
            $w("#thirdButton").style.backgroundColor = magentaColor;
            $w("#thirdButton").style.color = whiteColor;
        } else {
            $w("#thirdButton").style.backgroundColor = whiteColor;
            $w("#thirdButton").style.color = magentaColor;
        }

    });

});

export function dynamicDataset_ready() {
    let currentItem = $w('#dynamicDataset').getCurrentItem();
    $w('#googleMaps1').location = {
        "latitude": currentItem.latitude,
        "longitude": currentItem.longitude,
        "description": currentItem.description + "'s Home",
    }
}

So, I should merge the 3 onReady functions and put them under 1?
with the export function after?
Thanks

Yes → MERGE all your onReadys() – > to JUST-ONE - - > onReady(), your assumption was correct! (do not forget to like it if you really liked it :wink:)

1 Like

Thank you so much!!