Search code examples
jqueryjquery-mobile

How to programmatically select jQuery slider?

I am trying to preselect a slider in jQuery mobile.

<select name="box" id="box" data-role="slider" data-mini="true">
    <option value="off" selected></option>
    <option value="on" >mit</option>
</select>

This somehow does not work: $("#box").val("on").flipswitch( "refresh" ) ;

Therefore I created the box via PHP and preselect:

<select name="box" id="box" data-role="slider" data-mini="true">
        <?php
        $box['on'] = 'mit'; 
        $box['off'] = '';   
        foreach ($box as $key => $value) {
                ($key == $_GET['box']) ? $isselected = ' selected=""' : $isselected = false;
            echo '<option value="'.$key.'" '.$isselected .'>'.$value.'</option>';
        } 
    ?>
</select>

Resulting in:

<select name="box" id="box" data-role="slider" data-mini="true">
    <option value="on"  selected="">mit</option>
    <option value="off" ></option>
</select>

But in this case the switch looks like this (missing th blue):

enter image description here

How is possible to select a value, preferebly with jQuery?

Solution

  • The JQM documentation is somewhat confusing here. There are two kind of flipswitch:

    1. Flipswitches which are built on top of a select element
    2. Flipswitches which are built on top of a checkbox element

    (don't know why there is also a slider flipswitch)

    both, are skinned like mobile flippswitches, you are free to use either the select or the checkbox depending from your needs, exactly the same way as you would do with the standard HTML non-mobile elements: if you need to build your page from PHP then use either the selected or the checked attribute to pre-select one option/value.

    Here is an example of initialization from code:

    $(document).on("flipswitchcreate", "#flip-checkbox", function(e) {
  $(this).prop("checked", true).flipswitch("refresh");
});

$(document).on("flipswitchcreate", "#flip-select", function(e) {
  $(this).val("on").flipswitch("refresh");
});

$(document).on("slidecreate", "#flip-slider", function(e) {
  $(this).val("on").slider("refresh");
});
    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
  <div id="page-one" data-role="page">
    <div role="main" class="ui-content">
      <label for="flip-checkbox">Flip toggle switch checkbox:</label>
      <input type="checkbox" data-role="flipswitch" id="flip-checkbox" name="flip-checkbox">
      <label for="flip-select">Flip toggle switch select:</label>
      <select data-role="flipswitch" id="flip-select" name="flip-select">
        <option value="off" selected="">Off</option>
        <option value="on">On</option>
      </select>
      <label for="flip-slider">Flip toggle switch slider:</label>
      <select data-role="slider" id="flip-slider" name="flip-slider">
        <option selected="" value="off">Off</option>
        <option value="on">On</option>
      </select>
    </div>
  </div>
</body>
</html>

    Regarding the active state, you are right. I noticed that too, so I am using this by default in my CSS:

    /* Maybe forgotten in JQM standard CSS */
a.ui-flipswitch-on {
    color: inherit !important;
}