Hi!
I’m new to particle. I’ve been working through the Getting Started examples. I followed the ‘Control LED over the net’ example. I wanted to execute a variation of it: Clicking checkbox would turn the led on, Clicking off would turn the LED off(without a submit type). I was able to accomplish this. However as with the code example, the page refreshes every time a submit is sent to a new page.
I want to be able to turn the led on and off without a page redirect or refresh. I figured I would have to use AJAX to accomplish this. Here’s my code so far:
<div id="switch">
<form id="ledForm" action="https://api.particle.io/v1/devices/deviceID/led?access_token6" id="particle" method="POST" >
<input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox" name="args" value = "on" onChange="submitForm()" >
<label for="cmn-toggle-1"></label>
</form>
</div>
<div id="form_output"> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
function submitForm(e) {
$('#ledForm').submit();
e.preventDefault();
$.ajax({
url : $(this).attr('action') || window.location.pathname,
type: "GET",
data: $(this).serialize(),
success: function (data) {
},
error: function (jXHR, textStatus, errorThrown) {
}
});
};
I’m new to AJAX and not sure how to proceed. This code isn’t changing the behavior…Any help or suggestion would be much appreciated!