$w.onReady(function () and Repeater

Ask the community
,
1

Dear All,

I have a repeater with 4 dropdowns connected to a collection.

On page load, I would like to put a green background for each dropdown filled out onto the repeater.

731×274 12.7 KB

With my following code, it is not working.

$w.onReady(function () {
	$w("#Repeater").onItemReady(($item, itemData, index) => {
		//SUB-CATEGORIES
		if ($item("#DropdownSubCategory1").selectedIndex >= 0) {
			($item("#DropdownSubCategory1").style.backgroundColor = "#B1D3BB");
			($item("#DropdownSubCategory1").style.borderColor = "#B1D3BB");
		}
		if ($item("#DropdownSubCategory2").selectedIndex >= 0) {
			($item("#DropdownSubCategory2").style.backgroundColor = "#B1D3BB")
			($item("#DropdownSubCategory2").style.borderColor = "#B1D3BB")
		}
		if ($item("#DropdownSubCategory3").selectedIndex >= 0) {
			($item("#DropdownSubCategory3").style.backgroundColor = "#B1D3BB");
			($item("#DropdownSubCategory3").style.borderColor = "#B1D3BB");
		}
		if ($item("#DropdownSubCategory4").selectedIndex >= 0) {
			($item("#DropdownSubCategory4").style.backgroundColor = "#B1D3BB");
			($item("#DropdownSubCategory4").style.borderColor = "#B1D3BB");
		}
	});
});

but if I add “setTimeout(function () {“ for each dropdown, it works.

$w.onReady(function () {
	$w("#Repeater").onItemReady(($item, itemData, index) => {
		//SUB-CATEGORIES
		setTimeout(function () {
			if ($item("#DropdownSubCategory1").selectedIndex >= 0) {
				($item("#DropdownSubCategory1").style.backgroundColor = "#B1D3BB");
				($item("#DropdownSubCategory1").style.borderColor = "#B1D3BB");
			}
		}, 1000)
		setTimeout(function () {
			if ($item("#DropdownSubCategory2").selectedIndex >= 0) {
				($item("#DropdownSubCategory2").style.backgroundColor = "#B1D3BB")
				($item("#DropdownSubCategory2").style.borderColor = "#B1D3BB")
			}
		}, 1000)
		setTimeout(function () {
			if ($item("#DropdownSubCategory3").selectedIndex >= 0) {
				($item("#DropdownSubCategory3").style.backgroundColor = "#B1D3BB");
				($item("#DropdownSubCategory3").style.borderColor = "#B1D3BB");
			}
		}, 1000)
		setTimeout(function () {
			if ($item("#DropdownSubCategory4").selectedIndex >= 0) {
				($item("#DropdownSubCategory4").style.backgroundColor = "#B1D3BB");
				($item("#DropdownSubCategory4").style.borderColor = "#B1D3BB");
			}
		}, 1000)
	});
});

Is my second code correct or is there another way to retype it?

Thank you for your help.

Best regards,
Domivax

2

Hi :raised_hand_with_fingers_splayed:

Why your code doesn’t change the colors with the timeout function?

Because when the repeater start populating the items, the page wasn’t ready yet, and the timeout function delayed the color change process until the page is ready.

The best practice is to use anything related to a dataset inside its onReady() function, this will make sure the code runs as soon as the dataset is ready, preventing issues like yours from happening.

So, just place the repeater’s onItemReady() function inside the dataset’s onReady() function, and your code will work.

$w("#myDataset").onReady( () => {

  $w("#Repeater").onItemReady( ($item, itemData, index) => {
        // populate the repeater here without the
        // setTimeout functions
  })
  
});

NOTE: Replace the dataset name in orange with yours.

Hope this helps you understand the importance of the onReady() function.
Ahmad