Setting the Toggle component's state on / off on page load without firing the 'value changed' event

[decodingsand]

I am using a toggle component to turn the 'like' state of the page on and off. I have added a 'value change' event to this toggle so that it can invoke a datasource to save the new state as it is turned on and off. My database column is a string. So "on" / "off".

I would like to have the latest state of this toggle (on/off) auto-populated on the page load.

Problem: I have mapped the result of the service response (on/off) directly to the page ui. This results in the page load setting the toggle correctly, but this in turn fires the 'value changed' event setup to save the users last like. This saves the toggle state again the the database.

I have also tried to set a datasource - storage variable and then use the set property on page load, but this approach does not toggle the control on even if the storage variable is now "on" from the successful database call.

How do I setup a read from database - page ui without triggering the 'value changed' event?

[Maryna Brodina]

Hello!

It is better to save toggle value to storage variable when it changes its state. On page show event set this value from variable.

[decodingsand]

Hi Maryna, thanks for your prompt reply.

I have tried that solution.

1) perform data request from db
2) set storage vatiable
3) on page load event = javascript (see below)
4) load correctly changes the toggle to the same as the database value just read but then fires the 'value changed' event on my toggle (uiVideoViewLike) which was setup to save the like when the user changed it.

I do not want the 'value changed' event to be fired when I javascript update the toggle because it saves a duplicate of the latest toggle state (set by page load event) to the database.

var video_like = localStorage.getItem("video_like_storeVar");

if(video_like == "on"){
Appery("uiVideoViewLike").val("on").refresh();
} else {
Appery("uiVideoViewLike").val("off").refresh();
}

[Alena Prykhodko]

Hello,

You are invoking refresh each time you change component state, it is usual behavior.
We can advice 2 workarounds:

I) Add a flag
II) Emulate its behavior

I)
1) Add variable that will be as a flag that says whether it fakes toggle or not
2) Add flag to your snippet from previous post
3) Each time valuechanged is invoked check whether your snipped changed state or not , and reset flag value to false;

II) Change component's html and styles via js , and save properties you need in your code.

[decodingsand]

Hi alena, Thanks for the update.

Sounds like a plan.

In that case can you share the code or link with me that show how to invoke a service from inside a javascript.

If my logic that checks the flag lives inside a javascript then I have to invoke the service from inside the javascript - cant use the Appery event Invoke Service as it does not allow for logic.

Thanks
Mark

[Maryna Brodina]

Hello!

Please check this post https://getsatisfaction.com/apperyio/...

[decodingsand]

Hi, when I try this same example on a select object, it does not fire the event changed.

Appery("someSelectUI").val("3").refresh();

With the Toggle component the valueChanged event is fired, with the Select component the valueChanged event does not fire.

Is there an international difference in the event firing?
They both get a refresh instruction.

[Yurii Orishchuk]

Hi Decodingsand,

You can use following code to change select value with trigger "change" event:

pre

//Here is you need replace "mobileselectmenu_16" with your select component name.
//Also you need to change "defaultSelectValue" with your default value.
Appery("mobileselectmenu_16").val("defaultSelectValue");
Appery("mobileselectmenu_16").selectmenu("refresh", true);
Appery("mobileselectmenu_16").trigger("change");

/pre

Regards.