Skip to main content  
        IBM i home   |   Easy400  
Public Source
 
  XML Ajax
XML Ajax CGI example 1
XML Ajax CGI example 2
JQuery Ajax
 Page-Load-Engine
jQuery Ajax CGI example 1
JQuery Ajax CGI example 2
 Download
 
 

 
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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></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 .
        Example: 
        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: 
             wrtsection('PLEpageload');
        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
      Examples:
      • "/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": 
    <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
function loadpage1(IDx) {
   x="/howtoajax/html/monnalisa.html";
   y="*null";
   z="location1";
   PLEpageload(x,y,z);
}
</script>
</head>
<body>
... ... ...
<div id="location1"></div>
... ... ...
<p>Press this radio
<input type=radio id=radio1 onclick=loadpage1("radio1")>monnalisa</p>
... ... ...
<!--#include virtual="/howtoajax/html/PLEpageload.htm" -->
... ... ...
</body>
</html>
  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.