web server with jquery mobile + get requests

hello there! this is my first post so forgive me if am doing wrong…
I’m trying to program an arduino uno as a smart home automation system. So far I wrote the code with jquery mobile and and i need help with the get requests to digital pins of my arduino. I’m not familiar with other stuff like ajax, java-script or node js
so is this possible or i should just go back to a simple html layout with check-boxes?
how do i get the values from the flip switch to the arduino?
thanks in advance!

this my jquery code:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home Automation v.1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>

<body>
<div data-role="page">

<div data-role="header">
  <img border="0" src="https://gp3.googleusercontent.com/-XW1x_JT1g24/AAAAAAAAAAI/AAAAAAAAACs/BO3Un-dNcq0/s48-c-k-no/photo.jpg" alt="Logo, arduino" style="float:left;display:inline"/>
  <h1>Arduino Smart Home</h1>
</div><!-- /header -->

<div data-role="collapsible-set">

<div data-role="collapsible" data-collapsed="false" data-theme="b">
<h3>Lights</h3>

  <div data-role="content">
  <label for="flip-1">Light 1</label>
<select name="flip-1" id="flip-1" data-role="slider">
  <option value="off">Off</option>
  <option value="on">On</option>
</select>

  <label for="flip-2">Light 2</label>
<select name="flip-2" id="flip-2" data-role="slider">
  <option value="off">Off</option>
  <option value="on">On</option>
</select>

  <label for="flip-3">Light 3</label>
<select name="flip-3" id="flip-3" data-role="slider">
  <option value="off">Off</option>
  <option value="on">On</option>
</select>

  <label for="flip-4">Light 4</label>
<select name="flip-4" id="flip-4" data-role="slider">
  <option value="off">Off</option>
  <option value="on">On</option>
</select>

</div>

</div>


<div data-role="collapsible-set">

<div data-role="collapsible" data-collapsed="false" data-theme="b">

<h3>solar panel </h3>
<div>
<img src=http://cdns2.freepik.com/free-photo/solar-panel--ios-7-interface-symbol_318-35537.jpg>
</div>
                    <h2>solar panel voltage is :</h2>
</div>

</div>

</div><!-- /content -->

<div data-role="collapsible-set">

<div data-role="collapsible" data-collapsed="false" data-theme="b">

<h3>thermometer</h3>
<div>
<img src=http://cdns2.freepik.com/free-photo/thermometer-medical-fever-temperature-control-tool_318-61723.jpg>                
                    <h2>temperature is :</h2>
  
</div>

</div>

</div><!-- /content -->
<div data-role="footer" data-position="fixed">
  <h4>moisidis lazaros - Copyright 2015</h4>
</div><!-- /footer -->

</div><!-- /page -->

</body>
</html>

Hi leo! I can definitely help you here, this is my first time answering questions on the internet so we're both first timers!

I am just doing up some code now, won't be a minute.

Ok so I hit a roadblock in my code, but to start you off, what you need on your website to do an ajax request is this:

<script type='text/javascript'>
	$( document ).ready(function() {
		$( '#flip-1' ).bind( 'change', function(event, ui) {
				var flip1state=$('#flip-1').val();
				var request= new XMLHttpRequest();
				request.onreadystatechange = function()
				{
					if (this.readyState==4 && this.status==200){
						alert(request.responseText);
					}
				}
				request.open('GET','ajax_request?light1='+flip1state,true);
				request.send(null);
		});
	});
	
</script>

Alright! I got one LED working, work’s like a treat! Nice website by the way.

The LED is attached to pin 9 as pins 10-13 are used by the ethernet library I believe.

Let’s get into it :smiling_imp:

This all would have been much easier if you had an SD card reader, but anyway, I got around that.

First you have to download the Flash library from here.

Next, pop the attached file on your arduino- it is a modification of the ethernet example webserver.

Then travel to 192.168.1.177 and enjoy. Hopefully you won’t run into any problems getting it started or coding the rest of the lights.

webserver blinkled.ino (8.18 KB)

Thank you so much ...so far you have been very helpful ! My Ethernet shield has an sd card, is that what you meant ? Finally can you point out the part I should copy and modify for the rest of the lights (accept the initialization of the pins and led status for each one) I will totally understand if you don’t have the time… thanks again

Ok, i found the problem, i forgot the digital-write command!thanks anyway...

jQuery has a built in ajax function....

jQuery.ajax()

A quick alias of that is

$.get( "?deviceid=1&such=2",  function(data) {
    //get xml element 'item'    in a response               
    $('#someField').val($(data).find("item"));
}

Saves you a dozen lines of code or so.