Parent | Child | Previous | Next
 

How to Perform an Ajax Callback on an A5W Page

Description

This document describes how you can do an Ajax callback from a hand-coded .a5w page in Alpha Anywhere.

Discussion

In most Alpha Anywhere web applications, user defined Ajax callbacks are done in a Grid or UX Component. In these cases, there are built-in methods (using Action Javascript) that make doing an Ajax callback very easy.

However, there may be cases where you are hand coding an .a5w page and you would like to do an Ajax callback.

Create the pages

The first step is to create the .a5w page and the callback page. The callback page is also an .a5w page and it handles the Ajax callback made by the first page.

For example, here are two simple .a5w pages:

  • Page 1: ajaxCallback.a5w, does the callback

    <!doctype html>
<html>
    <head>
        <meta content="text/html; charset=unicode" http-equiv=Content-Type>
        <meta name=GENERATOR content="MSHTML 9.00.8112.16421">
        <script type="text/javascript" src="javascript/a5.js"></script>
        <script type="text/javascript" src="javascript/a5_url.js"></script>
        <script>
function doAjaxCallback() {
A5.ajax.callback('ajaxCallback.ajax.a5w','data1=value of data1');
}
        </script>
    </head>
    <body>
        <button onclick="doAjaxCallback();">
Click this button to do an ajax callback
        </button>
    </body>
</html>

  • Page 2: ajaxCallback.ajax.a5w, handles the callback

    <%a5
    dim msg as c 
    dim data1 as c = default ""
    msg = "This is a response generated by the .a5w page that handles the "
    msg = msg + "callback. The value of data1 that was submitted from the "
    msg = msg + "browser is: " + data1 
    dim ajaxResponse as c 
    ajaxResponse = "alert('" + js_escape(msg) + "');"

    ? ajaxResponse

%>

  • When Page 1 is displayed, is shows a button. When you click the button, an Ajax callback is made. The callback is handled by page 2, which executes some Xbasic on the server.

    Note that page 1 loads the Alpha Anywhere Javascript libraries (a5.js, and a5_url.js). This is very important. If you don't load these libraries, the A5.ajax.callback() function will not be defined!

    When you click the button on page 1, a Javascript function (defined in page 1) is called. This function is very simple. It just calls the A5.ajax.callback() function (which is defined in the Alpha Anywhere Javascript libraries).

    This function takes two arguments: the name of the .a5w page that will handle the callback, and any data that you want to submit to the callback page. The second argument is in the form of a query string. So, for example, if you wanted to submit three values to the callback page, you would write:

    A5.ajax.callback('ajaxCallback.ajax.a5w', 
'data1=value of data1&data2=alpha&data3=beta');

  • In this case the callback page is called 'ajaxCallback.ajax.a5w', but you are actually free to call the callback page anything you want. There is, however, an advantage in naming the callback page the same as the parent page (but with the .ajax.a5w extension). That's because when you publish any .a5w page, Alpha Anywhere will automatically publish any page of the same name that has a .ajax.a5w extension.

    Let's now look at what page 2 does.

    First, note that there is no html on page 2. The entire page is Xbasic code, enclosed in the standard <%a5 ... %> tags which indicate Xbasic code.

    The Xbasic in the callback page is executed when the callback is made. The Xbasic in the page can optionally send a response back to the browser. The response, which must be valid Javascript, is sent using the ? command.

    For example, in page 2, the Xbasic script computes a Javascript command (an alert box) and then sends that command back to the browser, using the Xbasic ? command.

    The callback page can send multiple Javascript commands back to the browser (by calling the ? command repeatedly), but it is more common to add all of the Javascript that you want to send back to the browser into a single Xbasic variable, and then emit that variable with a single ? command.

A Slightly More Complex Example

In this example, we have extended the example we are looking at to include a <div> tag on the page. When the callback is made, the contents of the div is updated with some text that is computed on the server.

  • Page 1: ajaxCallback.a5w, does the callback

    <!doctype html>
<html>
    <head>
        <meta content="text/html; charset=unicode" http-equiv=Content-Type>
        <meta name=GENERATOR content="MSHTML 9.00.8112.16421">
        <script type="text/javascript" src="javascript/a5.js"></script>
        <script type="text/javascript" src="javascript/a5_url.js"></script>
        <script>
function doAjaxCallback() {
A5.ajax.callback('ajaxCallback.ajax.a5w','data1=value of data1');
}
        </script>
    </head>
    <body>
        <button onclick="doAjaxCallback();">
Click this button to do an ajax callback
        </button>
        <br>
        <div id="div1"></div>
    </body>
</html>

  • Page 2: ajaxCallback.ajax.a5w, handles the callback

    <%a5
    dim msg as c 
    dim data1 as c = default ""
    msg = "This is a response generated by the .a5w page that handles the "
    msg = msg + "callback. The value of data1 that was submitted from the "
    msg = msg + "browser is: " + data1 
    dim ajaxResponse as c 
    ajaxResponse = "alert('" + js_escape(msg) + "');"

    ? ajaxResponse

    dim cmd2 as c 
    dim msg2 as c 
    msg2 = "The time on the server is: " +now()
    cmd2 = "$svs('div1','"+msg2+"');"

    ? cmd2

%>

See Also