Skip to main content  
        IBM i home   |   Easy400  
Public Source
  XML Ajax
XML Ajax CGI example 1
XML Ajax CGI example 2
JQuery Ajax
jQuery Ajax CGI example 1
JQuery Ajax CGI example 2

How to ... Ajax  
by Giovanni B. Perotti (Italy)

JQuery Ajax Page Load Engine (PLE)

1- About it

This HOWTOAJAX utility features a tool - Page-Load-Engine (PLE) - that makes use of JQuery Ajax rather simple.
Basically, PLE is a Javascript procedure invoking the load() JQuery Ajax procedure.
The nice of it is that
  • you do not need a JQuery event to make it work, you just call it from your Javascript functions by passing three parameters
  • you can use it both in static HTML pages and in dynamic HTML pages generated by CGIDEV2-based programs
  • you do not even need to know the JQuery language, as JQuery is hidden under the covers.

Just to see how it works, click one of the following buttons:
monnalisa   logo   vessels

2- How to use it

Follow the following steps:
  1. Include JQuery in your HTML page
    Do that by entering the following command in your HTML (recommended location: between the <head> and the </head> tags:
    <script src=""></script>
  2. Include the PLE tool in your HTML page
    Do the following in your HTML page:
    • If yourHTML page is a static one
      1. Make sure that Server-Side-Include (SSI) is supported by your HTTP instance.
        In your instance configuration file, the directive Options must specify the Includes option. Example:
        Options +ExecCGI -FollowSymLinks -SymLinksIfOwnerMatch +Includes -MultiViews -Indexes
      2. In your HTML page (recommended location: just before the </body> and </html> tags) insert the following command to include the PLE tool:
        <!--#include virtual="/howtoajax/html/PLEpageload.htm" -->
    • If your HTML page is generated by a CGIDEV2-based program
      1. Have your CGI program loading also the external IFS stream file /howtoajax/html/PLEpageloadCGI.htm .
        D extHtml         s           2000    inz('/mydir/myfile.htm +
        D                                     /howtoajax/html/PLEpageloadCGI.htm')
      2. Have your CGI program issuing the following HTML section before that the tags </body> and </html> are generated:
        Please note that file /howtoajax/html/PLEpageloadCGI.htm uses section name prefix <as400>. This will cause problems in your CGI programs using a different section name prefix (example </$>), as all HTML sections must have the same section name prefix.
        The suggested way out is to change your section names to prefix <as400>.
  3. Invoke PLE through your Javascript procedures
    To load an Ajax page, you need to call some procedure of yours that invokes procedure PLEpageload() passing three arguments:
    1. the URI of the page to be called
      • "/howtoajax/html/monnalisa.htm"
      • "/howtoajaxp/jqrasample.pgm"
    2. the query string for URI called ("*null" if no query string) Example:
      • "xcllname="+escape(vessels)
    3. the object ID of the HTML element where the loaded page will be located Examples:
    4. "location1"
    5. "location2"
    Look at the following example used in this page:
    when the button "monnalisa" is clicked, the page "/howtoajax/html/monnalisa.htm" is loaded to position "location1":
    <script src=""></script>
    function loadpage1(IDx) {
    ... ... ...
    <div id="location1"></div>
    ... ... ...
    <p>Press this radio
    <input type=radio id=radio1 onclick=loadpage1("radio1")>monnalisa</p>
    ... ... ...
    <!--#include virtual="/howtoajax/html/PLEpageload.htm" -->
    ... ... ...
  4. Debug tips
    • You may receive the following error message alerts:
      • target location id '...' not found Action: provide or correct the object ID of the HTML element where the loaded page will be located
      • HTTP error 403: page not found
        Action: correct the URI of the page to be loaded
      • Http error 500: the page sent by a CGI is either missing the Content-type header, or contains no data.
      • No page loaded: the query string used in invoking a CGI program not understood by that program (most common case)
    • If no page is loaded and none of the previous alert messages are received, improve diagnostics by inserting in any place of your HTML the statement
      <input type="hidden" id="pledebug" value="yes">

3- Living examples
  • This page is a static page making use of the Page-Load-Engine (PLE) tool.
  • A dynamic CGI page making use of the Page-Load-Engine (PLE) tool is JQuery Ajax CGI example 2.
Just ask your WEB navigator to display the page source.