Code working in OnReady function but not on button click?

Ask the community
, ,
1

Hi,
I run the following code in my OnReady function and it is working fine…

$w.onReady(function () {

    $w("#datasetMembersOnly").onReady(() => {
        $w("#rptMembers").forEachItem(($w, itemData, index) => {
 if (itemData.approved === "1") {
                $w("#boxName").style.backgroundColor = "#FFFFFF";
                $w("#boxCompany").style.backgroundColor = "#FFFFFF";
                $w("#boxJobTitle").style.backgroundColor = "#FFFFFF";
                $w("#boxEmailAddress").style.backgroundColor = "#FFFFFF";
                $w("#btnApprove").hide();
                $w("#btnDisable").show();
            } else {
                $w("#boxName").style.backgroundColor = "#7FCCF7";
                $w("#boxCompany").style.backgroundColor = "#7FCCF7";
                $w("#boxJobTitle").style.backgroundColor = "#7FCCF7";
                $w("#boxEmailAddress").style.backgroundColor = "#7FCCF7";
                $w("#btnApprove").show();
                $w("#btnDisable").hide();
            }
            console.log(itemData.approved)
        });
    });
    console.log("on ready")
});

However, when I run the same code in an OnClick event, it is not returning the same results…

export function btnAllMembers_click(event) {
    $w("#datasetMembersOnly").onReady(() => {
        $w("#rptMembers").forEachItem(($w, itemData, index) => {
 if (itemData.approved === "1") {
                $w("#boxName").style.backgroundColor = "#FFFFFF";
                $w("#boxCompany").style.backgroundColor = "#FFFFFF";
                $w("#boxJobTitle").style.backgroundColor = "#FFFFFF";
                $w("#boxEmailAddress").style.backgroundColor = "#FFFFFF";
                $w("#btnApprove").hide();
                $w("#btnDisable").show();
            } else {
                $w("#boxName").style.backgroundColor = "#7FCCF7";
                $w("#boxCompany").style.backgroundColor = "#7FCCF7";
                $w("#boxJobTitle").style.backgroundColor = "#7FCCF7";
                $w("#boxEmailAddress").style.backgroundColor = "#7FCCF7";
                $w("#btnApprove").show();
                $w("#btnDisable").hide();
            }
            console.log(itemData.approved)
        });
    });
    console.log("all members button clicked!")
}

It seems to skipping the else statement and only returning the items to be approved?


Can anyone offer any help?
Many thanks :slight_smile:

2

Hi Rachel:

Is the problem on the Members Only page of this site: https://www.markhatterassociates.co.uk?

If so then it may be tough for a mere mortal to debug without more privileged access. If you can post the page that the code is on that will help.

If it is privileged then I can help but you would need to make me a contributor unless you want to wait for a Wix person to hit this link.

Steve

3

Hi Steve, this actually has public access at the moment (but will become password protected)

The page is Approve Members | Mark Hatter Associates

I really appreciate your time and effort, thank you :slight_smile:

Rachel

4

Hi Rachel:

I think you may have another flaw in your logic :frowning:

My guess is that you clicked on the members to approve button and then clicked on the all members button.

The members to approve button does this:

export function btnMembersToApprove_click(event, $w) {
	$w("#datasetMembersOnly").setFilter(wixData.filter()
	.eq("approved", "0"))
	.then((results) => {
	    $w("#boxName").style.backgroundColor = "#7FCCF7";
	    $w("#boxCompany").style.backgroundColor = "#7FCCF7";
	    $w("#boxJobTitle").style.backgroundColor = "#7FCCF7";
            $w("#boxEmailAddress").style.backgroundColor = "#7FCCF7";
	    $w("#btnApprove").show();
	    $w("#btnDisable").hide();
	})
	console.log("members to approve button clicked!")
}

Two things to consider here:

  1. The then call doesn’t really do anything. The returned promise is void so the results parameter will always be empty. The elements you are trying to set are in a repeater and not the main page so the code won’t do anything. So you should be able to simply call:
export function btnMembersToApprove_click(event, $w) {     
    $w("#datasetMembersOnly").setFilter(wixData.filter()     
    .eq("approved", "0"));
}
  1. Now that your dataset is filtered all you will ever get is the un approved members. In order to see all members again you need to reset the filter like this
$w("#datasetMembersOnly").setFilter(wixData.filter());

In addition you don’t need to create a second $w(“#datasetMembersOnly”).onReady() call. Once you have called this the first time in the $w.onReady() function your callback will be registered with the dataset and invoked whenever the dataset changes. So your all members button handler now is simply a case of clearing the filter.

export function btnAllMembers_click(event) {
    $w("#datasetMembersOnly").setFilter(wixData.filter());
    console.log("all members has been clicked!");
}

I think this should correct the problem you are experiencing.

Steve

5

Hi Steve, apologies for the delayed reply but thank you so much for looking into this for me. I haven’t been able to test this yet but what you have said makes complete sense so I’m hoping I’ll get it all working!

Now, to brush up on my coding logic!! :slight_smile: