locked
Change toggleswitch state from change event of nearby input range

    Question

  • Hi,

    I want to change the state of a toggleswitch (class switch) from a change event on an input range element (class dimmer). The toggleswitch and input range elements are both inside a binding template.

    This actually controls a light switch/dimmer. If the dimmer value is greater then 0 the switch state should also be switched on. If the dimmer value is 0 the switch state should be switched off.

    <div id="switchSection" class="section hidden" data-win-control="WinJS.UI.HubSection" data-win-options="{ isHeaderStatic: true }" data-win-res="{ winControl: {'header': 'Switches'} }">
                        <div id="switchTemplate" data-win-control="WinJS.Binding.Template">
                            <div class="container">
                                <span data-win-bind="innerText: name"></span>
                                <div class="switch" data-win-control="WinJS.UI.ToggleSwitch" data-win-bind="winControl.checked: status hubPage.convertStatusToTrueFalse; alt: id"></div>
                                <input class="dimmer" type="range" data-win-bind="value: dimlevel; alt: id; hidden: type hubPage.convertTypeToTrueFalse" /><br />
                            </div>
                        </div>
                        <div id="switchContainer"></div>
                    </div>

    With jquery you can find the closest element with the .closest(selector). How can do the same with WinJS ?

    Monday, November 10, 2014 11:36 AM

Answers

  • Hi RobbyCeyssens,

    You can use JQuery 2.0+ version in WinJS, then you can use .cloest() in WinJS, see this for more information: http://blogs.windows.com/buildingapps/2013/07/10/jquery-and-winjs-working-together-in-windows-store-apps/

    However I don't find any API in WinJS can do like cloest(), but if you need, you can wrote some JavaScript to traversing through the DOM tree.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by RobbyCeyssens Wednesday, November 12, 2014 8:08 AM
    Tuesday, November 11, 2014 5:52 AM
    Moderator