Category Archives: Jquery

One thing to remember

With the WIFI shield one thing to remember is that after a while of inactivity it may disconnect, if it does this just use the rest button on the board.

ps, have left it for around all day with no disconnect issues so looks like it will hold out for most of the time but just have to keep an eye on it.

Half way there

So my last post was about getting get requests to work local host, now i have managed to get it working with the Arduino.

$(‘.myButton2′).click(function() {
//Send the AJAX call to the server
$.get(“http://10.10.31.46/L”,function(data, textStatus)
{
alert(“Done, with the following status: ” + textStatus + “. Here is the response: ” + data);
});
});

Here is a snippet of my code, when the button clicks it get the url ip/L this turns off LED , i now have 8 buttons all set to different url’s to activate and deactivate my LED’S

Why is the Access-Control-Allow-Origin header necessary?

So why trying to access a URL on a different server I ran upon this issue which stops the incoming data and throws up a console log error.

The reason for this security block is to stop malicious accessing your site. For example if you went to a malicious site they could be using get requests to bypass your web-host security and gain access and do anything to your site.

Away around this situation is to add:

client.println(“Access-Control-Allow-Origin: *”);

This bit of code which allows anyone to access the url remotely. This is very bad don’t do this.

 

Get request 2

Moving things forward in terms of creating a UI, adding a button to my get request was an important step as I need to have a multiple buttons each independently working to get data of a different source.

The code I am using for one button is:

<button type=”button” class=”myButton”>Click Me!</button>
<script type=”text/javascript”>
// $(function()
// {
// $.get(“content.html”, function(data, textStatus)
// {
// alert(“Done, with the following status: ” + textStatus + “. Here is the response: ” + data);
// });
// });
//Listen when a button, with a class of “myButton”, is clicked
//You can use any jQuery/JavaScript event that you’d like to trigger the call
$(‘.myButton’).click(function() {
//Send the AJAX call to the server
$.get(“content.html”,function(data, textStatus)
{
alert(“Done, with the following status: ” + textStatus + “. Here is the response: ” + data);
});
});
</script>

Get and Post

These methods allow you to easily send HTTP requests and get a result back.

They both do pretty much the same thing and invoke a response from the server and can be written like $.get().

In the () the function normally takes one parameter which is the URL you wish to request, but in most cases we want to do something with the  returned data, therefore you can pass a callback function as a parameter. (url , function(par 1 , par2).

The first parameter is the URL, which is just content.html. The second parameter is more interesting. It’s a callback function, which jQuery calls if the page request succeeds. The first callback parameter is simply the content of the page requested, while the second callback parameter is the textual status of the request. 

Jquery Load method

So learning about get and post http requests, to take it one step back I looked and load requests.

A very simple task was to just load up an external .html file: heres the code

<div id=”divTestArea1″></div>

<script type=”text/javascript”>
$(function()
{
$(“#divTestArea1″).load(“content.html”);
});
</script>