改变flipswitch jquery mobile的活动状态

时间:2015-12-15 22:19:54

标签: javascript php jquery ajax jquery-mobile

我正在尝试保存flipswitch的值,并在重新加载webapp后,具有与状态相同值的选项应该是活动的。即如果您选择<option id="v2" value="0">OFF</option>,则Cookie status的值为0,重新加载页面后,flipswitch应显示OFF

现在每次重新加载后,总会自动选择第一个选项并使用该值。我怎么能改变呢?

my flipswitch:

<select id="status" name="status" data-role="flipswitch">
  <option id="v1" value="1">ON</option>
  <option id="v2" value="0">OFF</option>


</select>

我的php片段:

    $t = time() + 60 * 60 * 24 * 1000;
        setcookie("status", $_POST['status'], $t);

我自己尝试:

function state () {
 var statuse = <?php echo $_COOKIE['status']; ?>;

 if (statuse == 0) {
     $('#v2').addClass('ui-flipswitch-active');

 }
 if (statuse == 1) {
     $('#v1').addClass('ui-flipswitch-active');

 }
}   

state();

调用php脚本的函数:

function status () {
        var stats = $("#status").val();
    $.ajax({ url: 'status.php',

         data: {status: stats},
         type: 'post',
         success: function(output) {
                      //alert(output);
                  }
});
}   

status();
setInterval(function(){
    status() // this will run after every 5 seconds
}, 5000);

1 个答案:

答案 0 :(得分:1)

我会尝试以下方法在pageload上加载正确的switchstate:

<select id="status" name="status" data-role="flipswitch" class="">
  <option id="v1" value="1" <?php if (isset($_POST['status]') && $_POST['status'] == 1) echo 'class="ui-flipswitch-active"'; ?>>ON</option>
  <option id="v2" value="0" <?php if (!isset($_POST['status]') || $_POST['status'] == 0) echo 'class="ui-flipswitch-active"'; ?>>OFF</option>
</select>

如果您之后使用javascript执行此操作并且页面加载缓慢,则会出现“闪烁”,因为处理javascript需要一段时间。

和javascript:

$( "#status" ).change(function() {
    var stats = $("#status").val();
    $.ajax({ url: 'status.php',
     data: {status: stats},
     type: 'post',
     success: function(output) {
                  //alert(output);
              }
    });
});  

这样,当触发select的change事件时,它会启动ajax查询。确保php脚本具有session_start();否则它可能无法正常工作。