JQuery Flip toggle refresh without action

Question

I have a page with 3 switch toggle buttons, the first two buttons activate a action (lamp 1 on and off, lamp 2 on and off), the third button is to switch both lamps on or out. So if I turn on button 1 and 2, the third button should be refreshed and also show the value on. Now I only switched the first button and turn lamp 1 off, the third button should be refreshed and show the value off cause not all Lamps are on. The refresh works fine, but when its refreshed the third button, it also starts the function for turning off both lamps, lamp 1 and two are off (only lamp 1 should be off). I searching for a way to refresh the button without starting the event which I start when I click the button. Heres my Javascript code for the logic of the switch toggle buttons:

$( "#flip1").change(function(){
  var value1 = $("#flip1").val();
  var value2 = $("#flip2").val();

  if (value1 == 1) {
      switchlight(1, "on"); // function for switching the lamp
      if (value2 == 1){
          $("#flip3").val("1").flipswitch("refresh"); // should be refreshed without action
      }
  }else{
      switchlight(1, "off");
      $("#flip3").val("0").flipswitch("refresh"); // should be refreshed without action
  };
});

$( "#flip2").change(function(){
  var value1 = $("#flip1").val();
  var value2 = $("#flip2").val();

  if (value2 == 1) {
      switchlight(2, "on"); // function for switching the lamp
      if (value1 == 1){
          $("#flip3").val("1").flipswitch("refresh"); // should be refreshed without action
      }
  }else{
      switchlight(2, "off");
      $("#flip3").val("0").flipswitch("refresh"); // should be refreshed without action
  };
});

$( "#flip3").change(function(){
  var value3 = $("#flip3").val();
  if (value3 == 1) {
    switchlight(1, "on");
    switchlight(2, "on");

    $("#flip1").val("1").flipswitch("refresh"); // should be refreshed without action
    $("#flip2").val("1").flipswitch("refresh"); // should be refreshed without action
  }else{
    switchlight(1, "off");
    switchlight(2, "off");

    $("#flip1").val("0").flipswitch("refresh"); // should be refreshed without action                 
    $("#flip2").val("0").flipswitch("refresh"); // should be refreshed without action
  };
});

Thanks for your help

If you can make a fiddle demonstrating this i'd be more than happy to have a look. http://jsfiddle.net/ — Leth0_, Jul 13 '14 at 11:56

score 1 · Accepted Answer · edited May 23 '17 at 12:11

UPDATE: I digged around a bit and found a better way:

$( "#flip1").change(function(){
    var value1 = $("#flip1").val();
    var value2 = $("#flip2").val();

    if (value1 == 1) {
        if (value2 == 1){
            $("#flip3").val("1").flipswitch("refresh");
        }
    }else{
        // should be refreshed cause not both lamps are on status on, but should not refrssh the state of other buttons!
        $("#flip3").off('change').val("0").flipswitch("refresh").on('change', flip3change);
    };
});

$( "#flip2").change(function(){
    var value1 = $("#flip1").val();
    var value2 = $("#flip2").val();

    if (value2 == 1) {
        if (value1 == 1){
            $("#flip3").val("1").flipswitch("refresh");
        }
    }else{
        // should be refreshed cause not both lamps are on status on, but should not refrssh the state of other buttons!
        $("#flip3").off('change').val("0").flipswitch("refresh").on('change', flip3change);
    };
});

function flip3change() {
     var value3 = $("#flip3").val();
    if (value3 == 1) {
        $("#flip1").val("1").flipswitch("refresh");
        $("#flip2").val("1").flipswitch("refresh"); 
    }else{
        $("#flip1").val("0").flipswitch("refresh");
        $("#flip2").val("0").flipswitch("refresh");
    };
}

$( "#flip3").change(flip3change);

OLD ANSWER:

You just have to add some code to re-enable the switches inside the #flip1 and #flip2 change handlers:

$( "#flip1").change(function(){
    var value1 = $("#flip1").val();
    var value2 = $("#flip2").val();

    if (value1 == 1) {
        if (value2 == 1){
            $("#flip3").val("1").flipswitch("refresh");
        }
    }else{
        // should be refreshed cause not both lamps are on status on, but should not refrssh the state of other buttons!
        $("#flip3").val("0").flipswitch("refresh");
        $("#flip2").val(value2).flipswitch("refresh");
    };
});

$( "#flip2").change(function(){
    var value1 = $("#flip1").val();
    var value2 = $("#flip2").val();

    if (value2 == 1) {
        if (value1 == 1){
            $("#flip3").val("1").flipswitch("refresh");
        }
    }else{
        // should be refreshed cause not both lamps are on status on, but should not refrssh the state of other buttons!
        $("#flip3").val("0").flipswitch("refresh");
        $("#flip1").val(value1).flipswitch("refresh");
    };
});

$( "#flip3").change(function(){
    var value3 = $("#flip3").val();
    if (value3 == 1) {
        $("#flip1").val("1").flipswitch("refresh");
        $("#flip2").val("1").flipswitch("refresh"); 
    }else{
        $("#flip1").val("0").flipswitch("refresh");
        $("#flip2").val("0").flipswitch("refresh");
    };
});

Online Demo

this is working, but its like re-refreshing the switch, every time i refresh a switch it calls a lamp on or off function. So if I do it like this, it first turns off all lamps and than it turns on the lamp which has to be on... it's like disco ;-) — steke, Jul 13 '14 at 12:51
this looks really good, cause I can turn off the change event, but the on('change'.... doesn't work, so it works only one time — steke, Jul 13 '14 at 14:03
What do you mean by "doesn't work"? Did you see the updated jsfiddle? — d0c, Jul 13 '14 at 14:07
sorry i've had a problem with my code, this answer works! thank you a lot! — steke, Jul 13 '14 at 14:40

score 0 · Answer 2 · answered Jul 13 '14 at 12:35

How is this? I didn't bug test greatly so it might not work well... let me know what you think.

http://jsfiddle.net/q2zJJ/3/

$( "#flip1").change(function(){
    var value1 = $("#flip1").val();
    var value2 = $("#flip2").val();

    if (value1 == 1) {
        if (value2 == 1){
            $("#flip3").val("1").flipswitch("refresh");
        }
    }else{
        // should be refreshed cause not both lamps are on status on, but should not refrssh the state of other buttons!
        $("#flip3").val("0").flipswitch("refresh");
    };
});

$( "#flip2").change(function(){
    var value1 = $("#flip1").val();
    var value2 = $("#flip2").val();

    if (value2 == 1) {
        if (value1 == 1){
            $("#flip3").val("1").flipswitch("refresh");
        }
    }else{
        // should be refreshed cause not both lamps are on status on, but should not refrssh the state of other buttons!
        $("#flip3").val("0").flipswitch("refresh");
    };
});

$( "#flip3").change(function(){
    var value3 = $("#flip3").val();
     var value1 = $("#flip1").val();
     var value2 = $("#flip2").val();
    console.log(value1);
    if (value3 == 1) {
        $("#flip1").val("1").flipswitch("refresh");
        $("#flip2").val("1").flipswitch("refresh"); 
    }else{
        if(value1 === 1){            
            $("#flip2").val("0").flipswitch("refresh");
        }
        else if(value2 === 1){
            $("#flip1").val("0").flipswitch("refresh");
        }
        else if(value2 === "1" && value1 === "1"){
            $("#flip1").val("0").flipswitch("refresh");
            $("#flip2").val("0").flipswitch("refresh");                    
        }
    };
});

JQuery Flip toggle refresh without action

2 Answers2