Here is a small example of a simple "Hello World" program that I wrote when getting familiar with jQuery (and, largely, JavaScript itself for that matter).
To stand out from the crowd of programs that just display "Hello World" on the screen, the program helps the user say the real hello to the real world. For a country of choice, it checks the Timatic database to determine how easy it would be to actually travel there, based on the user's nationality and country of residence.
So let's construct some skeleton interface:
<html>
<head>
<meta charset="utf-8">
<title>jQuery Hello (real) World</title>
<style>
iframe { position: absolute;
left: 0;
top: 100px;}
.large{background-color: #ffffee;width:650px;height:400px;float:left;}
form{ font-family: "Arial"; float:left;}
input{width:40px;}
</style>
</head>
<body>
<form id="dynamicForm">TIRV:</form>
<iframe id="timatic" class="large" src="https://www.timaticweb.com/cgi-bin/tim_client.cgi?ExpertMode=TIHELP&user=OMITTED&subuser=OMITTEDB2C"></iframe>
where the <iframe> element will contain the result of the Timatic query. Let's then define two functions that perform the query:
<script src="jquery.js"></script>
<script>
function sendquery() {
$("#timatic").attr("src","https://www.timaticweb.com/cgi-bin/tim_client.cgi?ExpertMode="+formstring()+"&user=OMITTED&subuser=OMITTEDB2C")
}
function formstring() {
return "TIRV/"+$("input").map(function(){if (this.value!=="") {return this.id+this.value}}).get().join("/")+"/";
}
We note that the function formstring() refers to the <input> elements but there are none in the document. We will populate the interface from the script using jQuery methods:
That's it. These few lines create four input fields along with their respective labels and event handlers, so the sendquery() is called whenever the fields are changed. Note that the key strings in the Timatic query (NA/AR/DE/TR) are used for the element's ID, which allows to generate the query string automatically in a one-liner formstring() (see line #27) rather than construct it manually from four input fields. It also allows for easy scalability should there be more fields in the query string.
Here's an example:
$( document ).ready(function() {
//dynamically generate form
var tokens=['NA','AR','DE','TR'];
tokens.forEach(function(token) {
$("#dynamicForm").append($('<label for="'+token+'"> '+token+': </label>'));
$("#dynamicForm").append($('<input id="'+token+'" type="text" onchange="sendquery()">'));
} )
});
</script>
</body>
</html>
That's it. These few lines create four input fields along with their respective labels and event handlers, so the sendquery() is called whenever the fields are changed. Note that the key strings in the Timatic query (NA/AR/DE/TR) are used for the element's ID, which allows to generate the query string automatically in a one-liner formstring() (see line #27) rather than construct it manually from four input fields. It also allows for easy scalability should there be more fields in the query string.
Here's an example:
 |
| Checking if a programmer from Belarus with a US residence can say "Hello World" in Canada while transiting Georgia |
Note that the above examples won't work as quoted because I've stripped the credentials needed to query the Timatic Web service - sorry folks but I do not want to bust my Timatic access. However there are many (mostly airline and IATA) websites out there that offer Timatic service (albeit with a much more complicated interface), and access credentials could be easily fished by inspecting the source code of those websites.
No comments:
Post a Comment