How Do I Use AJAX with LiveCode Server?
This lesson will show you the basics of using AJAX with LiveCode Server by demonstrating how to create a simple auto-complete box.
What is AJAX?
The term "AJAX" refers to a web programming technique where JavaScript is used to perform an HTTP request from a URL. This allows dynamic content to be loaded from a database on the webserver without refreshing the page. It is very common in modern web sites and applications.
One of the most popular uses for AJAX is auto-completion. The user types text into a field, and the JavaScript automatically queries a script on the server as they type to suggest possible completions. In this lesson we show how to do this using LiveCode by creating a text field where the user enters their country.
This lesson uses the jQuery library to make the JavaScript as easy as possible. jQuery is a widely used library with good documentation at their site.
Create an HTML page with an auto-complete box
Create a file named "index.htm", open it into a text editor and add the code below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax Auto Suggest</title>
<script type="text/javascript" src="index_files/jquery.min.js"></script>
<script type="text/javascript">
function lookup(inputString)
{
if(inputString.length == 0)
{
// Hide the suggestion box.
$('#suggestions').hide();
}
else
{
$.ajax({
url: "autocomplete.lc?string=" + inputString,
type: "GET",
success: function(data) { lookupCallback(data); }
});
}
} // lookup
function lookupCallback(data)
{
if(data.length >0)
{
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
}
function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
<style type="text/css">
body {
font-family: Helvetica;
font-size: 11px;
color: #000;
}
h3 {
margin: 0px;
padding: 0px;
}
.suggestionsBox {
position: relative;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #212427;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList li {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #659CD8;
}
</style>
</head>
<body>
<div>
<form>
<div>
Type your county:
<br>
<input type="text" size="30" id="inputString" onkeyup="lookup(this.value);" onblur="fill();">
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="index_files/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow">
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
</form>
</div>
</body></html>The contents of the index_files folder mentioned in the code can be found in the sample stack bundle at the top of this page. Add the index_files folder and its contents to the same folder as the html file.
Create the LiveCode file that handles the AJAX request
In the same folder, create a file called "autocomplete.lc". Edit this with a text editor, and place the following LiveCode script into it:
<?lc
function getAutoComplete p_string
local tCompletionsFile
set the itemdel to "/"
put (item 1 to -2 of the filename of me) & "/countries.txt" into tCompletionsFile
local tCompletions
put url ("file:" & tCompletionsFile) into tCompletions
filter tCompletions with (p_string & "*")
local tTemplate
put "<li onClick=[[quote]]fill('[[tCompletion]]');[[quote]]>[[tCompletion]]</li>" into tTemplate
local tOutput
repeat for each line tCompletion in tCompletions
put merge(tTemplate) & return after tOutput
end repeat
delete the last char of tOutput
return tOutput
end getAutoComplete
put getAutoComplete($_GET["string"])
?>This code is called whenever the user enters some text in the field on the HTML page. It loads a text file which contains a list of possible countries (one-per-line) and filters out the countries which the user could be typing. It then returns appropriate HTML to display these.
Create the list of countries and upload to on-rev
We've done this for you by finding a list of countries on a website and using a quick bit of LiveCode in the message box to process it. The finished list is available at this URL: http://oliverk.on-rev.com/examples/autocomplete/countries.txt. (It is also in the zip file.) Save it to "countries.txt" in the same folder as the html file and LiveCode script. If you then upload the whole folder to your on-rev account, it should all work.
Torsten
"Download the source ZIP using the link at the bottom of the page"... I cannot find it, who can help me?
Kind regards,
Torsten
Heather Laine
Unfortunately i think the link originally used in this lesson is no longer available, and the sample stack used from an external source is gone. You will need to find some equivalent sample to work with perhaps by googling for it...
Marc
1. Get index.html:
wget http://oliverk.on-rev.com/examples/autocomplete/index.html
or use this code:
Ajax Auto Suggest
function lookup(inputString)
{
if(inputString.length == 0)
{
// Hide the suggestion box.
$('#suggestions').hide();
}
else
{
$.ajax({
url: "autocomplete.irev?string=" + inputString,
type: "GET",
success: function(data) { lookupCallback(data); }
});
}
} // lookup
function lookupCallback(data)
{
if(data.length >0)
{
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
}
function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
body {
font-family: Helvetica;
font-size: 11px;
color: #000;
}
h3 {
margin: 0px;
padding: 0px;
}
.suggestionsBox {
position: relative;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #212427;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList li {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #659CD8;
}
Type your county:
2. Create file autocomplete.irev and input source code:
[[tCompletion]]" into tTemplate
local tOutput
repeat for each line tCompletion in tCompletions
put merge(tTemplate) & return after tOutput
end repeat
delete the last char of tOutput
return tOutput
end getAutoComplete
put getAutoComplete($_GET["string"])
?>
3. Optional, download the file countries.txt:
wget http://oliverk.on-rev.com/examples/autocomplete/countries.txt
And change line 'put "/home/oliverk/public_html/examples/autocomplete/countries.txt"' into tCompletionsFile" into 'put "countries.txt" into tCompletionsFile"'
4. Open a webbrowser and request the index.html file.
Torsten
The URL of the demo was not correct, the extension was .html but the right one is .htm :-)
Try this: http://oliverk.on-rev.com/examples/autocomplete/index.htm
Heather Laine
Thank you Torsten, that does seem to be correct. I will edit the lesson to add the link.