How to disable elements on refresh.

Ask the community
,
1

//import module for opening link with .to in another tab
import wixLocation from ‘wix-location’ ;

var HasBeenClicked
//element html1 is connected to a box with a script for a hack for loading the pg in a new tab, also #AudienceMember1 is connected to the url output in that script
//-- all the rest of the elements follow the functions below
export function AudienceMember1_click ( event ) { $w ( ‘#html1’ ). postMessage ( ‘POSTMESSAGEARGUMENT’ );

let hideOptions = {
‘delay’ : 500 ,
‘duration’ : 1000
};
$w ( “#AudienceMember1” ). hide ( “fade,hideOptions” );

//Timer Function in milliseconds
setTimeout ( function () {
$w ( “#AudienceMember1” ). show ( “fade” );
}, 7200000 );

export function AudienceMember2_click ( event ) { $w ( ‘#html2’ ). postMessage ( ‘POSTMESSAGEARGUMENT’ );

let hideOptions = {
‘delay’ : 500 ,
‘duration’ : 1000
};
$w ( “#AudienceMember2” ). hide ( “fade,hideOptions” );

setTimeout ( function () {
$w ( “#AudienceMember2” ). show ( “fade” );
}, 7200000 );

}

export function AudienceMember3_click ( event ) { $w ( ‘#html3’ ). postMessage ( ‘POSTMESSAGEARGUMENT’ );

let hideOptions = {
‘delay’ : 500 ,
‘duration’ : 1000
};
$w ( “#AudienceMember3” ). hide ( “fade,hideOptions” );

setTimeout ( function () {
$w ( “#AudienceMember3” ). show ( “fade” );
}, 7200000 );

}

export function AudienceMember4_click ( event ) { $w ( ‘#html4’ ). postMessage ( ‘POSTMESSAGEARGUMENT’ );

let hideOptions = {
‘delay’ : 500 ,
‘duration’ : 1000
};
$w ( “#AudienceMember4” ). hide ( “fade,hideOptions” );

setTimeout ( function () {
$w ( “#AudienceMember4” ). show ( “fade” );
}, 7200000 );

}

export function AudienceMember5_click ( event ) { $w ( ‘#html5’ ). postMessage ( ‘POSTMESSAGEARGUMENT’ );

let hideOptions = {
‘delay’ : 500 ,
‘duration’ : 1000
};
$w ( “#AudienceMember5” ). hide ( “fade,hideOptions” );

setTimeout ( function () {
$w ( “#AudienceMember5” ). show ( “fade” );
}, 7200000 );

}

export function AudienceMember6_click ( event ) { $w ( ‘#html6’ ). postMessage ( ‘POSTMESSAGEARGUMENT’ );

let hideOptions = {
‘delay’ : 500 ,
‘duration’ : 1000
};
$w ( “#AudienceMember6” ). hide ( “fade,hideOptions” );

setTimeout ( function () {
$w ( “#AudienceMember6” ). show ( “fade” );
}, 7200000 );

}

export function AudienceMember7_click ( event ) { $w ( ‘#html7’ ). postMessage ( ‘POSTMESSAGEARGUMENT’ );

let hideOptions = {
‘delay’ : 500 ,
‘duration’ : 1000
};
$w ( “#AudienceMember7” ). hide ( “fade,hideOptions” );

setTimeout ( function () {
$w ( “#AudienceMember7” ). show ( “fade” );
}, 7200000 );

}

export function AudienceMember8_click ( event ) { $w ( ‘#html8’ ). postMessage ( ‘POSTMESSAGEARGUMENT’ );

let hideOptions = {
‘delay’ : 500 ,
‘duration’ : 1000
};
$w ( “#AudienceMember8” ). hide ( “fade,hideOptions” );

setTimeout ( function () {
$w ( “#AudienceMember8” ). show ( “fade” );
}, 7200000 );

}

export function AudienceMember9_click ( event ) { $w ( ‘#html9’ ). postMessage ( ‘POSTMESSAGEARGUMENT’ );

let hideOptions = {
‘delay’ : 500 ,
‘duration’ : 1000
};
$w ( “#AudienceMember9” ). hide ( “fade,hideOptions” );

setTimeout ( function () {
$w ( “#AudienceMember9” ). show ( “fade” );
}, 7200000 );

}

export function AudienceMember10_click ( event ) { $w ( ‘#html10’ ). postMessage ( ‘POSTMESSAGEARGUMENT’ );

let hideOptions = {
‘delay’ : 500 ,
‘duration’ : 1000
};
$w ( “#AudienceMember10” ). hide ( “fade,hideOptions” );

setTimeout ( function () {
$w ( “#AudienceMember10” ). show ( “fade” );
}, 7200000 );
}

How to disable elements on refresh? When I refresh the page all of the elements reset to their original state. They do not stay hidden as the code is written, could someone help me iron this out and tone the code to a functional point?

2

If you wish to keep the recent states even after page refresh, you will have to store the states in the browser cache (local or session), and once the $w got ready, retrieve the stored states and apply them to the elements.
See:
https://www.wix.com/velo/reference/wix-storage/session
https://www.wix.com/velo/reference/wix-storage/local

3 

$w . onReady ( **function**  () { 
    **let**  btn2hasBeenClicked  =  local . getItem ( "btn2Clicked" ) 

    **if**  ( btn2hasBeenClicked ) { 
        $w ( "#button2" ). hide 
    }  **else**  { 
        $w ( "#button2" ). show () 
        } 
    }); 
    
    export function  button2_click ( event ) { 
        local . setItem ( "btn2Clicked" ,  "clicked" ) 
        $w ( "#button2" ). enable 

        setTimeout ( **function** () { 
    $w ( "#button2" ). show ( "fade" );  
  },  10000 ); 
    } 

    ``` 

I tried this on a test page, how would I implement onReady function, and storage module into my first posted code.  

Is the code snippet above properly structured?
4

You have extra ``` at the beginning and the end of your code. Remove them (if they’re there. But anyway I don’t understand the logics, if the button is hidden or disabled it is not clickable.

If you wish to have many statuses, you can store them together like:

let states= {};
$w.onReady(() => {
const storedStates = local.getItem('pageStatus');
if(storedState){
states = JSON.parse(storedStates);
//now start populating for example:
$w('#dropdwon1').value = states.dropdwon1;
 //and for the buttons as well
}
$w('#button1, #button2').onClick(({target})=> {
 states[target.id] = 'clicked';
 storeData();
});
 $w('#dropdwon1').onChange(({target})=>{
  states[target.id] = target.value;
  storeData();
 });
})
function storeData(){
	 local.setItem('pageStatus', JSON.stringify(states));
})
5

Yes I wanted to try at disabling the buttons here, but I was unsuccessful. I’m a bit novice, I don’t understand what you did there with .json etc :D.

6

@jonatandor35 and what is #dropdwon element, i only have 2 button elements on my test page right now

7

@freethomasv it’s just an example. If you don’t have a dropdown, just remove it from the code.

8

@freethomasv The code with the JSON is just a way to save all the button states together instead of one by one. If you only have 2 buttons, you can ignore it.

9

@jonatandor35 So it would look more like this?

let states = {};
$w . onReady (() => {
const storedStates = local . getItem ( ‘pageStatus’ );
if ( storedStates ){
states = JSON . parse ( storedStates );
//and for the buttons as well
}
$w ( ‘#button1, #button2’ ). onClick (({ target })=> {
states [ target . id ] = ‘clicked’ ;
storeData ();
});
})
function storeData ( ){
local . setItem ( ‘pageStatus’ , JSON . stringify ( states ));
})

where would I add this into the existing original code? or the example 2 button test page?

10

@freethomasv instead of this line:

//and for the buttons as well

Have something like:

if(states?.button1){
//do whatever you want
}
if(states?.button2){
//do whatever you want
}