locked
Toggle switch and settings flyout

    Question

  • Hi,

    I have a toggle switch in the settings flyout. When I change the toggle to on it doesn't remember its value, next time I open the settings flyout the toggle is off.

    Another problem I'm facing is that the eventhandler does not works when the state of the toggle changes.

    Any idea how can I solve it?

    settings.html

    <div id="visualFlyout" data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{width:'narrow'}">
            <div class="win-content">
                <div class="win-settings-section">
                    <div id="remember" data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{ title: 'Remember' }" /></div>
                </div>
            </div>
    </div>

    settings.js

    (function () {
        "use strict";
    
        var appdata = Windows.Storage.ApplicationData;
    
        var page = WinJS.UI.Pages.define("charms/visual.html", {
            ready: function (element, options) {
    
                var toggle = document.querySelector("#remember").winControl;
                var remember = appdata.current.roamingSettings.values["remember"];
                remember = !remember ? false : remember; // false if value doesn’t exist
                toggle.checked = remember;
    
                toggle.addEventListener("change", function (e) {
                    appdata.current.roamingSettings.values["remember"] = e.target.winControl.checked;
                });
    
                
            }
            
        });
    
    })();


    • Edited by Rodrigo_H Monday, April 07, 2014 3:33 PM
    Monday, April 07, 2014 3:31 PM

Answers

  • If you would like the toggle to remember your value every time you open the settings flyout, you need to read the file that you saved your settings to and apply the value to your control. For example, you saved your value to the roaming settings, so you need to read your value from that folder and apply the value to your control. 
    The "change" event works fine for me, I can even use the "click" event to fire an event. Try making sure your js file is correctly linked to the html page for your settings flyout. You can test this by placing a console.log('test') in your code so that it runs immediately when you open the flyout. Hope this helps!
    • Proposed as answer by datQkiD2 Monday, April 07, 2014 5:31 PM
    • Marked as answer by Rodrigo_H Monday, April 07, 2014 6:10 PM
    Monday, April 07, 2014 5:29 PM