Assign function to toggle switch

[Kurtvdh]

Hi,

 

I'm building a webpage to control a sprinkler system via an Arduino Yun. There are some buttons that control the valves by sending a message to the arduino when clicked like so:

 

HTML:

<button id="b1" onclick="z1on()">On</button>

 

Java:

function z1on()

{

$('#content').load('/arduino/z1on');

}

This function is working fine.

I also have a slider switch with on/off position. Both positions should also send a similar style message.

HTML for the slider switch:

<div class="onoffswitch" onclick="automode()">

<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>

<label class="onoffswitch-label" for="myonoffswitch">

<span class="onoffswitch-inner"></span>

<span class="onoffswitch-switch"></span>

</label>

</div>

Java:

var initialSwitchState=true;

function automode()

{

if(initialSwitchState)

$('.onoffswitch').load('/arduino/autoon');

else

$('.onoffswitch').load('/arduino/autooff');

}

But when I click the slider, only the message "autoon" is sent, and then the slider disappears from the webpage. After a refresh the switch comes back to the ON position, but when I click the same thing happens again.

I must be doing something wrong, but don't know what...

[Ingolme]

Every time you call $('.onoffswitch').load(...); you're deleting everything and putting something new there. All event handlers are lost. Anything inside that element that requires Javascript that runs on page load will not work after that.

 

You should change the content of some other element than the one that's triggering the event.

 

Here's an example of something that will work, perhaps not exactly as you want it to since I don't know what exactly the objective of your code is.

<div class="onoffswitch">

    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
    <label class="onoffswitch-label" for="myonoffswitch">
        <span class="onoffswitch-inner"></span>
        <span class="onoffswitch-switch"></span>
    </label>
</div>

<div id="switch-content"></div>

document.getElementById("myonoffswitch").onchange = function() {
  if(this.checked) {
    $('#switch-content').load('/arduino/autoon');
  } else {
    $('#switch-content').load('/arduino/autooff');
  }
}

[Kurtvdh]

THX for the reply...I've tried your suggestion but it still doesn't work.

What I want to achieve is that when the slider is set to OFF the code will send a command "auto off" to my arduino en when it's switched back to ON it will send "auto on" to my Arduino.

 

I have several buttons on my webpage that use the same method to send commands to Arduino.

As the example I gave in my original post.

When I click button z1 the command "z1on" is sent to arduino, this triggers a function in my program.

This is the code for 1 button.I use several others and they are all working fine.

 

HTML:

<button id="b1" onclick="z1on()">On</button>

Java:

function z1on()

{

$('#content').load('/arduino/z1on');

}

After I used your code, the slider switch doesn't disappear anymore, but the command is sent to my arduino yet.