Skip to content

Instantly share code, notes, and snippets.

@suellenstringer-hye

suellenstringer-hye/Bioimages results page

Created June 18, 2015 18:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save suellenstringer-hye/a2e2e89248999df1a23f to your computer and use it in GitHub Desktop.
Save suellenstringer-hye/a2e2e89248999df1a23f to your computer and use it in GitHub Desktop.
Download ZIP
Results page
Raw
Bioimages results page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery SPARQL test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/cosmo/bootstrap.min.css">
<link rel="stylesheet" href="/stylesheets/style.css">
<script>
// function to turn XML object into a string
function getXmlString(xml) {
if (window.ActiveXObject) { return xml.xml; }
return new XMLSerializer().serializeToString(xml);
}
$(document).ready(function(){
// creates a function that's executed when the button is clicked
$("button").click(function(){
//pulls data from the input boxes
input1=document.getElementById('box1').value;
input2=document.getElementById('box2').value;
input3=document.getElementById('box3').value;
input4=document.getElementById('box4').value;
// creates a string that contains the query with the data from the box
// inserted into the right place
var query = "PREFIX foaf: <http://xmlns.com/foaf/0.1/>"+
"PREFIX ac: <http://rs.tdwg.org/ac/terms/>"+
"PREFIX dwc: <http://rs.tdwg.org/dwc/terms/>"+
"PREFIX dsw: <http://purl.org/dsw/>"+
"PREFIX Iptc4xmpExt: <http://iptc.org/std/Iptc4xmpExt/2008-02-29/>"+
"PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>"+
"SELECT DISTINCT ?uri WHERE {" +
"?identification dwc:genus " + input1 + "." +
"?identification dwc:specificEpithet " + input2 + "." +
"?organism dsw:hasIdentification ?identification." +
"?organism foaf:depiction ?image." +
"?organism dsw:hasOccurrence ?occurrence." +
"?occurrence dsw:atEvent ?event." +
"?event dsw:locatedAt ?location." +
"?location dwc:stateProvince " + input3 + "." +
"?image Iptc4xmpExt:CVterm ?view." +
"?view rdfs:subClassOf ?featureCategory." +
"?featureCategory rdfs:label " + input4 + "." +
"?image ac:hasServiceAccessPoint ?sap." +
"?sap ac:accessURI ?uri." +
"?sap ac:variant ac:Thumbnail." +
"} " +
"LIMIT 10";
// URL-encodes the query so that it can be appended as a query value
var encoded = encodeURIComponent(query)
// does the AJAX to send the HTTP GET to the Callimachus SPARQL endpoint
// then puts the result in the "data" variable
$.ajax({
type: 'GET',
url: 'http://localhost:8080/sparql?query=' + encoded,
headers: {
Accept: 'application/sparql-results+xml'
},
success: function(data) {
// performs the string-conversion function on the returned XML object
var stringXml=getXmlString(data) ;
alert(stringXml);
document.getElementById('div1').innerHTML=stringXml ;
}
});
});
});
</script>
</head>
<body>
<nav class="navbar navbar-default ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bioimages</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template">
<h2>Results</h2>
<table class="table table-striped table-hover ">
<thead>
<tr>
<th></th>
<th>Thumbnail</th>
<th>Species</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><a href="http://bioimages.vanderbilt.edu/baskauf/10949.htm"><img src="http://bioimages.vanderbilt.edu/tn/baskauf/tmagr4-fl10949.jpg" /></a></td>
<td>Magnolia grandiflora (southern magnolia)</td>
<td>Blooms: 2nd week of Apr through 4th week of Apr
Economically significant tree in the Smoky Mountains. Has a greenish flower which is not showy like other Magnolias; count: 10</td>
</tr>
<tr>
<td>2</td>
<td><a href="http://bioimages.vanderbilt.edu/baskauf/10949.htm"><img src="http://bioimages.vanderbilt.edu/tn/baskauf/tmagr4-fl10949.jpg" /></a></td>
<td>Magnolia grandiflora (southern magnolia)</td>
<td>Blooms: 2nd week of Apr through 4th week of Apr
Economically significant tree in the Smoky Mountains. Has a greenish flower which is not showy like other Magnolias; count: 10</td>
</tr> <tr>
<td>3</td>
<td><a href="http://bioimages.vanderbilt.edu/baskauf/10949.htm"><img src="http://bioimages.vanderbilt.edu/tn/baskauf/tmagr4-fl10949.jpg" /></a></td>
<td>Magnolia grandiflora (southern magnolia)</td>
<td>Blooms: 2nd week of Apr through 4th week of Apr
Economically significant tree in the Smoky Mountains. Has a greenish flower which is not showy like other Magnolias; count: 10</td>
</tr> <tr>
<td>4</td>
<td><a href="http://bioimages.vanderbilt.edu/baskauf/10949.htm"><img src="http://bioimages.vanderbilt.edu/tn/baskauf/tmagr4-fl10949.jpg" /></a></td>
<td>Magnolia grandiflora (southern magnolia)</td>
<td>Blooms: 2nd week of Apr through 4th week of Apr
Economically significant tree in the Smoky Mountains. Has a greenish flower which is not showy like other Magnolias; count: 10</td>
</tr> <tr>
<td>5</td>
<td><a href="http://bioimages.vanderbilt.edu/baskauf/10949.htm"><img src="http://bioimages.vanderbilt.edu/tn/baskauf/tmagr4-fl10949.jpg" /></a></td>
<td>Magnolia grandiflora (southern magnolia)</td>
<td>Blooms: 2nd week of Apr through 4th week of Apr
Economically significant tree in the Smoky Mountains. Has a greenish flower which is not showy like other Magnolias; count: 10</td>
</tr> <tr>
<td>6</td>
<td><a href="http://bioimages.vanderbilt.edu/baskauf/10949.htm"><img src="http://bioimages.vanderbilt.edu/tn/baskauf/tmagr4-fl10949.jpg" /></a></td>
<td>Magnolia grandiflora (southern magnolia)</td>
<td>Blooms: 2nd week of Apr through 4th week of Apr
Economically significant tree in the Smoky Mountains. Has a greenish flower which is not showy like other Magnolias; count: 10</td>
</tr> <tr>
<td>7</td>
<td><a href="http://bioimages.vanderbilt.edu/baskauf/10949.htm"><img src="http://bioimages.vanderbilt.edu/tn/baskauf/tmagr4-fl10949.jpg" /></a></td>
<td>Magnolia grandiflora (southern magnolia)</td>
<td>Blooms: 2nd week of Apr through 4th week of Apr
Economically significant tree in the Smoky Mountains. Has a greenish flower which is not showy like other Magnolias; count: 10</td>
</tr> <tr>
<td>8</td>
<td><a href="http://bioimages.vanderbilt.edu/baskauf/10949.htm"><img src="http://bioimages.vanderbilt.edu/tn/baskauf/tmagr4-fl10949.jpg" /></a></td>
<td>Magnolia grandiflora (southern magnolia)</td>
<td>Blooms: 2nd week of Apr through 4th week of Apr
Economically significant tree in the Smoky Mountains. Has a greenish flower which is not showy like other Magnolias; count: 10</td>
</tr>
</tbody>
</table>
</div><!-- /.container -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment