Looking For Help with Dynamic Pages

Hey everyone. Let me start my saying I’m only just starting my coding journey so be gentle! :wink:

I have a client and, as part of the website I’m building, they have a series of interviews (including an intro and a number of Q&As - q1, a1, q2, a2, etc.) with various people they have conducted over the years. I’ve used the content management dataset to store these so they can be displayed on dynamic pages.

The problem is that the interviews are of various lengths; from as few as 2 questions/answers (they ALL have at least 2) right up to 17! As it is, interviews that have fewer questions have huge spaces of emptiness.

I’ve split the page into sections (strips) so what I have been trying to do is hide the strip when the relevant q field is empty (obviously if the ‘q’ field is empty, so is the ‘a’ field) to limit the length of the page.

Every row has q1/a1 and q2/a2 but then they vary in numbers. I’ve written the following code which I thought would help hide the strip if the field in question is blank.

$w.onReady(function(){
$w("#dynamicDataset").onReady(()=>{
    let Spotlight =$w("#dynamicDataset").getCurrentItem();

    if(//#dynamicDataset.q3===null){
        $w("#columnStrip3").hide();
        $w("#columnStrip3").collapse();
    } else {
        $w("#columnStrip3").show();
        $w("#columnStrip3").expand();
}

This is then repeated from columnStrip3 for Q3, columnStrip4 for Q4, etc. up to the maximum of 17.

It shows no errors, but also doesn’t do what I expect. In fact, it does nothing at all. Any help would be appreciated.

Thanks in advance.
Gary

Test this one and compare it with your own code.
Find all the SYNTAX-ERRORS you which were eleminated.
Also pay attention onto your commented-out code-part.
Take a look onto the CONSOLE to see what happens.

You will find the CONSOLE either on the very bottom of your Wix-Editor running in PREVIEW-MODE or you can press F12 if you are using Microsoft-Edge-Browser or Google-Chrome.

$w.onReady(function(){
    $w("#dynamicDataset").onReady(async()=>{
        let currentDynamicData =$w("#dynamicDataset").getCurrentItem();
        console.log(currentDynamicData);

        if(currentDynamicData.q3===null){
            await $w("#columnStrip3").hide();
            $w("#columnStrip3").collapse();
        } else {
            $w("#columnStrip3").expand();
            $w("#columnStrip3").show();
        }
    });    
});

Hey Ninja, Thank you SO much for taking the time to reply. I’ve taken what you write (then replicated for each section as per below). No errors, but it’s also not removing the relevant sections. Any ideas? It’s probably me so any help would be appreciated!

$w.onReady(function(){
    $w("#dynamicDataset").onReady(async()=>{
        let currentDynamicData =$w("#dynamicDataset").getCurrentItem();
        console.log(currentDynamicData);

        if(currentDynamicData.q3===null){
            await $w("#columnStrip3").hide();
            $w("#columnStrip3").collapse();
        } else {
            $w("#columnStrip3").expand();
            $w("#columnStrip3").show();
        }
        if(currentDynamicData.q4===null){
            await $w("#columnStrip4").hide();
            $w("#columnStrip4").collapse();
        } else {
            $w("#columnStrip4").expand();
            $w("#columnStrip4").show();
        }
        if(currentDynamicData.q5===null){
            await $w("#columnStrip5").hide();
            $w("#columnStrip5").collapse();
        } else {
            $w("#columnStrip5").expand();
            $w("#columnStrip5").show();
        }
        if(currentDynamicData.q6===null){
            await $w("#columnStrip6").hide();
            $w("#columnStrip6").collapse();
        } else {
            $w("#columnStrip6").expand();
            $w("#columnStrip6").show();
        }
        if(currentDynamicData.q7===null){
            await $w("#columnStrip7").hide();
            $w("#columnStrip7").collapse();
        } else {
            $w("#columnStrip7").expand();
            $w("#columnStrip7").show();
        }
        if(currentDynamicData.q8===null){
            await $w("#columnStrip8").hide();
            $w("#columnStrip8").collapse();
        } else {
            $w("#columnStrip8").expand();
            $w("#columnStrip8").show();
        }
        if(currentDynamicData.q9===null){
            await $w("#columnStrip9").hide();
            $w("#columnStrip9").collapse();
        } else {
            $w("#columnStrip9").expand();
            
        if(currentDynamicData.q10===null){
            await $w("#columnStrip10").hide();
            $w("#columnStrip10").collapse();
        } else {
            $w("#columnStrip10").expand();
            $w("#columnStrip10").show();
        }$w("#columnStrip9").show();
        }
        if(currentDynamicData.q11===null){
            await $w("#columnStrip11").hide();
            $w("#columnStrip11").collapse();
        } else {
            $w("#columnStrip11").expand();
            $w("#columnStrip11").show();
        }
        if(currentDynamicData.q12===null){
            await $w("#columnStrip12").hide();
            $w("#columnStrip12").collapse();
        } else {
            $w("#columnStrip12").expand();
            $w("#columnStrip12").show();
        }
        if(currentDynamicData.q13===null){
            await $w("#columnStrip13").hide();
            $w("#columnStrip13").collapse();
        } else {
            $w("#columnStrip13").expand();
            $w("#columnStrip13").show();
        }
        if(currentDynamicData.q14===null){
            await $w("#columnStrip14").hide();
            $w("#columnStrip14").collapse();
        } else {
            $w("#columnStrip14").expand();
            $w("#columnStrip14").show();
        }
        if(currentDynamicData.q15===null){
            await $w("#columnStrip15").hide();
            $w("#columnStrip15").collapse();
        } else {
            $w("#columnStrip15").expand();
            $w("#columnStrip15").show();
        }
        if(currentDynamicData.q16===null){
            await $w("#columnStrip16").hide();
            $w("#columnStrip16").collapse();
        } else {
            $w("#columnStrip16").expand();
            $w("#columnStrip16").show();
        }
        if(currentDynamicData.q17===null){
            await $w("#columnStrip17").hide();
            $w("#columnStrip17").collapse();
        } else {
            $w("#columnStrip17").expand();
            $w("#columnStrip17").show();
        }
    });    
});
  1. Modify this code line…
let currentDynamicData;
console.log("DATA: ", currentDynamicData);
  1. Run your code
  2. Take a look onto given RESULTS inside of CONSOLE.

What results do you get?

You normaly should get an OBJECT with all the data about your current-dynamic-data.

add more codelines like…

console.log("DATA-Q3: ", currentDynamicData.q3);
console.log("DATA-Q4: ", currentDynamicData.q4);
console.log("DATA-Q5: ", currentDynamicData.q5);

What do you get as RESULTS ?

Always try to work with → CONSOLE → it’s your best DEBUGGING-FRIEND!

EDIT:
If you need to hide COLUM-STRIPS when no data found for a → Q <–,
you also can do it like…

if(!currentDynamicData.q3) {console.log("Q3-Datafield-Value = EMPTY");}

Thanks Ninja! Apologies for my incompetence!
So I added the line into the first part so it now looks like this.

$w.onReady(function(){
    $w("#dynamicDataset").onReady(async()=>{
        let currentDynamicData; =$w("#dynamicDataset").getCurrentItem();
        console.log("DATA: ", currentDynamicData);

        if(currentDynamicData.q3===null){
            await $w("#columnStrip3").hide();
            $w("#columnStrip3").collapse();
        } else {
            $w("#columnStrip3").expand();
            $w("#columnStrip3").show();

I then get this…


… above every ‘q’ section from that point.

I have SO much to learn! Be gentle :wink:

My bad! Sorry!

let currentDynamicData;
console . log ( "DATA: " , currentDynamicData );

the red marked was wrong (incomplete).

Yes, like this → your variable is declared but not defined…

DECLARATION ---> let currentDynamicData;
D=$w("#dynamicDataseEFINITION -> ???t").getCurrentItem();

First you declare a variable…

let currentDynamicData;

…then you define the variable…

currentDynamicData=$w("#dynamicDataset").getCurrentItem();

So the RIGHT one would be …

let currentDynamicData;
currentDynamicData = $w("#dynamicDataset").getCurrentItem();

…or the direct way…

let currentDynamicData = $w("#dynamicDataset").getCurrentItem();

Hi Ninja,
Sorry (again). I’m lost! Is the code you highlighted as it should read, removing what’s after it? If so, isn’t the code following → ;= $w ( “#dynamicDataset” ). getCurrentItem (); defining it? If not, what should it look like?

$w.onReady(function(){
    $w("#dynamicDataset").onReady(async()=>{
        let currentDynamicData = $w("#dynamicDataset").getCurrentItem();
        console.log("Current-Dynamic-Data: ", currentDynamicData);
    //------------------------------------------------
    console.log("DATA-Q3: ", currentDynamicData.q3);
    console.log("DATA-Q4: ", currentDynamicData.q4);
    console.log("DATA-Q5: ", currentDynamicData.q5);
    console.log("DATA-Q6: ", currentDynamicData.q6);
    console.log("DATA-Q7: ", currentDynamicData.q7);
    console.log("DATA-Q8: ", currentDynamicData.q8);
    console.log("DATA-Q9: ", currentDynamicData.q9);
    console.log("DATA-Q10: ", currentDynamicData.q10);
    //.....
    //....
    //...
    //..
    //.
    //------------------------------------------------
        if(!currentDynamicData.q3){
            await $w("#columnStrip3").hide();
            $w("#columnStrip3").collapse();
        } else {
            $w("#columnStrip3").expand();
            $w("#columnStrip3").show();
        }
        if(!currentDynamicData.q4){
            await $w("#columnStrip4").hide();
            $w("#columnStrip4").collapse();
        } else {
            $w("#columnStrip4").expand();
            $w("#columnStrip4").show();
        }
        if(!currentDynamicData.q5){
            await $w("#columnStrip5").hide();
            $w("#columnStrip5").collapse();
        } else {
            $w("#columnStrip5").expand();
            $w("#columnStrip5").show();
        }
        if(!currentDynamicData.q6){
            await $w("#columnStrip6").hide();
            $w("#columnStrip6").collapse();
        } else {
            $w("#columnStrip6").expand();
            $w("#columnStrip6").show();
        }
        if(!currentDynamicData.q7){
            await $w("#columnStrip7").hide();
            $w("#columnStrip7").collapse();
        } else {
            $w("#columnStrip7").expand();
            $w("#columnStrip7").show();
        }
        if(!currentDynamicData.q8){
            await $w("#columnStrip8").hide();
            $w("#columnStrip8").collapse();
        } else {
            $w("#columnStrip8").expand();
            $w("#columnStrip8").show();
        }
        if(!currentDynamicData.q9){
            await $w("#columnStrip9").hide();
            $w("#columnStrip9").collapse();
        } else {
            $w("#columnStrip9").expand();
            
        if(!currentDynamicData.q10){
            await $w("#columnStrip10").hide();
            $w("#columnStrip10").collapse();
        } else {
            $w("#columnStrip10").expand();
            $w("#columnStrip10").show();
        }$w("#columnStrip9").show();
        }
        if(!currentDynamicData.q11){
            await $w("#columnStrip11").hide();
            $w("#columnStrip11").collapse();
        } else {
            $w("#columnStrip11").expand();
            $w("#columnStrip11").show();
        }
        if(!currentDynamicData.q12){
            await $w("#columnStrip12").hide();
            $w("#columnStrip12").collapse();
        } else {
            $w("#columnStrip12").expand();
            $w("#columnStrip12").show();
        }
        if(!currentDynamicData.q13){
            await $w("#columnStrip13").hide();
            $w("#columnStrip13").collapse();
        } else {
            $w("#columnStrip13").expand();
            $w("#columnStrip13").show();
        }
        if(!currentDynamicData.q14){
            await $w("#columnStrip14").hide();
            $w("#columnStrip14").collapse();
        } else {
            $w("#columnStrip14").expand();
            $w("#columnStrip14").show();
        }
        if(!currentDynamicData.q15){
            await $w("#columnStrip15").hide();
            $w("#columnStrip15").collapse();
        } else {
            $w("#columnStrip15").expand();
            $w("#columnStrip15").show();
        }
        if(!currentDynamicData.q16){
            await $w("#columnStrip16").hide();
            $w("#columnStrip16").collapse();
        } else {
            $w("#columnStrip16").expand();
            $w("#columnStrip16").show();
        }
        if(!currentDynamicData.q17){
            await $w("#columnStrip17").hide();
            $w("#columnStrip17").collapse();
        } else {
            $w("#columnStrip17").expand();
            $w("#columnStrip17").show();
        }
    });    
});

Check the OUTPUTS (RESULTS) on CONSOLE.