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.
Get a HTML page with an auto-complete box
As this is a LiveCode Server lesson, we don't spend too much time looking at the basic HTML page. Instead we just take it from an existing AJAX auto-complete tutorial from the web.
Download the source ZIP using the link at the bottom of the page and you should have a fully working AJAX auto-complete example that depends on a MySQL database and PHP. Don't bother setting up the database for now. Although using a database for this is a good idea and probably the best way to do this for a production application, we'll use a text file instead so we can skip to the important parts.
Modify the HTML page to use LiveCode instead of PHP
Open up the HTML page in a text editor and find the JavaScript section near the top. There is a function called "lookup". This needs to be replaced with our own version which uses a LiveCode page. The new code is shown below. Note that we've split off the callback into a separate function for clarity and changed the AJAX request a little, but the logic from the original script stays intact.
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);
}
}
Create the LiveCode file that handles the AJAX request
In the autocomplete folder, next to the other files including index.htm, create a file called "autocomplete.lc". This will replace the file "rpc.php". Edit this with a text editor, and place the following LiveCode script into it:
<?lc
function getAutoComplete p_string
local tCompletionsFile
put "/home/oliverk/public_html/examples/autocomplete/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. Save it to "countries.txt" in the autocomplete folder. If you then upload the whole folder to your on-rev account, it should all work.
0 Comments
Add your comment