Page 1 of 3

How to determine the state of a toggle switch?

Posted: Tue Jul 30, 2013 11:34 pm
by John Herdean

Hi, I would like to determine the state of a toggle switch and do something if its toggled, for example:

---------------------------------------------------------------

var a = mobiletoggle_71;
if (a == toggled) {
Appery('mobilebutton_76').hide();
}
else Appery('mobilebutton_76').show();

// mobiletoggle_71 is the name of the toggle switch

--------------------------------------------------------------------

I need clarification on this because Im not sure what is the correct synatx for the lines 1 and 2 are? Thanks.


How to determine the state of a toggle switch?

Posted: Tue Jul 30, 2013 11:35 pm
by John Herdean

ohh and what is the actual value of the toggle switch? for On and for Off? thanks


How to determine the state of a toggle switch?

Posted: Tue Jul 30, 2013 11:44 pm
by maxkatz

This should be your guide: http://docs.appery.io/javascript-api/, plus jQuery Mobile docs. You need to use Appery("component_name").val().


How to determine the state of a toggle switch?

Posted: Tue Jul 30, 2013 11:50 pm
by John Herdean

ok that solves line 1, but what about line 2?


How to determine the state of a toggle switch?

Posted: Tue Jul 30, 2013 11:53 pm
by maxkatz

a == 'on'


How to determine the state of a toggle switch?

Posted: Tue Jul 30, 2013 11:56 pm
by John Herdean

never mind, i think i got it. The value is whatever text i put in. Thats what i thought, i needed to be sure.


How to determine the state of a toggle switch?

Posted: Wed Jul 31, 2013 12:59 am
by John Herdean

Hi again, so Im playing with the toggle switch and making progress, but Im stuck on a couple issues: 1) it doesnt turn back to on when value changes; and 2) its not storing the correct value into localSTorage for me. So, heres my final code that Im running on Value Change:

-----------------------------------------------------------------

var a = Appery('pro19_auto_checkin');
localStorage.setItem('pro19_auto_checkin', a);

if (a == 'on') {
Appery('change_on_off').hide();
}
else Appery('change_on_off').show();

-----------------------------------------------------------------

1):
So, what it does is that lets say the initial state is On. Then I toggle it to Off. That part works and hides 'change_on_off' but when I try to turn the toggle back to On it does not hide 'change_on_off'

Is there an issue running the JS off of Value Change or there a better event to run it off of? Or is there something wrong with my code?

2):
The value of localStorageItem 'pro19_auto_checkin' is always '[object Object]' - I need it to be either 'on' or 'off' depending on the state. WHat is wrong here and why am I getting such an odd value? And how do i fix this issue?


How to determine the state of a toggle switch?

Posted: Wed Jul 31, 2013 8:16 am
by Maryna Brodina

Hello! Please use codevar a = Appery('pro19_auto_checkin').val();/code instead of codevar a = Appery('pro19_auto_checkin');/code


How to determine the state of a toggle switch?

Posted: Wed Jul 31, 2013 1:45 pm
by John Herdean

Great, that did the trick for both of my problems. Killed two birds with one stone, way to go :)


How to determine the state of a toggle switch?

Posted: Wed Jul 31, 2013 2:11 pm
by John Herdean

Ok, now that I got the basics down, I need to read from localStorage to determine what the state of the toggle switch should be on Load. I tried to set the property from local storage where i have the value to be 'off' and when the page loads the toggle is still On. Is there something else i need to do to toggle On/Off from local storage on Load?

Image