Repeater shows only its first placeholder image

Ask the community
,
1

I have a code that supposed to display some text and image from a query result. The repeater is populated with the query results, and I can see in the console. Text elements are displayed properly, however, for some reason, instead of the query result images, only the repeater’s first placeholder image is shown for each query image. Which part of the code causes this?

In the editor:

490×648 421 KB

In he preview mode:

431×781 265 KB

and here is the code:

import wixData from "wix-data";

let currentPageN
$w.onReady(function () {
    $w("#pagination1").onChange((event) => {
        currentPageN = event.target.currentPage;
        selectingItemToDisplay();
    })
});

export function searchBox_keyPress(event) {
 if (event.key === "Enter") {
        queryDS();
    }
}

let itemPerPageN = 4;
let repeaterData;
function queryDS() {
    wixData.query("MultiItem_1")
        .contains("text", $w('#searchBox').value)
        .find()
        .then((results) => {
            $w("#repeater1").data = results.items;
            repeaterData = results.items;
 let totalPageN = repeaterData.length / itemPerPageN
 if (!Number.isInteger(totalPageN)) {
                totalPageN = Math.ceil(totalPageN);
            }
            $w('#pagination1').currentPage = 1;
            currentPageN = 1;
            $w('#pagination1').totalPages = totalPageN;         
            selectingItemToDisplay();
        });
}

function selectingItemToDisplay() {
 let firstItemIndex = (currentPageN - 1) * itemPerPageN;
 let lastItemIndex = firstItemIndex + itemPerPageN;
 let slicedRepeaterData = repeaterData.slice(firstItemIndex, lastItemIndex);

    $w("#repeater1").data = slicedRepeaterData;
    settingRepeater()
}

function settingRepeater() {
    $w('#repeater1').onItemReady(($item, itemData, index) => {
        $item('#text1').text = itemData.text;
        $item('#image1').image = itemData.image;
        console.log(itemData.image)
 switch (itemData.type) {
 case 1:
            $item("#text1").expand();
            $item("#image1").collapse();
 break;
 case 2:
            $item("#text1").collapse();
            $item("#image1").expand();
 break;
        }
    });

    $w('#repeater1').expand();
    $w('#pagination1').expand();
}

Thanks

2

$item ( ‘#image1’ ). image
Fix to
$item ( ‘#image1’ ).src

3

Hi,

One option would be to liberate the onItemReady code from the settingRepeater function and put it in the onReady. As it is now, the data gets assigned to the repeater, and at that point, the onItemReady has not been initiated yet since it is inside a method that is going to be called subsequently. So, it doesn’t assign the appropriate images and other data.

Another option would be to use the forEachItem function instead of onItemReady inside of the settingRepeater function. It’s more suited to what you are wanting to do at that point, and that is to run a function on all of the repeated items. OnItemReady runs only when the data is assigned.

4

Hi,
Thank you so much for your help. Your solution made the code to work fine.

5

Hi,
Thank you so much for your guides. Unfortunately, my knowledge doesn’t allow me to manage your solutions. I did try to put the settingRepeater’s code lines inside the onReady function. But I faced the same problem. I also changed the onItemRead to forEachItem that causes empty containers of the repeater.

6

Although the changing of ‘.image’ to ‘.src’ made the code works smoothly, It made me aware of two different properties and to be confused. I am wondering what is the difference between ‘.image’ and ‘.src’? According to this link , it seems that the images are returned from the ‘Media Manager’. Is there any difference between the case in which images are returned from the ‘Media Manager’ and the one in which the images are returned from the collection, where the images seem to be stored?