Coding issue - secondary database on a dynamic page

Ask the community
,
1

I’m having trouble getting some elements on a dynamic item page to hide when certain fields in a database aren’t empty.

The elements are called GreyOutFacebook, GreyOutInstagram,GreyOutStravaGroup, GreyOutEmail, GreyOutWebsite. They are in a non dynamic strip called TheOrganiser, in a column called TheOrganiserLinks (if that makes a difference but I don’t believe it does)

This dymanic item page is currently linked to a dynamic database (called Items) In this database is a reference field (not a multi-reference) called CyclingClubs_rideName that allows me to allocate each record in the Items database with a Club from the CyclingClubs

The fields that I want the elements to hide are in the CyclingClubs database. These fields are called clubFacebook, clubInstagram, clubStravaGroup, clubEmail, clubWebsite.

As an example: If there is text in clubFacebook field, I want the GreyOutFacebook element to hide. etc etc for all 5 fields/elements

I’ve tried what feels like a gazillion things and can’t get the grey out boxes to disappear.

Latest code I’ve gotten to below:

import wixData from 'wix-data';

$w.onReady(function () {
  const currentItem = $w("#dynamicDataset").getCurrentItem();
  const clubRefId = currentItem.CyclingClubs_rideName;

  if (!clubRefId) return;

  wixData.get("CyclingClubs", clubRefId)
    .then(club => {
      if (club.clubFacebook) {
        $w('#GreyOutFacebook').hide();
      }
      if (club.clubInstagram) {
        $w('#GreyOutInstagram').hide();
      }
      if (club.clubStravaGroup) {
        $w('#GreyOutStravaGroup').hide();
      }
      if (club.clubEmail) {
        $w('#GreyOutEmail').hide();
      }
      if (club.clubWebsite) {
        $w('#GreyOutWebsite').hide();
      }
    })
    .catch((err) => {
      console.error('Error fetching CyclingClubs record:', err);
    });
});

Page issue URL:

I’ve got a similar thing on the website (https://lukevfarrugia.wixsite.com/ridewithme/cyclingclubs/rapha-melbourne) that does the same thing and works with the following code:

$w.onReady(function () {
  // Wait for the dynamic dataset to be ready
  $w('#dynamicDataset').onReady(() => {
    const item = $w('#dynamicDataset').getCurrentItem();

    // Hide grey-out elements if corresponding fields are not empty
    if (item.clubFacebook) {
      $w('#GreyOutFacebook').hide();
    }

    if (item.clubInstagram) {
      $w('#GreyOutInstagram').hide();
    }

    if (item.clubStrava) {
      $w('#GreyOutStrava').hide();
    }

    if (item.clubEmail) {
      $w('#GreyOutEmail').hide();
    }

    if (item.clubWebsite) {
      $w('#GreyOutWebsite').hide();
    }
  });
});

Any help MOST welcome. Thank you so much in advance.

2

Your code seems to be fine and error free on first glance; that is until I checked out the code of the actual page - only to find out it has multiple $w.onReady() functions (12 to be exact), which is not required at all. You should only have one $w.onReady() function on your page, and all the code that is supposed to run when the page loads should go inside this one function.

So my suggestion would be to first get rid of all these duplicate functions and bring it all under one, and then try changing this line from

to this:

  const clubRefId = currentItem["CyclingClubs_rideName"];

Also, I’d suggest that you make use of the developer console to log your objects and variables at every step to check if your code is actually returning the output that is expected.