Search.../
  1. APIs

onItemReady( )

Sets the function that runs when a new repeated item is created.

Description

Use the onItemReady() function for code you want to run before new repeated items are rendered.

The callback is triggered when you add new items by setting the data property or when new items are created based on a dataset that is connected to the repeater. It is not triggered for existing items that are updated when you set the data property. (For more information about when new items are created, see the data property.) To run code after updating existing items, use the forEachItem or forItems functions instead.

Because setting a repeater's data property triggers the onItemReady() callback to run, make sure you call onItemReady() before you set the data property. Failing to do so will mean that your callbacks are not triggered when you set the data property.

Usually, you use onItemReady() to:

  • Apply the repeated item's itemData to the properties and functions of the repeated elements contained in the repeated item being created.

    For example, you can use onItemReady() to set the src property of an image in the repeater to an image source found in the itemData object and then show() the image.

  • Add event handlers to the repeated elements contained in the repeated item being created.

    For example, you can use onItemReady() to set the onClick() event handler of a button in the repeater.

Note: When using a dataset to populate the contents of your repeated items,

the onItemReady() callback function is triggered before the dataset populates the values of your page elements. Therefore, element values that you set using onItemReady() may be overridden when the dataset is ready. To change the values set by the dataset, use forEachItem inside the dataset's onReady(). For more information, see the forEachItem examples.

Syntax

function onItemReady(handler: ItemReadyEventHandler): Repeater
handler: function ItemReadyEventHandler($item: $w, itemData: Object, index: number): void

onItemReady Parameters

NAME
TYPE
DESCRIPTION
handler

ItemReadyEventHandler

The name of the function or the function expression to run when the item is ready.

Returns

The element on which the event is now registered.

Return Type:

Repeater

ItemReadyEventHandler Parameters

NAME
TYPE
DESCRIPTION
$item

$w

A selector function with repeated item scope.

itemData

Object

The object from the repeater's data array that corresponds to the repeated item being created.

index

number

The index of the itemData object in the data array.

Returns

This function does not return anything.

Return Type:

void

Was this helpful?

Set up new repeated items

Code Example

Copy Code
1$w("#myRepeater").onItemReady( ($item, itemData, index) => {
2  let repeatedElement = $item("#repeatedElement");
3  let nonRepeatedElement = $w("#nonRepeatedElement");
4  let itemDataValue = itemData.someProperty;
5  let isEvenItem = index % 2 === 0;
6});
Set up new repeated items

This example creates an event handler that sets up new repeated items by setting the source of a repeated image element and the text value of a repeated text element to values from the repeated item's data.

It also sets an event handler that runs when the image in a repeated item is clicked. The event handler changes the value of a repeated text element to indicate whether the repeated item is "selected". It also changes the value of a non-repeated text element which serves as a counter for how many repeated items are "selected".

Code Example

Copy Code
1$w("#myRepeater").onItemReady( ($item, itemData, index) => {
2  const repeatedText = $item("#repeatedText");
3  const repeatedImage = $item("#repeatedImage");
4  const numSelected = $item("#nonRepeatedText");
5
6  repeatedImage.src = itemData.img;
7  repeatedText.text = itemData.description;
8
9  repeatedImage.onClick( (event) => {
10    if(repeatedText.text === "Selected"){
11      repeatedText.text = itemData.description;
12      numSelected.text = (Number(numSelected.text) - 1).toString();
13    }
14    else {
15      repeatedText.text = "Selected";
16      numSelected.text = (Number(numSelected.text) + 1).toString();
17    }
18  } );
19} );
20
Trigger onItemReady() by setting a repeater's data

This example demonstrates setting the data property of a repeater, which triggers the onItemReady function.

The site visitor enters search text and when they click a Search button, a query runs that returns the results for that query. The results of that query are displayed in a repeater. A message is displayed if there are no results.

When the data property is set for the repeater, the onItemReady function is automatically triggered.

Code Example

Copy Code
1import wixData from 'wix-data';
2
3$w.onReady(function () {
4  $w("#myRepeater").onItemReady(($item, itemData, index) => {
5    $item("#myText").text = itemData.text;
6    $item("#myImage").src = itemData.image;
7
8    // Link to the dynamic item page
9    $item("#myButton").link = itemData.url; 
10  });
11});
12
13export function searchButton_click(event) {
14  let searchResult = $w('#searchInput').value;
15  wixData.query("MyCollection")
16    .eq("searchField", searchResult)
17    .find()
18    .then((results) => {
19      if (results.totalCount > 0) {
20          $w("#myRepeater").data = results.items;
21      } else {
22          $w('#noResultsMsg').show();
23      }
24    })
25    .catch((err) => {
26      let errorMsg = err;
27    });
28}
29