How Do I Use AJAX with LiveCode Server?

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.

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 at Nodstrum.com.

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.

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);
}
}

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.

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.