JSON calls between Iguana and the GUI in Javascript
Contents
The GUI is all implemented using Javascript using AJAX calls with JSON. It makes use of the powerful jQuery library.
For convenience and speed the jQuery library is loaded from the Google content delivery network as you can see in the HTML template:
<html> <head> <title>Custom Configuration GUI</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="?method=file&file=script.js"></script> <link rel="stylesheet" type="text/css" href="?method=file&file=configure.css"> </head> <body> </body>
As you can see the HTML code here is trivial. All the real work is done with Javascript leveraging the jQuery library. The setup of the screen is done using the jQuery onReady event:
$(document).ready(function() {
// One could get more elaborate with reading the 6543 HTTP port from the Iguana configuration file here.
$('body').html ( '<p><a href="http://' + location.hostname + ':6543/">Dashboard</a> > Channel <span id="channel_select"></span></p><hr> <table>
<tr><th>Application:</th><td><input type="text" id="sending_app"></td></tr>
<tr><th>Facility:</th><td><input type="text" id="sending_facility"></td></tr></table><p>
<hr><a href="#" id="save_settings">Save Settings</a> | <a id="show_channel" href="#">Show Channel</a>');
$.getJSON('/configure?method=channel_list', function(Data) { PopulateChannelSelect(Data); });
$('#show_channel').click(ShowChannel);
$('#save_settings').click(SaveSettings);
});
The AJAX call to /configure?method=channel_list retrieves a JSON list of channels with their associated GUIDs. This is implemented in the back end using the method table handler:
function ChannelList(Request)
local List = channel_info.ChannelList()
local OptionList = {}
for i = 1, #List do
OptionList[i] = List[i]
end
net.http.respond{body=json.serialize{data=OptionList}, entity_type='text/json'}
end
The JSON that is returned is like this:
[
{
"name": "ADT",
"guid": "26C4F66CE4317E00967271F0259224DB"
},
{
"name": "Simple",
"guid": "0B619A807569589759ADBF27CE771CC6"
},
{
"name": "Query",
"guid": "E1B526517C7940A9C1F2AED85069B0A7"
},
{
"name": "Demo Query",
"guid": "D8C451BC92301318AB97B98BD0ED7B2A"
},
{
"name": "ADT In",
"guid": "D209ACF5E8AE2B44EC8743B39FC3C646"
}
]
There are similar calls to load and save the contents of the form are all implemented in a similar manner using AJAX calls with JSON. It’s quite straightforward.