Button toggles only after double click

Question

Below is the script to on/off control of led using web page. This script is linked to python that actually controls the led. Everything works fine but the problem is the button toggles to right side i.e., ON position only after double click.

On first click the checkbox gets selected, the LED gets ON but slide does not move to right.
On second click the slide moves to right.

Whereas button toggles to left side on single click (No issue with this). Can someone help?

// HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>{{ title }}</title>
        <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

// JavaScript:

<script>
   $(document).ready(function(){
   $("#test").click(function(){
   if ($(this).is(":checked"))
   {
      $('#On').get(0).click();
   }
   else
   {
      $('#Off').get(0).click();
    }
  });
});
</script>

// CSS:

<style>
.onoffswitch {
    position: relative; width: 90px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select:   none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 30px; padding: 0;    line-height: 30px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial,    sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 18px; margin: 6px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 56px;
    border: 2px solid #999999; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}
</style>
</head>

// HTML:

<body>
  <div class="onoffswitch"> 
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="test"> 
    <label class="onoffswitch-label" for="test"> 
    <span class="onoffswitch-inner"></span>
    <span class="onoffswitch-switch"></span> 
    </label> 
  </div>
  <h1>
      <a href="/On#On" id="On"></a>
  </h1>
  <h1>
      <a href="/Off#Off" id="Off"></a>
  </h1>

</body> 
</html>

Deep 3015 · Accepted Answer · 2017-03-18T07:46:10.450

$('#On').click(); and $('#Off').click(); no need of get(0) in them

$(document).ready(function() {
  $("#test").click(function() {
    if ($(this).is(":checked")) {
      $('#On').click(); 
    } 
    if (!$(this).is(":checked")) {
     $('#Off').click(); 
    }
  });
   $('#On').click(function(){
      console.log('id On clicked')  
   });
   $('#Off').click(function(){
      console.log('id Off clicked')  
   });
});

.onoffswitch {
  position: relative;
  width: 90px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.onoffswitch-checkbox {
  display: none;
}

.onoffswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #999999;
  border-radius: 20px;
}

.onoffswitch-inner {
  display: block;
  width: 200%;
  margin-left: -100%;
  transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before,
.onoffswitch-inner:after {
  display: block;
  float: left;
  width: 50%;
  height: 30px;
  padding: 0;
  line-height: 30px;
  font-size: 14px;
  color: white;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}

.onoffswitch-inner:before {
  content: "ON";
  padding-left: 10px;
  background-color: #34A7C1;
  color: #FFFFFF;
}

.onoffswitch-inner:after {
  content: "OFF";
  padding-right: 10px;
  background-color: #EEEEEE;
  color: #999999;
  text-align: right;
}

.onoffswitch-switch {
  display: block;
  width: 18px;
  margin: 6px;
  background: #FFFFFF;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 56px;
  border: 2px solid #999999;
  border-radius: 20px;
  transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
  margin-left: 0;
}

.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
  right: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="test">
    <label class="onoffswitch-label" for="test"> 
    <span class="onoffswitch-inner"></span>
    <span class="onoffswitch-switch"></span> 
    </label>
  </div>
  <h1>
    <a href="/On#On" id="On"></a>
  </h1>
  <h1>
    <a href="/Off#Off" id="Off"></a>
  </h1>

</body>

When i remove get(0) button toggles well but link is not selected or triggered — veeramani shankar, Mar 18 '17 at 06:43
[href="/On ] is a html link which leads to python flask. when this link is selected python detects that link is selected and start to execute the corresponding piece of code which is turn control LED — veeramani shankar, Mar 18 '17 at 07:43
Thanks mate.. But this not working again for me.. It works fine within the script - calling anything within script. But could not trigger actual link for python. If it does so, in code snippet it will show "page you are looking for is not found" — veeramani shankar, Mar 18 '17 at 11:22
for that execution of the code in python flask you have to make some kind of ajax call for execution. hope you understand. Direct link will so same error mentioned — Deep 3015, Mar 18 '17 at 11:41
are you able to do what you want. or just accepted the answer — Deep 3015, Mar 20 '17 at 06:38
actually your answer to my question is perfect.. I can understand that i have to use ajax. I was trying to use ajax technique for couple of days.. But could not execute correctly. All i need is an example to send a text from javascript to flask python. — veeramani shankar, Mar 20 '17 at 08:57

Button toggles only after double click

1 Answers1