Detect state change on a ratchet toggle

Question

Detect state change on a ratchet toggle

743 Views Asked by spiderplant0 At 15 September 2015 at 20:08

I cant figure out how you detect the user changing a ratchet toggle element in javascript. In the code below I have got it to detect clicking on the toggle but it doesn't work if the user slides the toggle. Is there a standard correct way of detecting toggle state change? (A documentation link would be fine here - I couldn't find anything).

(BTW, I am currently just running in the firefox browser to evaluate Ratchet, before I add to a Cordova project.)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ratchet template page</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <link href="/My_Webs/experiments/cordova/ratchet-example/css/ratchet.css" rel="stylesheet">
    <link href="/My_Webs/experiments/cordova/ratchet-example/css/ratchet-theme-ios.css" rel="stylesheet">
    <script src="/My_Webs/experiments/cordova/ratchet-example/js/ratchet.js"></script>
    <script src="/My_Webs/experiments/cordova/ratchet-example/js/jquery-1.11.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("body").on(
                "click",
                "#toggle1",
                function(e){
                console.log("toggle1 clicked " + $("#toggle1 .toggle").hasClass("active"));
            });

        });
    </script>
  </head>

  <body>
    <div class="content">
        <ul class="table-view">
          <li class="table-view-cell" id="toggle1">
            Item 1
            <div class="toggle">
              <div class="toggle-handle"></div>
            </div>
          </li>
          </li>
        </ul>
    </div>
</body>

Original Q&A

There are 2 best solutions below

Xvolks On 10 February 2016 at 11:00

If you want to post a toggle as a checkbox input type, you may link the toggle and a hidden input into your form.

The link is done by the id of the input and the data-matcher property of the toggle.

The script will link all your toggles to inputs given that you have correctly set the id and data-matcher tags.

Following script will do the state copy of the toggle to the input.

        <input style="visibility: hidden" type="checkbox" value="" id="accept_cgu">
        <ul class="table-view">
            <li class="table-view-cell">
                Accepter les termes des CGU *
                <div class="toggle" data-matcher="accept_cgu">
                    <div class="toggle-handle"></div>
                </div>
            </li>
        </ul>

    <script>
        $( document ).ready(function() {
            $('.toggle').on('toggle', function (event) {
                var inactive_ids = [];
                var active_ids = [];
                $('.toggle').each(function () {
                    if ($(this).hasClass("active")) {
                        active_ids.push($(this).attr("data-matcher"))
                    } else {
                        inactive_ids.push($(this).attr("data-matcher"))
                    }
                });
                $.each(active_ids, function (key, value) {
                    $('#' + value).prop('checked', true);
                });
                $.each(inactive_ids, function (key, value) {
                    $('#' + value).prop('checked', false);
                });
            });
        });
    </script>

**spiderplant0** · Accepted Answer · 2015-09-15T21:55:16.317000

This works...

        document
            .addEventListener(
                'toggle',
                function( e ){
                    console.log(
                        $(e.target).parent().attr("id") + ", " +
                        $(e.target).hasClass("active")
                    );
                }
            );

Detect state change on a ratchet toggle

There are 2 best solutions below

Related Questions in RATCHET-2

Trending Questions

Popular # Hahtags

Popular Questions