RPG Web Apps With AJAX, JSON, And JQuery Lab Examples

RPG Web Apps with AJAX,JSON, and jQueryLab ExamplesJim m-method.cawww.system-method.caPlease send corrections and suggestions tojim.cooper@system-method.caNOTE: This handout is continuely updated. If you would like to receive the mostcurrent version, please e-mail jim.cooper@system-method.ca.You can download the free IceBreak Community Edition athttp://www.system-method.com/IceBreakCE.

2

Table of ContentsNAMING CONVENTIONS FOR THIS LAB .5SQLAA01 .7 INTRODUCTION TO BASIC WEB PAGE .7XHTML . 7BASIC XHTML (HTML5).7CASCADING STYLE SHEET (CSS) .7NO JQUERY, JSON, OR RPG HERE .7SQLAA02 .8 LINK TO JQUERY LIBRARY SOURCE FILE .8FREE DOWNLOAD .8USING THE DOCUMENT READY FUNCTION .8JQUERY FUNCTIONS AVAILABLE AFTER THE WEB PAGE HAS LOADED ALL OF IT ELEMENTS . 8SQLAA03 .9 SELECTORS: NAME, ID, AND CLASS .9SQLAA04 . 10 USING THE JQUERY TEXT AND HTML FUNCTIONS . 10SQLAA05 . 11 USING THE JQUERY APPEND FUNCTION . 11SQLAA06 . 12 USING THE JQUERY CLICK FUNCTION. 12SQLAA07 . 14 USING THE JQUERYEMPTY FUNCTION . 14SQLAA08 . 16 INPUT FIELDS . 16FOCUS FUNCTION. 16SQLAA09 . 18 KEYPRESS FUNCTION . 18USING THE ENTER KEY . 18SQLAB01. 20 INTRODUCTION TO JSON . 20JSON OBJECT . 20ASSIGN A JSON OBJECT TO A VARIABLE . 20SQLAB02. 21 JSON ARRAY . 21SQLAB03. 22 EXAMPLE OF JSON DATA . 22SQLAB04. 24 EXAMPLE OF JSON ARRAY OF EMPLOYEES . 24SQLAB05. 26 LOOPING THROUGH A JSON ARRAY . 26SQLAB06. 283

COMPLETE JSON EXAMPLE . 28SQL1102 . 31 RPG BUILD JSON DATA . 31EMPTY CONTAINER . 31SQL1103 . 34 BUILD JSON ARRAY IN RPG PROGRAM . 34LOOP THROUGH JSON DATA SENT FROM RPG PROGRAM. 34SQL1104 . 37 BUILDING AN HTML TABLE FROM THEJSON DATA . 37SQL1105 . 40 INPUT PARAMETERS . 40PASSING PARAMETERS ON AJAX CALL TO RPG PROGRAM . 40SQL1201 . 45 AJAX . 45RETRIEVING JSON DATA FROM AN RPG PROGRAM . 45FORMATTING NUMERIC DATA . 45SQL1202 . 48 BUILD AN HTML TABLE FROM JSON DATA . 48SQL1203 . 51 EMBEDDED SQL. 51SEARCH . 51SQL1204 . 54 INPUT FIELD . 54SENDING PARAMETERS TO RPG PROGRAM . 54RETRIEVING PARAMETER VALUES IN RPG PROGRAM . 54SQL1205 . 57 ERROR MESSAGE – ROW NOT FOUND . 57SQL1206 . 61 SQL JOIN . 61SQL1207 . 64 USING A CURSOR . 64BUILDING DROPDOWN LISTS . 64SQL1208 . 69 ICEBREAK I EXTJSMETA PROCEDURE . 694

Naming Conventions for This LabYou will be assigned a user profile and password to an IBM i. You will also be assignedto a Web server running on the IBM i. Your Web server account will include a folder onthe IFS and an application library.User ID:ICE2012Password:ICE2012System Name:174.79.32.158IP address:216.109.205.62Port Number:70IFS folder:ICEApplication Library:ICE5

6

SQLAA01 Introduction to basic Web page XHTML Basic XHTML (HTML5) Cascading Style sheet (CSS)No jQuery, JSON, or RPG hereFIGURE A-1SQLAA01.html web page !DOCTYPE html html lang "en" head meta charset "utf-8" / title Appendix A - SQLAA01 /title link type "text/css" rel "stylesheet" href "css/master.css" /head body h1 Getting Started /h1 /body /html FIGURE A-2HTML for SQLAA01.html7

SQLAA02 Link to jQuery library source file Free downloadUsing the document ready function FIGURE A-3jQuery functions available after the Web page has loaded all of it elementsSQLAA02.html web page !DOCTYPE html html lang "en" head title Appendix A - SQLAA02 /title meta charset "utf-8" link type "text/css" href "css/master.css" rel "stylesheet" / script type "text/javascript" src "/system/components/jquery/jquery-1-7-1.js" /script script type "text/javascript" (document).ready(function() {alert('The web page is loaded and ready.');}); /script /head body h1 Getting Started with jQuery /h1 /body /html FIGURE A-4HTML for SQLAA02.html8

SQLAA03 Selectors: name, id, and classFIGURE A-5SQLAA03.html web page !DOCTYPE html html lang "en" head meta charset "utf-8" / title Appendix A - SQLAA03 /title link type "text/css" rel "stylesheet" href "css/master.css" script type "text/javascript" src "/system/components/jquery/jquery-1-7-1.js" /script script type "text/javascript" (document).ready(function() { ('h2').html('Place content into name selector.'); ('#divid').html('Place content into id selector.'); ('.divclass').html('Place content into class selector.');}); /script /head body h1 Getting Started /h1 h2 This is heading 2 /h2 div id "divid" /div div class "divclass" /div /body /html FIGURE A-6HTML for SQLAA03.html9

SQLAA04 Using the jQuery text and html functionsFIGURE A-7SQLAA04.html web page !DOCTYPE html html lang "en" head meta charset "utf-8" / title Appendix A - SQLAA04 /title link type "text/css" rel "stylesheet" href "css/master.css" script type "text/javascript" src "/system/components/jquery/jquery-1-71.js" /script script type "text/javascript" (document).ready(function() { ('#div1').text('The id selector is loaded & ready.'); ('#div2').html('The id selector is loaded & ready.');}); /script /head body h1 Getting Started with jQuery /h1 div id "div1" /div div id "div2" /div /body /html FIGURE A-8HTML for SQLAA04.html10

SQLAA05 FIGURE A-9Using the jQuery Append functionSQLAA05.html web page !DOCTYPE html html lang "en" head meta charset "utf-8" / title Appendix A - SQLAA05 /title link type "text/css" rel "stylesheet" href "css/master.css" script type "text/javascript" src "/system/components/jquery/jquery-1-7-1.js" /script script type "text/javascript" (document).ready(function() { ('#container1').html(' p Web content goes here. /p '); ('#container1').append(' p Append more Web content on load. /p ');}); /script /head body h1 Getting Started with jQuery /h1 div id "container1" /div /body /html FIGURE A-10 HTML for SQLAA05.html11

SQLAA06 Using the jQuery Click functionFIGURE A-11 SQLAA06.html web page12

!DOCTYPE html html lang "en" head meta charset "utf-8" / title Appendix A - SQLAA06 /title link type "text/css" rel "stylesheet" href "css/master.css" script type "text/javascript" src "/system/components/jquery/jquery-1-7-1.js" /script script type "text/javascript" (document).ready(function() { ('#container1').html(' p Web content goes here. /p '); ('#container1').append(' p Append more Web content on load. /p '); ('#btnAppend').click(function() { ('#container1').append(' p Append more Web content when button clicked. /p '); ('h1').html('The Append button was clicked.');});}); /script /head body h1 Getting Started with jQuery /h1 div id "container1" /div button type "button" id "btnAppend" Append Button /button /body /html FIGURE A-12 HTML for SQLAA06.html13

SQLAA07 Using the jQueryEmpty functionFIGURE A-13 SQLAA07.html web page14

!DOCTYPE html html lang "en" head meta charset "utf-8" / title Appendix A - SQLAA07 /title link type "text/css" rel "stylesheet" href "css/master.css" script type "text/javascript" src "/system/components/jquery/jquery-1-7-1.js" /script script type "text/javascript" (document).ready(function() { ('#container1').html(' p Web content goes here. /p '); ('#container1').append(' p Append more Web content on load. /p '); ('#btnAppend').click(function() { ('#container1').append(' p Append more Web content when button clicked. /p '); ('h1').html('The Append button was clicked.');}); ('#btnClear').click(function() { ('#container1').empty(); ('h1').html('The Clear button was clicked.');});}); /script /head body h1 Getting Started with jQuery /h1 div id "container1" /div button type "button" id "btnAppend" Append Button /button button type "button" id "btnClear" Clear Button /button /body /html FIGURE A-14 HTML for SQLAA07.html15

SQLAA08 Input fields Focus functionFIGURE A-15 SQLAA08.html web page !DOCTYPE html html lang "en" head meta charset "utf-8" / title Appendix A - SQLAA08 /title link type "text/css" rel "stylesheet" href "css/master.css" script type "text/javascript" src "/system/components/jquery/jquery-1-7-1.js" /script script type "text/javascript" (document).ready(function() { ('input[type text]:first').focus(); ('#inputField').focus(); ('#btnSubmit').click(function() { ('h2').text('The Submit button was clicked.');});}); /script /head body h1 Getting Started with jQuery /h1 h2 Action here /h2 label for "inputField" Enter a value. Click the Submit Button: /label input type "text" id "inputField" / button type "button" id "btnSubmit" Submit /button /body /html FIGURE A-16 HTML for SQLAA08.html16

17

SQLAA09 Keypress function Using the Enter keyFIGURE A-17 SQLAA09.html web page18

!DOCTYPE html html lang "en" head meta charset "utf-8" / title Appendix A - SQLAA09 /title link type "text/css" rel "stylesheet" href "css/master.css" script type "text/javascript" src "/system/components/jquery/jquery-1-7-1.js" /script script type "text/javascript" (document).ready(function() { ('input[type text]:first').focus(); ('#inputField').focus();// this or// this ('#btnSubmit').click(function() { ('h2').text('The Submit button was clicked.');}); ('#inputField').keypress(function(event) {if ( event.keyCode 13 ) { ('h2').text('The Enter key was pressed.');}});}); /script /head body h1 Getting Started with jQuery /h1 h2 Action here /h2 label for "inputField" Enter a value. Click the Submit Button or press Enter: /label input type "text" id "inputField" / button type "button" id "btnSubmit" Submit /button /body /html FIGURE A-18 HTML for SQLAA09.html19

SQLAB01 Introduction to JSON JSON object Assign a JSON object to a variableFIGURE B-1SQLAB01.html web page !DOCTYPE html html lang "en" head meta charset "utf-8" / title Appendix B - SQLAB01 /title link type "text/css" rel "stylesheet" href "css/master.css" script type "text/javascript" src "/system/components/jquery/jquery-1-7-1.js" /script script type

RPG Web Apps with AJAX, JSON, and jQuery Lab Examples Jim Cooper Jim.cooper@lambtoncollege.ca Jim.cooper@system-method.ca www.system-method.ca