Published Page displays Placeholder Content, while preview mode displays expected page.

Ask the community
,
1

Hi,
Created a page with charts and a few text field variables updated based on the values from the data.
Previewed the page and it displays correctly as shown below:

1109×871 40.9 KB

After publishing the page, the text field are displayed with the placeholder text.

1432×873 38.7 KB

Not sure what the issue is. I’m a complete amateur with coding, used some example solutions to code this. If it was an issue with the code, wouldn’t the preview also display with placeholder text.

Would really appreciate any help. Thanks

2

  1. check the collection permissions.

  2. Make sure you remember to sync from sandbox to live.

3

The data for the above chart is directly initialized in the code as the data is quite small. I haven’t created a database for it.

let prod = { 2016 : [ 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1.045 , 1.446 , 1.206 , 1.107 ], 2017 : [ 1.176 , 1.299 , 1.443 , 1.399 , 1.33 , 1.086 , 1.172 , 1.157 , 1.11 , 0.94 , 0.958 , 1.164 ], 2018 : [ 1.301 , 1.332 , 1.466 , 1.331 , 1.263 , 1.023 , 0.889 , 0.943 , 1.202 , 1.365 , 0.232 , 0.958 ], 2019 : [ 1.259 , 1.283 , 1.443 , 1.387 , 1.333 , 1.147 , 1.005 , 0.957 , 1.032 , 1.092 , 1.123 , 0.988 ], 2020 : [ 1.111 , 1.149 , 1.368 , 1.41 ] };

4

@prathikr025 maybe you’re using an http URL instead of https

5

@jonatandor35 No, J.D. Its https

6

@prathikr025 do you see any error in the console?

7

@jonatandor35

1889×829 41.4 KB

No Errors while previewing

8

Hi J.D. Please find the code. Please excuse the formatting or any other noob errors. Some variables have been initialized twice, but correcting them doesn’t get the expected result.

let year = 2019;
let prod = {
 2016: [0,0 , 0, 0, 0, 0,0,0,1.045,1.446,1.206,1.107],
 2017: [1.176,1.299,1.443,1.399,1.33,1.086,1.172,1.157,1.11,0.94,0.958,1.164],
 2018: [1.301,1.332,1.466,1.331,1.263,1.023,0.889,0.943,1.202,1.365,0.232,0.958],
 2019: [1.259,1.283,1.443,1.387,1.333,1.147,1.005,0.957,1.032,1.092,1.123,0.988],
 2020: [1.111,1.149,1.368,1.41]
};

var sum = prod[$w('#year').value].reduce(function(a, b){
 return a + b;
    }, 0);
 
    console.log(sum);
    $w("#text56").text = sum.toString();
    $w("#text56").text =$w("#text56").text.slice(0, 5) ;

const avg=sum/prod[year].filter(item=>item!==0).length;
const avg_day=(avg/30)*100;
    console.log(avg);
    $w("#text57").text = avg_day.toString();
    $w("#text57").text =$w("#text57").text.slice(0, 5) ;
 
 
    $w("#text56").text = sum.toString();
    $w("#text56").text =$w("#text56").text.slice(0, 5) ;

const sixteen= prod[2016].reduce((a,b) => a + b, 0);
const seventeen= prod[2017].reduce((a,b) => a + b, 0);
const eighteen= prod[2018].reduce((a,b) => a + b, 0);
const nineteen= prod[2019].reduce((a,b) => a + b, 0);
const twenty= prod[2020].reduce((a,b) => a + b, 0);
const total=sixteen+seventeen+eighteen+nineteen+twenty;
    $w("#text61").text = total.toString();
    $w("#text61").text =$w("#text61").text.slice(0, 5) ;

const avoid=total*0.8;
    $w("#text64").text = avoid.toString();
    $w("#text64").text =$w("#text64").text.slice(0, 5) ;

const trees=avoid*0.003*1000;
    $w("#text66").text = trees.toString();
    $w("#text66").text =$w("#text66").text.slice(0, 5) ;

$w.onReady(() =>{
    $w("#html1").postMessage(prod[year]);
    $w("#html1").onMessage((event)=>{

 if(event.data.type === 'ready'){
            $w("#html1").postMessage(prod[year]);
        }
        }); 
});


export function year_change(event) {
        year = $w('#year').value;
    $w("#html1").postMessage(prod[year]); 
 
 var sum = prod[$w('#year').value].reduce(function(a, b){
 return (a + b);
    }, 0);
    console.log(sum);

 const avg=sum/prod[year].filter(item=>item!==0).length;
 const avg_day=(avg/30)*100;
    console.log(avg);
    $w("#text57").text = avg_day.toString();
    $w("#text57").text =$w("#text57").text.slice(0, 5) ;
 
 
    $w("#text56").text = sum.toString();
    $w("#text56").text =$w("#text56").text.slice(0, 5) ;
 
}
9

@prathikr025 The question was not about the preview but about the live site. Do you get any error in the browser console?

10

Yes, there seems to be a lot of issues.

1674×690 87.3 KB

11

You must use the $w inside the onReady() function.
Delete this line:

$w.onReady(() =>{

and re-write it at the begging of your code.

12 
@J. D. 
$w.onReady(() =>{

let year = 2019;
let prod = {
 2016: [0,0 , 0, 0, 0, 0,0,0,1.045,1.446,1.206,1.107],
 2017: [1.176,1.299,1.443,1.399,1.33,1.086,1.172,1.157,1.11,0.94,0.958,1.164],
 2018: [1.301,1.332,1.466,1.331,1.263,1.023,0.889,0.943,1.202,1.365,0.232,0.958],
 2019: [1.259,1.283,1.443,1.387,1.333,1.147,1.005,0.957,1.032,1.092,1.123,0.988],
 2020: [1.111,1.149,1.368,1.41]
};

var sum = prod[$w('#year').value].reduce(function(a, b){
 return a + b;
    }, 0);
    console.log(sum);
    $w("#text56").text = sum.toString();
    $w("#text56").text =$w("#text56").text.slice(0, 5) ;
 

var avg=sum/prod[year].filter(item=>item!==0).length;
var avg_day=(avg/30)*100;
    console.log(avg);
    $w("#text57").text = avg_day.toString();
    $w("#text57").text =$w("#text57").text.slice(0, 5) ;
 
 
    $w("#text56").text = sum.toString();
    $w("#text56").text =$w("#text56").text.slice(0, 5) ;

const sixteen= prod[2016].reduce((a,b) => a + b, 0);
const seventeen= prod[2017].reduce((a,b) => a + b, 0);
const eighteen= prod[2018].reduce((a,b) => a + b, 0);
const nineteen= prod[2019].reduce((a,b) => a + b, 0);
const twenty= prod[2020].reduce((a,b) => a + b, 0);
const total=sixteen+seventeen+eighteen+nineteen+twenty;
    $w("#text61").text = total.toString();
    $w("#text61").text =$w("#text61").text.slice(0, 5) ;

const avoid=total*0.8;
    $w("#text64").text = avoid.toString();
    $w("#text64").text =$w("#text64").text.slice(0, 5) ;

const trees=avoid*0.003*1000;
    $w("#text66").text = trees.toString();
    $w("#text66").text =$w("#text66").text.slice(0, 5) ;


    $w("#html1").postMessage(prod[year]);
    $w("#html1").onMessage((event)=>{

 if(event.data.type === 'ready'){
            $w("#html1").postMessage(prod[year]);
        }
        }); 

export function year_change(event) {
 const year = $w('#year').value;
    $w("#html1").postMessage(prod[year]); 
 
    $w("#text57").text = avg_day.toString();
    $w("#text57").text =$w("#text57").text.slice(0, 5) ;
 
 
    $w("#text56").text = sum.toString();
    $w("#text56").text =$w("#text56").text.slice(0, 5) ;
 
}


});

Now i’m getting an error stating that the export and import function can only be used at the top level

13

Made some changes, as per the example solution https://www.wix.com/corvid/example/create-a-custom-chart .


$w.onReady(() =>{

 let year = 2019;
 let prod = {
 2016: [0,0 , 0, 0, 0, 0,0,0,1.045,1.446,1.206,1.107],
 2017: [1.176,1.299,1.443,1.399,1.33,1.086,1.172,1.157,1.11,0.94,0.958,1.164],
 2018: [1.301,1.332,1.466,1.331,1.263,1.023,0.889,0.943,1.202,1.365,0.232,0.958],
 2019: [1.259,1.283,1.443,1.387,1.333,1.147,1.005,0.957,1.032,1.092,1.123,0.988],
 2020: [1.111,1.149,1.368,1.41]
    };

 var sum = prod[$w('#year').value].reduce(function(a, b){
 return a + b;
    }, 0);
    console.log(sum);
    $w("#text56").text = sum.toString();
    $w("#text56").text =$w("#text56").text.slice(0, 5) ;
 

 var avg=sum/prod[year].filter(item=>item!==0).length;
 var avg_day=(avg/30)*100;
    console.log(avg);
    $w("#text57").text = avg_day.toString();
    $w("#text57").text =$w("#text57").text.slice(0, 5) ;
 
 
    $w("#text56").text = sum.toString();
    $w("#text56").text =$w("#text56").text.slice(0, 5) ;

 const sixteen= prod[2016].reduce((a,b) => a + b, 0);
 const seventeen= prod[2017].reduce((a,b) => a + b, 0);
 const eighteen= prod[2018].reduce((a,b) => a + b, 0);
 const nineteen= prod[2019].reduce((a,b) => a + b, 0);
 const twenty= prod[2020].reduce((a,b) => a + b, 0);
 const total=sixteen+seventeen+eighteen+nineteen+twenty;
    $w("#text61").text = total.toString();
    $w("#text61").text =$w("#text61").text.slice(0, 5) ;

 const avoid=total*0.8;
    $w("#text64").text = avoid.toString();
    $w("#text64").text =$w("#text64").text.slice(0, 5) ;

 const trees=avoid*0.003*1000;
    $w("#text66").text = trees.toString();
    $w("#text66").text =$w("#text66").text.slice(0, 5) ;


    $w("#html1").postMessage(prod[year]);
    $w("#html1").onMessage((event)=>{

 if(event.data.type === 'ready'){
            $w("#html1").postMessage(prod[year]);
        }
        }); 


 
 

});

export function year_change(event) {
        year = $w('#year').value;
        $w("#html1").postMessage(prod[year]); 
 
        $w("#text57").text = avg_day.toString();
        $w("#text57").text =$w("#text57").text.slice(0, 5) ;
 
 
        $w("#text56").text = sum.toString();
        $w("#text56").text =$w("#text56").text.slice(0, 5) ;
}

The error now shows under the function year_change(event):
year, prod, avg_day,sum is not defined

14

@prathikr025 before the $w.onReady line, write:

let sum;

and remove the var from this line:

var sum = prod[$w('#year').value].reduce(function(a, b){
15

@jonatandor35 Hi Did the change, the publish worked now. But one of the formulas that i set up before is reacting strangely now. “avg_day”. It was working fine before.

16

Also the not initialized error was shown for the other variables too, so moved all the variables before $w.onReady.

let sum;
let avg_day;
let avg;
let year = 2019;
let prod = {
 2016: [0,0 , 0, 0, 0, 0,0,0,1.045,1.446,1.206,1.107],
 2017: [1.176,1.299,1.443,1.399,1.33,1.086,1.172,1.157,1.11,0.94,0.958,1.164],
 2018: [1.301,1.332,1.466,1.331,1.263,1.023,0.889,0.943,1.202,1.365,0.232,0.958],
 2019: [1.259,1.283,1.443,1.387,1.333,1.147,1.005,0.957,1.032,1.092,1.123,0.988],
 2020: [1.111,1.149,1.368,1.41]
    };
$w.onReady(() =>{

 
    sum = prod[$w('#year').value].reduce(function(a, b){
 return a + b;
    }, 0);
    console.log(sum);
    $w("#text56").text = sum.toString();
    $w("#text56").text =$w("#text56").text.slice(0, 5) ;
 

    avg=sum/prod[year].filter(item=>item!==0).length;
    avg_day=(avg/30)*100;
    console.log(avg);
    $w("#text57").text = avg_day.toString();
    $w("#text57").text =$w("#text57").text.slice(0, 5) ;
 
 
    $w("#text56").text = sum.toString();
    $w("#text56").text =$w("#text56").text.slice(0, 5) ;

 const sixteen= prod[2016].reduce((a,b) => a + b, 0);
 const seventeen= prod[2017].reduce((a,b) => a + b, 0);
 const eighteen= prod[2018].reduce((a,b) => a + b, 0);
 const nineteen= prod[2019].reduce((a,b) => a + b, 0);
 const twenty= prod[2020].reduce((a,b) => a + b, 0);
 const total=sixteen+seventeen+eighteen+nineteen+twenty;
    $w("#text61").text = total.toString();
    $w("#text61").text =$w("#text61").text.slice(0, 5) ;

 const avoid=total*0.8;
    $w("#text64").text = avoid.toString();
    $w("#text64").text =$w("#text64").text.slice(0, 5) ;

 const trees=avoid*0.003*1000;
    $w("#text66").text = trees.toString();
    $w("#text66").text =$w("#text66").text.slice(0, 5) ;


    $w("#html1").postMessage(prod[year]);
    $w("#html1").onMessage((event)=>{

 if(event.data.type === 'ready'){
            $w("#html1").postMessage(prod[year]);
        }
        }); 
});

export function year_change(event) {
 
        year = $w('#year').value;
        $w("#html1").postMessage(prod[year]); 
 
        avg=sum/prod[year].filter(item=>item!==0).length;
        avg_day=(avg/30)*100;
        console.log(avg);
        $w("#text57").text = avg_day.toString();
        $w("#text57").text =$w("#text57").text.slice(0, 5) ;
 
 
        sum = prod[$w('#year').value].reduce(function(a, b){
 return a + b;
    }, 0);
    console.log(sum);
        $w("#text56").text = sum.toString();
        $w("#text56").text =$w("#text56").text.slice(0, 5) ;
}

Latest Code.

17

@prathikr025 does everything work well now?

18

@jonatandor35

1275×589 22.9 KB

1263×559 22.1 KB

Hi, This was the issue I Mentioned, for some reason the values of “avg generation per day” changed each time i selected the year 2016.

19

Hi J.D,
Will work on the issue by playing around with the variables. If the issue doesn’t get resolved, will just have to remove the variable.

Thank you for your assistance.