Show/Hide Button In Repeater

Ask the community
,
1

I have read an tried various suggestions here but can’t get this to work. It’s probably something simple so I apologise for being an idiot but hope someone can help.

Thanks
Warren

I have a collection of properties which are being displayed in a repeater.

As expected. Some properties do not have certain pieces of data, an example would be, no Facebook page.

I have created a draft here: https://mih-websites.wixsite.com/my-site-2

I like the way the button is displayed in grey if no data and coloured if there is a link.

The problem I am having is when you move the mouse over the button which recognises there is a link, it wont let you click and open the link.

Here is all the code on the page:

import wixData from ‘wix-data’ ;

$w . onReady ( function () {

let myData = $w ( “#dataset1” ). getCurrentItem (). facebook ; console . log ( myData )
if ( myData === ‘Yes’ ) { $w ( ‘#button1’ ). enable ();}
else { $w ( ‘#button1’ ). disable (); } //TODO: write your page related code here…

}) ;

/**

  • Adds an event handler that runs when the cursor is inside the
    input element and a key is pressed.
    Read more
  • @param {$w.KeyboardEvent} event
    */
    export function searchBar_keyPress ( event ) {
    let searchValue = $w ( “#searchBar” ). value ;
    $w ( ‘#dataset1’ ). setFilter ( wixData . filter (). contains ( ‘title’ , searchValue ). or ( wixData . filter (). contains ( ‘island’ , searchValue ). or ( wixData . filter (). contains ( ‘atoll’ , searchValue ))))
}
2

Hi,
from your implementation I can see that if there’s a link in 1 item (current item) you make all the button in the repeater enabled (even if there’s no link in the specific repeater item).

To make it work with the repeater, do the following:

  • Remove the code from the onReady

  • Make the button inside the repeater disabled on load (through properties and events panel)

  • Add the onItemReady function for the repeater (you can do it through it’s properties and events panel)

  • Check if the current itemData has the link and based on the result enable or disable item button.

export function repeater_itemReady($item, itemData, index) {
    if (itemData.facebook)   $item('#button1').enable();
}

You can see similar approach on my site with examples here. I display the checkmark based on the value in the relevant field, also display buttons to vote and the number of votes based on if the user is logged in or not.