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!
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 “.”
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.
So, I both added the console logs, and used the user interface to add an onItemReady event. Doing so, the repeater works, the console logs are showing what I expect, and the correct icons are now being hidden.
However, this solution only works for the single editing session where I initiate the onItemReady event. If I save, log out, and then return, the onItemReady event is not triggered, no console logs are shown, and none of the icons are hidden. I can get it working again by creating a new event through the user interface, but then it stops working when I save, log out, and then return.
I figured that I could try to get around this by going back to initiating the event through the code using:
but under all circumstance it seems to not be triggered when using this formulation of initiating an event.
I’ve included the code that works as expected for a single session below. Any ideas on how to get this event to be “remembered” between sessions and be triggered? What is going on here?
export function repeater1_itemReady($w, itemData, index) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
console.log(itemData.youtube)
console.log(itemData.pintrest)
console.log(itemData.instagram)
console.log(itemData.fb)
console.log(itemData.twitter)
console.log(itemData.linkedIn)
@heple005
Ok, back to you.
If i am honest, i did not really understand your problem.
Perhaps you should show a pic of what you are trying to do ?
And this time please use CODE-TAGs! Like…
Here in this CODE-TAG you put in your CODE…
here my CODE!
Thanks.
export function repeater1_itemReady($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 === undefined) {
$w("#image3").hide();
console.log('youtube hidden --******--')}
else{$w("#image3").show();
console.log('youtube Shown --******--')
*** I do this same if/else for the rest of the Social Media links ***
}
Try to code without userinterface, i think it is in most cases the better way of coding. Then you won’t need the connection to your user-interface.
Thank you very much for your time and effort. I will certainly use the Code-Tags from now on. I really hate using the user-interface event creation, so this is extremely helpful.
I think that my problem, when trying to code the event without the user interface, was simply that I was not adding the $w.onReady( function () { } that you placed in you example above. Is the $w.onReady( function () { } required each time you want to add an event to the code?
As for the problem with the user-interface generated event, basically every time I would come back to the project, the onItemReady event would be forgotten by the system, and I would have to create a new onItemReady event through the user interface in order for it to function.
All that to say, I really appreciate your coded, non-user-interface solution and it is working beautifully, and thank you for the tips on forum etiquette and code snippets.