Why does Collapse only work when I refresh the page

Ask the community
,
1

I’ve used the code below to collapse .svg icons that I’m linking to files uploaded in an application form so that my dashboard only shows the files that have data linked to them and collapses the others. When I load the page the first time it shows all the possible icons and then when I refresh it collapses all the undefined icons. Sometimes it takes two refreshes. Looks great and works great when it finally works. I’ve tried clearing out any cached data in my browser, I’ve tried logging out and logging in. Same issue. Any ideas? - Thanks!

$w("#dataset1").onReady(function () {
const imageValue= $w('#dataset1').getCurrentItem().image2 
 
 if (imageValue ===undefined) {
          $w('#vectorImage10').collapse();
    }
2

Try this one…

$w("#dataset1").onReady(async()=> {
     const imageValue = await $w('#dataset1').getCurrentItem().image2 
     if (imageValue === undefined) {$w('#vectorImage10').collapse();}
})
3

The dataset getCurrentItem() does not need an await as it does not return a Promise.

4

Where do you have this code? When does it run?

5

@yisrael-wix
Ohhh damn, wrong way. :sweat_smile:

6

I’ve got it on a page where a member can see what applications they’ve fill out. It’s in a repeater connected to a financial eligibility application. I want it to run when they navigate to the page.

7

@yisrael-wix I’ve got several SVG icons that I want to collapse if no images or documents have been uploaded for them.

939×545 72.4 KB

8

@justin78337 From the short amount of code that you just posted, I can see that you have no page onReady() event handler, and you have two dataset onReady() event handlers which is incorrect - you should have only one to avoid unpredictable results. And, the dataset onReady() function must be in the page’s onReady() function.

The page’s onReady() runs when the page is ready. The dataset might not be ready at the same time, so you code the dataset onReady() function inside of the page’s onReady() so it will trigger when the dataset is ready.

See $w.onReady() :: a guide for the perplexed for an explanation of the page’s onReady().
See the Dataset onReady() API for details on how the dataset onReady() works.

9

@yisrael-wix Thank you! This is what I expected was the problem when you asked “when” i was running this code. I’ll learn how onReady() works. Thanks again!

10

@justin78337 Also, see the onReady() API for more information.

11

@yisrael-wix Thanks for your help. This code is working now. Am i adding extraneous code by repeating
const imageValue= $w( ‘#dataset1’ ).getCurrentItem().image2
for each image I want to collapse? Could I just put it once and then use only (if -collapse with each ‘#vectorImage#’ the rest of the way? (Full code below)

$w.onReady(function () {
$w("#dataset1").onReady(function () {
const imageValue= $w('#dataset1').getCurrentItem().image2 
 {
 if (imageValue ===undefined) {
          $w('#vectorImage10').collapse();
    }
 }

{
const imageValue= $w('#dataset1').getCurrentItem().image2 
 
 if (imageValue ===undefined) {
          $w('#vectorImage11').collapse();
    }
}

{
const imageValue= $w('#dataset1').getCurrentItem().image2 
 
 if (imageValue ===undefined) {
          $w('#vectorImage12').collapse();
    }
}


{
const imageValue= $w('#dataset1').getCurrentItem().image2 
 
 if (imageValue ===undefined) {
          $w('#vectorImage13').collapse();
    }
}

{
const imageValue= $w('#dataset1').getCurrentItem().image2 
 
 if (imageValue ===undefined) {
          $w('#vectorImage14').collapse();
    }
}

{
const imageValue= $w('#dataset1').getCurrentItem().image2 
 
 if (imageValue ===undefined) {
          $w('#vectorImage35').collapse();
    }
}
{
const imageValue= $w('#dataset1').getCurrentItem().image2 
 
 if (imageValue ===undefined) {
          $w('#vectorImage36').collapse();
    }
}
})
});
12

@yisrael-wix Nevermind. Looks it tried it an answered my own question. Thanks SO MUCH for your help!

13

@yisrael-wix Wait! you’re going to think I’m so dumb. Does this snippet

const imageValue= $w('#dataset1').getCurrentItem().image2

Say something about the specific data I’ve linked the .svg item to? I’ve put all the svg icons on my page under that same piece of code, but now they are all collapsing except the original image I had done this for. is .image2 saying something about where it’s looking for the data to connect to or something?
Here’s my current code:

$w.onReady(function () {
$w("#dataset1").onReady(function () {
const imageValue= $w('#dataset1').getCurrentItem().image2 
{
 if (imageValue ===undefined) {
          $w('#vectorImage32').collapse();
    }
 }
 {
 if (imageValue ===undefined) {
          $w('#vectorImage2').collapse();
    }
 }
 {
 if (imageValue ===undefined) {
          $w('#vectorImage33').collapse();
    }
 }
 {
 if (imageValue ===undefined) {
          $w('#vectorImage4').collapse();
    }
 }
 {
 if (imageValue ===undefined) {
          $w('#vectorImage10').collapse();
    }
 }
{
 if (imageValue ===undefined) {
          $w('#vectorImage11').collapse();
    }
}
{
 if (imageValue ===undefined) {
          $w('#vectorImage12').collapse();
    }
}
{
 if (imageValue ===undefined) {
          $w('#vectorImage13').collapse();
    }
}
{
 if (imageValue ===undefined) {
          $w('#vectorImage14').collapse();
    }
}
{
 if (imageValue ===undefined) {
          $w('#vectorImage35').collapse();
    }
}
{
 if (imageValue ===undefined) {
          $w('#vectorImage36').collapse();
    }
}
{ 
 if (imageValue ===undefined) {
          $w('#vectorImage37').collapse();
    }
}
{ 
 if (imageValue ===undefined) {
          $w('#vectorImage38').collapse();
    }
}
{ 
 if (imageValue ===undefined) {
          $w('#vectorImage39').collapse();
    }
}
 {
 if (imageValue ===undefined) {
          $w('#vectorImage40').collapse();
    }
}
 {
 if (imageValue ===undefined) {
          $w('#vectorImage41').collapse();
    }
}
  {
 if (imageValue ===undefined) {
          $w('#vectorImage42').collapse();
    }
}
  {
 if (imageValue ===undefined) {
          $w('#vectorImage43').collapse();
    }
}
  {
 if (imageValue ===undefined) {
          $w('#vectorImage44').collapse();
    }
}
  {
 if (imageValue ===undefined) {
          $w('#vectorImage45').collapse();
    }
}
  {
 if (imageValue ===undefined) {
          $w('#vectorImage46').collapse();
    }
}
  {
 if (imageValue ===undefined) {
          $w('#vectorImage47').collapse();
    }
}
  {
 if (imageValue ===undefined) {
          $w('#vectorImage48').collapse();
    }
}
  {
 if (imageValue ===undefined) {
          $w('#vectorImage49').collapse();
    }
}
  {
 if (imageValue ===undefined) {
          $w('#vectorImage50').collapse();
    }
}
  {
 if (imageValue ===undefined) {
          $w('#vectorImage51').collapse();
    }
}
  {
 if (imageValue ===undefined) {
          $w('#vectorImage52').collapse();
    }
}
  {
 if (imageValue ===undefined) {
          $w('#vectorImage54').collapse();
    }
}
  {
 if (imageValue ===undefined) {
          $w('#vectorImage55').collapse();
    }
}
  {
 if (imageValue ===undefined) {
          $w('#vectorImage56').collapse();
    }
}
  {
 if (imageValue ===undefined) {
          $w('#vectorImage57').collapse();
    }
}
  {
 if (imageValue ===undefined) {
          $w('#vectorImage58').collapse();
    }
}
  {
 if (imageValue ===undefined) {
          $w('#vectorImage59').collapse();
    }
}
  {
 if (imageValue ===undefined) {
          $w('#vectorImage60').collapse();
    }
}
  {
 if (imageValue ===undefined) {
          $w('#vectorImage53').collapse();
    }
}
{
 if (imageValue ===undefined) {
          $w('#vectorImage34').collapse();
    }
 }
 {
 if (imageValue ===undefined) {
          $w('#vectorImage7').collapse();
    }
 }
})
});

Do I need to put a piece of code to refer to each specific piece of data from the collection before each “if” statement?

Here’s what is looks like in the editor

414×603 20.6 KB

Here’s what it looks like on the published site (I have images & documents attached to many more of the icons than that one)

452×518 6.58 KB

Thanks!

14

@yisrael-wix
Should my code look like:

$w.onReady(function () {
$w("#dataset1").onReady(function () {
{
 const imageValue= $w('#dataset1').getCurrentItem().fileUploadField2 //With this piece referencing the Field Key of the data connected with #vectorimage32? 
 if (imageValue ===undefined) {
          $w('#vectorImage32').collapse();
    }
 }
 {
 const imageValue= $w('#dataset1').getCurrentItem().fileUploadField //With this piece referencing the Field Key of the data connected with #vectorimage2? 
 if (imageValue ===undefined) {
          $w('#vectorImage2').collapse();
    }
 }
15

@yisrael-wix Answered my own question again. It’s working perfectly now!
It’d be so embarrassing to show you my finished code! I was using option to duplicate or sometimes cut and paste and I have code in there that seriously looks like

const imageValue= $w('#dataset1').getCurrentItem().copyOfCopyOfCopyOfW2Document214