[mattie63]

Hi,

I would like to make a javascrip for The Toggle widget “on/off” button so a user can choose the start up language of his or hers choice, instead of them having to keep on choosing their language each time the app starts.

I have tried to follow your description here:
http://www.genuitec.com/mobile/docs/widgetReference/widgetReference.html

I do not know much about javascrip and would like to know if you have a how to for this?
I have tried to make a littel how to if you can help me komplete the javascript in it this would be great 🙂

http://mattielegros.dk/images/Mobione/Test_Widget.zip
(All the images below are from this ziped Mobione file)

I would like when the “toggle” is set to “off” on both languages the app will start on this screen:

when the “toggle” is set to “ON” on Language “1” the app starts on this screen:

and
when the “toggle” is set to “ON” on Language “2” the app starts on this screen:

But i would also like to have is either the app giving me a warning on “NOT to have both Toggled to ON” or if it is possible in the Javascript to “Disable” one “ON” toggle when another is chosen.

i hope you can help
thanks Mattie

[Brandon]

Try to use an if-else statement

if ($(‘#m1-yourForm-toggle1’).val() == ‘On’ && $(‘#m1-yourForm-toggle2’).val() == ‘On’)
{
alert(‘Both toggles are on’);
}

Or a single switch
if ($(‘#m1-yourForm-toggle1’).val() == ‘On’ )
{
//set language one code
}else
{
//set language two code
}

or toggle opposing switch

if ($(‘#m1-yourForm-toggle1’).val() == ‘On’ )
{
$(‘#m1-toggle2 input’).attr(‘checked’, false)
}

[mattie63]

hi,

As i wrote i don’t know much about Javascript but i am willing to learn.

if i choose this one:

if ($(‘#m1-Language1.mobi-toggle1’).val() == ‘On’ && $(‘#m1-Language2.mobi-toggle2’).val() == ‘On’)
{
alert(‘Both toggles are on’);
}

Am i missing something? as it does not give me the alert.

I also need it to “Remember” my choice the next time i open the app. (this is the point of making this Javascript)
thanks 🙂

[Brandon]

Dont use the extension of the page, just the page name and see if that works.
$(‘#m1-Language1.mobi-toggle1’).val()

$(‘#m1-Language1-toggle1’).val()

to save it you will need to load the value into local storage then recall it i at startup,something like:

localStorage.sertItem(‘toggle1Val’, $(‘#m1-Language1.mobi-toggle1’).val() );

then in startup use that to check and an if statement to set the desired value.

[mattie63]

is this written in the “Design Center” in the code for the widget once “run JavaScript” has been chosen on what actions is to be taken on change, or is it written in the “test center” tools – view source – ChooseLanguage.js or the chooseLanguage_Custom.js

what would be the javascript “short code” in design center?

[mattie63]

Anyone fresh on showing me how it is done in my Test Widget app zip file?

Attachments:

You must be logged in to view attached files.

[Brandon]

I dont think mobione likes files with spaces in the names. I would rename the file. See attached.

Attachments:

You must be logged in to view attached files.

[mattie63]

this did the trick!

it was okay to insurt the code in this area:

But it still does not remember my choice.

This my code in “toggle1”

//alert($(‘#m1-Chooselanguage-toggle1 input’).is(‘:checked’))
if ($(‘#m1-Chooselanguage-toggle1 input’).is(‘:checked’)== true && $(‘#m1-Chooselanguage-toggle2 input’).is(‘:checked’)== true)
{
alert(‘Please only choose one’);
}

localStorage.sertItem(‘toggle1Val’, $(‘#m1-Language1-toggle1’).val() );

would i need to have a new IF statement in this for it to work?

[Brandon]

You need to first write the value to local storage when it is toggled (also make sure to always check the syntax, you also have a spelling error. Here is an untested sample.

//save values to localstorage
localStorage.setItem(‘toggle1Val’, ($(‘#m1-Chooselanguage-toggle1 input’).is(‘:checked’) );
localStorage.setItem(‘toggle2Val’, ($(‘#m1-Chooselanguage-toggle2 input’).is(‘:checked’) );

recall values from local storage, you can place this in the load function to set it on startup, or in the page transition to load it when the page is loaded.

$(‘#m1-Chooselanguage-toggle1 input’).is(‘:checked’,localStorage.setItem(‘toggle1Val’));
$(‘#m1-Chooselanguage-toggle2 input’).is(‘:checked’,localStorage.setItem(‘toggle2Val’));

[mattie63]

Thank for trying to help but i do not follow you anymore. I am not getting it to work in my little example.
Maybe if the example was made in a .mobi file so i could see it in motion.

thanks

[support-octavio]

Hi Mattie,

To learn more about localstorage please take a look at this demo: http://www.genuitec.com/support-genuitec/viewtopic.php?f=14&t=2251

So, you need to save the value of both toggle buttons every time that toggle is changed. Then, in phoneui.documentReadyHandler function in your _custom.js file you pull those values that you save and do the comparisons to see what screen should be shown.

[mattie63]

@CincyPlanet wrote:

You need to first write the value to local storage when it is toggled (also make sure to always check the syntax, you also have a spelling error. Here is an untested sample.

//save values to localstorage
localStorage.setItem(‘toggle1Val’, ($(‘#m1-Chooselanguage-toggle1 input’).is(‘:checked’) );
localStorage.setItem(‘toggle2Val’, ($(‘#m1-Chooselanguage-toggle2 input’).is(‘:checked’) );

recall values from local storage, you can place this in the load function to set it on startup, or in the page transition to load it when the page is loaded.

$(‘#m1-Chooselanguage-toggle1 input’).is(‘:checked’,localStorage.setItem(‘toggle1Val’));
$(‘#m1-Chooselanguage-toggle2 input’).is(‘:checked’,localStorage.setItem(‘toggle2Val’));

So for this to work this is what i have tried to type in the “run javascript Action Editor”:

//alert($(‘#m1-Chooselanguage-toggle1 input’).is(‘:checked’))
if ($(‘#m1-Chooselanguage-toggle1 input’).is(‘:checked’)== true && $(‘#m1-Chooselanguage-toggle2 input’).is(‘:checked’)== true)
{
alert(‘Both are checked’);
}

// save values to localstorage
localStorage.setItem(‘toggle1Val’, ($(‘#m1-Chooselanguage-toggle1 input’).is(‘:checked’) );
localStorage.setItem(‘toggle2Val’, ($(‘#m1-Chooselanguage-toggle2 input’).is(‘:checked’) );

// recall values from local storage
$(‘#m1-Language1-toggle1 input’).is(‘:checked’,localStorage.setItem(‘toggle1Val’));
$(‘#m1-Language2-toggle2 input’).is(‘:checked’,localStorage.setItem(‘toggle2Val’));

But this does not seem logical it is as if i am missing something.
When i choose input toggle1 “Chooselanguage-toggle1” it needs to load “Language1” screen and when i choose input toggle2 “Chooselanguage-toggle2” it needs to load “Language2” screen .

Maybe it is my “event handlers” that are not correct.

The spelling error you are referring to is the “r” in “sertItem” as to the correct “setItem” or are you referring to another?
hope you can help 🙂

[Author]

Posts