Hello Forum,
I am looking to conditionally hide some image icons for social media links in my repeater. When an entry does not have a link, I would like to hide that icon. I have followed the example of other posts with no success, so I'm probably missing some detail. I have been sure to only have one "onItemReady" for the repeater. I appreciate any feedback!
My code is as follows:
$w("#repeater1").onItemReady( ($w, itemData, index) => { if(itemData.youtube === null) { $w("#image3").hide(); } if(itemData.pintrest === null) { $w("#image4").hide(); } if(itemData.instagram === null) { $w("#image5").hide(); } if(itemData.fb === null) { $w("#image6").hide(); } if(itemData.twitter === null) { $w("#image7").hide(); } if(itemData.linkedIn === null) { $w("#image8").hide(); } });
Hello russian-dima,
Thank you for your quick response. So, I checked with the console-logs, and nothing happened. This reminds me of a problem where I hadn't made the event using the user interface, and nothing would work.
I've now tried the same code using an onItemReady event through the user interface, and changed all of the "null" to "undefined." This at least is turning up either "undefined" or the expected "<url>."
export function repeater1_itemReady($item, itemData, index) { // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4 console.log(itemData.youtube) console.log(itemData.pintrest) console.log(itemData.instagram) console.log(itemData.fb) console.log(itemData.twitter) console.log(itemData.linkedIn) if(itemData.youtube === undefined) { $w("#image3").hide(); console.log('youtube hidden ------------------------******----------') } if(itemData.pintrest === undefined) { $w("#image4").hide(); } if(itemData.instagram === undefined) { $w("#image5").hide(); } if(itemData.fb === undefined) { $w("#image6").hide(); } if(itemData.twitter === undefined) { $w("#image7").hide(); } if(itemData.linkedIn === undefined) { $w("#image8").hide(); } }
This is a step closer, but then the issue is that once one item is hidden for a single index, it remains hidden for the following entries, which is weird.
So then I added an
else{ $w("#imageN").show()}
Which is getting more of the correct tiles to show up, but not entirely.
As I am using pagination, I've noticed something interesting, however. For each of the pages, all items in the repeater have the same exact icons hidden, though the hidden icons are different between the pagination pages. What I suspect is happening is that if the first repeater entry hides the icon, it hides that same icon on all of the other entries regardless of its value.
My current code and the console output:
export function repeater1_itemReady($item, itemData, index) { // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4 console.log(itemData.youtube) console.log(itemData.pintrest) console.log(itemData.instagram) console.log(itemData.fb) console.log(itemData.twitter) console.log(itemData.linkedIn) if(itemData.youtube === undefined) { $w("#image3").hide(); console.log('youtube hidden ------------------------******----------') } else{ $w("#image3").show(); console.log('youtube Shown ------------------------******----------') } if(itemData.pintrest === undefined) { $w("#image4").hide(); console.log('pintrest hidden ------------------------******----------') } else{ $w("#image4").show(); console.log('pintrest Shown ------------------------******----------') } if(itemData.instagram === undefined) { $w("#image5").hide(); console.log('instagram hidden ------------------------******----------') } else{ $w("#image5").show(); console.log('instagram Shown ------------------------******----------') } if(itemData.fb === undefined) { $w("#image6").hide(); console.log('fb hidden ------------------------******----------') } else{ $w("#image6").show(); console.log('fb Shown ------------------------******----------') } if(itemData.twitter === undefined) { $w("#image7").hide(); console.log('twitter hidden ------------------------******----------') } else{ $w("#image7").show(); console.log('twitter Shown ------------------------******----------') } if(itemData.linkedIn === undefined) { $w("#image8").hide(); console.log('linkedin hidden ------------------------******----------') } else{ $w("#image8").show(); console.log('linkedin Shown ------------------------******----------') } }
undefined HOME Line 45
undefined HOME Line 46
http://instagram.com/the.elevated.studio HOME Line 47
https://www.facebook.com/theelevatedstudio/ HOME Line 48
http://twitter.com/studio_elevated HOME Line 49
http://linkedin.com/company/the-elevated-studio HOME Line 50
youtube hidden ------------------------******---------- HOME Line 54
pintrest hidden ------------------------******---------- HOME Line 62
instagram Shown ------------------------******---------- HOME Line 74
fb Shown ------------------------******---------- HOME Line 82
twitter Shown ------------------------******---------- HOME Line 90
linkedin Shown ------------------------******---------- HOME Line 98
http://www.youtube.com/marylandinstitutecollegeofart HOME Line 45
undefined HOME Line 46
https://www.instagram.com/marylandinstitutecollegeofart/ HOME Line 47
http://www.facebook.com/mica.edu HOME Line 48
http://www.twitter.com/mica HOME Line 49
https://www.linkedin.com/company/micacenterforsocialdesign/ HOME Line 50
youtube Shown ------------------------******---------- HOME Line 58
pintrest hidden ------------------------******---------- HOME Line 62
instagram Shown ------------------------******---------- HOME Line 74
fb Shown ------------------------******---------- HOME Line 82
twitter Shown ------------------------******---------- HOME Line 90
linkedin Shown ------------------------******---------- HOME Line 98
undefined HOME Line 45
undefined HOME Line 46
https://www.instagram.com/hesterstreet/ HOME Line 47
https://www.facebook.com/hesterstreet HOME Line 48
https://twitter.com/Hester_Street HOME Line 49
https://www.linkedin.com/company/hester-street-collaborative HOME Line 50
What do show the console-logs?
$w("#repeater1").onItemReady( ($w, itemData, index) => { console.log(itemData.youtube) console.log(itemData.pintrest) console.log(itemData.instagram) console.log(itemData.fb) console.log(itemData.twitter) console.log(itemData.linkedIn) if(itemData.youtube === null) {$w("#image3").hide();} if(itemData.pintrest === null) {$w("#image4").hide();} if(itemData.instagram === null) {$w("#image5").hide();} if(itemData.fb === null) {$w("#image6").hide();} if(itemData.twitter === null) {$w("#image7").hide();} if(itemData.linkedIn === null) {$w("#image8").hide();} });