Toopy14
Axe-Master
I'm working on an embedded project with a web-based Microchip micrcontroller. I'm trying to pass a variable from a slider control to the server via CGI.
For example; if I type in this URL; http://<IP Address>/sliders.cgi?slider1=75, it will pass the value 75 to the server and store the value in an XML file. I can then use a callback function to display the dynamic variable on the web page. That all works fine.
Microchip provides a .js program that will do most of the work to pass the variable to the server using AJAX texchniques. Here's the snippet from the .js code;
// Initiates a new AJAX command
// url: the url to access
// container: the document ID to fill, or a function to call with response XML (optional)
// repeat: true to repeat this call indefinitely (optional)
// data: an URL encoded string to be submitted as POST data (optional)
function newAJAXCommand(url, container, repeat, data)
More on the newAJAXCommand shortly.
Here's the HTML code for the slider;
<div class="slidecontainer">
<input type="range" min="0" max="100" value="0" class="slider" id="myRange">
<p>Duty Cycle(%): <span id="sliderValue" style="font-weight:normal"></span></p>
</div>
Here's the Javascript for the slider;
<script type="text/javascript">
var slider = document.getElementById("myRange");
var output = document.getElementById("sliderValue");
output.innerHTML = slider.value; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
output.innerHTML = this.value ;
}
</script>
So...I can get the slider to work and display the value (0-100) on the webpage;
What I'm trying to do now is use the NewAJAXCommand from the .js code, to pass the slider variable to the server.
The code should look something like this;
newAJAXCommand( 'sliders.cgi?slider1=' + some function() )
but I don't know how to create the 'some function' to pull the variable from the slider and feed it through the sliders.cgi.
I did it before using a Yahoo slider widget, but it's been deprecated;
using this command;
newAJAXCommand('sliders.cgi?slider1=' + slider.getRealValue());
from this example;
http://hairyraho.com/20081112-slider-control/
Any ideas would be greatly appreciated!!
Thanks!
For example; if I type in this URL; http://<IP Address>/sliders.cgi?slider1=75, it will pass the value 75 to the server and store the value in an XML file. I can then use a callback function to display the dynamic variable on the web page. That all works fine.
Microchip provides a .js program that will do most of the work to pass the variable to the server using AJAX texchniques. Here's the snippet from the .js code;
// Initiates a new AJAX command
// url: the url to access
// container: the document ID to fill, or a function to call with response XML (optional)
// repeat: true to repeat this call indefinitely (optional)
// data: an URL encoded string to be submitted as POST data (optional)
function newAJAXCommand(url, container, repeat, data)
More on the newAJAXCommand shortly.
Here's the HTML code for the slider;
<div class="slidecontainer">
<input type="range" min="0" max="100" value="0" class="slider" id="myRange">
<p>Duty Cycle(%): <span id="sliderValue" style="font-weight:normal"></span></p>
</div>
Here's the Javascript for the slider;
<script type="text/javascript">
var slider = document.getElementById("myRange");
var output = document.getElementById("sliderValue");
output.innerHTML = slider.value; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
output.innerHTML = this.value ;
}
</script>
So...I can get the slider to work and display the value (0-100) on the webpage;
What I'm trying to do now is use the NewAJAXCommand from the .js code, to pass the slider variable to the server.
The code should look something like this;
newAJAXCommand( 'sliders.cgi?slider1=' + some function() )
but I don't know how to create the 'some function' to pull the variable from the slider and feed it through the sliders.cgi.
I did it before using a Yahoo slider widget, but it's been deprecated;
using this command;
newAJAXCommand('sliders.cgi?slider1=' + slider.getRealValue());
from this example;
http://hairyraho.com/20081112-slider-control/
Any ideas would be greatly appreciated!!
Thanks!