Level:
LOGD Data Mashups and Consumption
Description:
Brief introduction to jQuery and how to use it with LOGD
[toc list: ul; ]
What is jQuery?
jQuery is a javascript library aimed to make things easy when it comes to write javascript.
How to use jQuery?
First, it is necessary to load the library as a regular javascript file.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
Then, we can add the following code
<script type="text/javascript">
$(document).ready(function() {
YOUR CODE GOES HERE
});
</script>
The use of
$(document).read() guarantees that your code will be executed after all the proper files has been loaded.
Managing DOM objects
In order to access a DOM element, we can call them by id, class, or any other attribute. For example, to show the content of an element which id is "
results" we can do
<script type="text/javascript">
$(document).ready(function() {
alert($("#results").html());
});
</script>
As we can see
$("#results") refers to the DOM element, while the function
.html() returns what inside. (You can refer to all elements of a specific class or other attributes. For more details on selectors you can go to jQuery's
official documentation).
AJAX with jQuery
One of the nice things of jQuery is the ease for creating AJAX calls. We need to create an
ajax call which will receive a
JSONP object (a JSONP is a JSON object with a function name wrapping it. This is done to being able to use a JSON object called from a different server than the one where the script is running). In the
url parameter we define the URL agains we are going to to our call. The parameter
data will include all the parameters we want to pass (in this case parameter named "title" which value is "Linking Open Government Data"). If the ajax operation is successful, there will be a call to the function defined on the
success parameter.
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
dataType: 'jsonp',
jsonp: 'callback',
url: 'http://example.org/getfile',
data: {
title: "Linking Open Government Data",
},
success: function(data){
alert(data);
}
});
});
</script>
Now, if we want to query, say, how many times the version "1st anniversary" of dataset 1033 has been modified. we can query
prefix dcterms: <http://purl.org/dc/terms/>
select distinct ?date where {
graph <http://logd.tw.rpi.edu/source/data-gov/dataset/1033/version/1st-anniversary> {
<http://logd.tw.rpi.edu/source/data-gov/dataset/1033/version/1st-anniversary> dcterms:modified ?date .
}
}
For that, we should expect to obtain something like
we expect to receive a JSON object from the SPARQL endpoint that looks like
{ "head": { "link": [], "vars": ["date"] },
"results": { "distinct": false, "ordered": true, "bindings": [
{ "date": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#dateTime", "value": "2010-07-14T14:17:04.964+00:05" }},
{ "date": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#dateTime", "value": "2010-07-14T14:17:05.789+00:05" }},
{ "date": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#dateTime", "value": "2010-07-14T14:17:06.866+00:05" }},
{ "date": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#dateTime", "value": "2010-07-14T14:17:08.290+00:05" }},
{ "date": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#dateTime", "value": "2010-07-14T14:17:09.194+00:05" }},
{ "date": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#dateTime", "value": "2010-07-14T14:17:09.931+00:05" }},
{ "date": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#dateTime", "value": "2010-07-14T14:17:11.043+00:05" }},
{ "date": { "type": "typed-literal", "datatype": "http://www.w3.org/2001/XMLSchema#dateTime", "value": "2010-07-14T14:17:11.809+00:05" }} ] } }
As you can see the real values are available at
JSON Object -> results ->binding [ date ->value ]. Thus, the code to query and use the data should look something like this:
<script type="text/javascript">
$(document).ready(function() {
var datesQuery = 'prefix dcterms: <http://purl.org/dc/terms/>\
select distinct ?date where {\
graph <http://logd.tw.rpi.edu/source/data-gov/dataset/1033/version/1st-anniversary> {\
<http://logd.tw.rpi.edu/source/data-gov/dataset/1033/version/1st-anniversary> dcterms:modified ?date .\
}\
}';
$.ajax({
dataType: 'jsonp',
jsonp: 'callback',
url: 'http://logd.tw.rpi.edu/sparql',
data: {
query: datesQuery,
output: 'sparql',
},
success: function(data){
var aux = data.results.bindings;
for(var i=0; i<aux.length; i++){
$("#results").append(aux[i].date.value);
}
}
});
});
</script>
In the previous piece of code we can see that first we create a SPARQL query and we assigned it to datesQuery (the backslashes are the way javascript allow mutiline strings). Inside the
$.ajax command we define that the data we are going to send is a
query(datesQuery) and the
output format so we tell the SPARQL endpoint that we want a JSON object as a response. For the sake of simplicity we iterated over the json object using a
for, but a more
jQuery-ish would be using the
$.each() method as can be seen in the following code:
<script type="text/javascript">
$(document).ready(function() {
var datesQuery = 'prefix dcterms: <http://purl.org/dc/terms/>\
select distinct ?date where {\
graph <http://logd.tw.rpi.edu/source/data-gov/dataset/1033/version/1st-anniversary> {\
<http://logd.tw.rpi.edu/source/data-gov/dataset/1033/version/1st-anniversary> dcterms:modified ?date .\
}\
}';
$.ajax({
dataType: 'jsonp',
jsonp: 'callback',
url: 'http://logd.tw.rpi.edu/sparql',
data: {
query: datesQuery,
output: 'sparql',
},
success: function(data){
$.each(data.results.bindings, function(i,item){
$("#results").append(item.date.value);
});
}
});
});
</script>
Full example
A full example is in the following code (you can copy & paste it).
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var datesQuery = 'prefix dcterms: <http://purl.org/dc/terms/>\
prefix ds1033: <http://logd.tw.rpi.edu/source/data-gov/dataset/1033/version/>\
select distinct ?date where {\
graph ds1033:1st-anniversary {\
ds1033:1st-anniversary dcterms:modified ?date .\
}\
}';
$.ajax({
dataType: 'jsonp',
jsonp: 'callback',
url: 'http://logd.tw.rpi.edu/sparql',
data: {
query: datesQuery,
output: 'sparql',
},
success: function(data){
$.each(data.results.bindings, function(i,item){
$("#results").append(item.date.value + "<br/>");
});
}
});
});
</script>
</head>
<body>
<p>Datetimes when Dataset 1033 version 1st anniversary has been modified</p>
<div id="results"></div>
</body>
</html>
Further readings
jQuery is well documented. You can check in particular their entry on the use of
ajax as well as some
shortcuts that can simplify (somtimes) the code. Also, the use of
selectors,
iteration and
find methods are really handy.