This article is designed to get you interested in using jQuery, using plugins, and being a better developer for your customers, users, and bosses.

As I've mentioned a few times before, I like a web interface that acts like a real interface—you know, applications written in C, Objective-C, or Java. This is something that RPG, in my opinion, is really missing, and it doesn't seem that IBM will ever change the language to be a real "web" language.

So if you're sitting at your IBM i and wanting to create an application running in a web browser, what can you do?

There are several solutions. You can use RPG to push the data to the browser by using one of the many tools that you can find around the web—RPG CGI, PHP, CGIDEV2, IceBreak, or some other tool that will help you read data from the IBM i and display it in a web browser. Some of them are free, and some will cost you money. Of course, this is a big decision to make, and because I'm a little tight with my money, I have mostly used RPG CGI and PHP so that I don't have to buy anything to get my data to the browser.

Regardless of which tool you're using to web-enable your IBM i data, one particular language is used to offer functionality, and that's JavaScript. I know you might say, "What about HTML and CSS?" Well, sure, but they're just helpers to format the page. I'm sure we've all seen web applications that will access a server application if you select a checkbox or if you submit a form that needs validation, and then it starts making your screen reload and blink. You even might have to wait while the server fetches the data and some ugly error line appears on your screen. Not very elegant or user-friendly if you ask me.

That's why JavaScript comes in handy. It offers AJAX, ability to change colors, form validation, setting/removing of messages directly in the browser, etc. And it does so fast and elegantly. No blinking, no reloading—just a nice interface that acts modern and looks great. You might say that JavaScript is cumbersome to learn and that it requires tons of code to create a good interface. You already know my answer to that because I've written about it over and over again in MC Press Online. To me, the Holy Grail is the jQuery JavaScript library, which contains all the functions you might ever think of and offers a pretty easy syntax when you first get started. But what if there's something else you need, something that's not within the standard jQuery core package? Well, the answer to that question is, use a jQuery plugin.

What's a jQuery Plugin?

A jQuery plugin is JavaScript code that "plugs in" to jQuery's prototype object to extend the object and create new methods. There are thousands of plugins on the 'net, and I daresay that whatever you need, some clever person out there has already written the code for it. And if not, you can do it yourself.

In this article, I have selected three plugins that I find very useful and have used in various situations. I can tell you that it was hard to select just three. Some plugins offer a lot of functionality, and some of them are very simple to use, but they all make my programming life a little easier.

Because I'm moving a lot of my web programming to tablets these days, the plugins I have chosen will run on both a PC and a tablet, and, if you want, also a mobile phone.

I'll provide you with some simple examples to get you started and some links to the pages where you can find the plugins and read all about the functions they offer. You can donate some money if you find the plugins useful for you.

So let's pull the plug and jump in.

Tablesorter by Christian Bach

Many people don't like tables on their websites. They use div tags within div tags to simulate a table. Sure, that will work. But tables are still found everywhere, and I admit that I use them a lot. I find them easy to implement; they do a lot of the job for you; and when you have a plugin like tablesorter, they really come in handy.

Tablesorter does just what it says: it lets you sort tables in any way you want. To this day, I'm still impressed by all the functions provided by this fantastic plugin.

To make a basic sort, you must define a table like the one in example 1.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="Author" content="Jan Jorgensen, Reeft A/S" />

<title>Example 1 - Table Sorter</title>

<script src="/javascript/jquery.min.js"></script>

<script src="/javascript/jquery.tablesorter.min.js"></script>

<style type="text/css">

.header {

      font-size: 1.4em;

      font-weight: bold;

}

</style>

<script language="JavaScript">

<!--

//=============================================================================

// jQuery

//=============================================================================

$(document).ready(function() {

      $("#Table01").tablesorter();

});

// -->

</script>

</head>

<body>

<div class="header">Table Sorter - Example 1</div>

<p>

<table id="Table01" class="tablesorter">
<thead>
<tr>
    <th>Type</th>
    <th>Artist</th>
    <th>Year</th>
    <th>Title</th>
</tr>
</thead>
<tbody>

      <td>LP</td>

      <td>10.000 Maniacs</td>

      <td>1987</td>

      <td>In My Tribe</td>

</tr>

<tr>

      <td>LP</td>

      <td>10.000 Maniacs</td>

      <td>1989</td>

      <td>Blind Man's Zoo</td>

</tr>

<tr>

      <td>LP</td>

      <td>18th Dye</td>

      <td>2008</td>

      <td>Amorine Queen</td>

</tr>

<tr>

      <td>CD</td>

      <td>1990s</td>

      <td>2007</td>

      <td>Cookies</td>

</tr>

<tr>

      <td>CD</td>

      <td>1990s</td>

      <td>2009</td>

      <td>Kicks</td>

</tr>

…..

</tbody>

</table>

</body>

</html>

Example 1: Make a table sortable using tablesorter.

You can see the example live here.

In example 1, I load some table data and give the table an id, which is Table01. Then, in the jQuery .ready function, I apply the tablesorter plugin to the table. Suddenly, you can click on the headings, and the table will be sortable right away.

But what if you want to make it look just a little more fancy? Well, tablesorter provides some themes that can be added to the table as well. The first time the page are displayed I want the table to be sorted in year descending and then artist ascending. I define the table the same way as in example 1, but as you see in example 2, I init the table in a different way.

<script language="JavaScript">

<!--

//=============================================================================

// jQuery

//=============================================================================

$(document).ready(function() {

      $("#Table01").tablesorter({

       // sort on the first column and third column, order asc

            widgets: ['zebra'],

       sortList: [[2,1],[1,0]]

   });    

});

// -->

</script>

Example 2: Force a table sort order and add a widget.

As you can see, I added a widget called "zebra," which will add even/odd colors to the table.

Then I give the plugin an array as a sort list, telling tablesorter to sort on column 3 (note that the columns are zero-based), and the second parameter is 1, meaning to sort descending and then sort on column 1, this time ascending.

You can see the result live here.

Tip: To sort on more than one column, hold the shift key down and click on the column you want to sort on.

This completes the tablesorter plugin. Of course, you can do a lot more. So point your browser to the tablesorter website, where you'll find documentation, examples, and a lot more that will help you make your tables more alive on your website.

jQuery.ScrollTo by Ariel Flesler

When you create webpages on a touchscreen (meaning no keyboard), scrolling is a nightmare. Users must place their fingers on the scrollbar on the side or in an iframe in the middle of the screen. Imagine this in a production plant where the people use gloves to protect their hands. Well, you have to come up with something clever.

And that's just what ScrollTo does! It lets you scroll in any direction using a click on a button or a link.

I knew that the iframe had a height of 500 pixels. An RPG CGI program created the data shown in the iframe, and I knew that there could be about six lines in the iframe. The font size is big because the operator has to be able to see the screen from a distance before pressing the scroll buttons. So I created a counter that, for every sixth line, would insert the four buttons on the webpage, and then I created four small functions to handle the scrolling. Of course, I could have created one function and passed a parameter to it, depending on the button push, but I like to keep it simple.

The example I'll show you is a clone of the page we made for the production plant. What it does is the following:

• Shows some data in a table with some CSS inside to make the table scrollable on the screen
• Provides four buttons: one that scrolls 380 pixels down for each push/click, one that scrolls 380 pixels up for each push/click, one that scrolls to the bottom, and one that scrolls to the top

Below you will see a subset of the code that creates the page:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="Author" content="Jan Jorgensen, Reeft A/S" />

<title>

ScrollTo - example 1

</title>

<script src="/javascript/jquery.min.js"></script>

<script src="/javascript/jquery.scrollTo.min.js"></script>

<style type="text/css">

.buttonClass {

      border: 2px solid black;

      width:95px;

      height:25px;

      line-height:25px;

      font-size:1.2em;

      text-align:center;

      background-color:#B8CCE4;

      position:relative;

      float:left;

      margin-right:10px;

      cursor: pointer;

}

.clear{

   clear: both;

}

.header {

      font-size: 1.2em;

      font-weight: bold;

}

tbody {

      width: 800px;

      height: 400px;

      overflow: auto;

}

thead{

      font-size: 1.0em;

      background-color: #e8e8e8;

}

td {

      font-size: 1.0em;

}

thead > tr, tbody

{

   display:block;

}

.odd {

      background-color: #89A54E;

}

.even {

      background-color: #DB843D;

}

</style>

<script language="JavaScript">

<!--

//=============================================================================

// Scroll Down

//=============================================================================

function scrollDown() {

      $('#tabledata').scrollTo( '+=380px', 800 );

}

//=============================================================================

// Scroll Up

//=============================================================================

function scrollUp() {

      $('#tabledata').scrollTo( '-=380px', 800 );    

}

//=============================================================================

// Scroll to top

//=============================================================================

function scrollStart() {

      $('#tabledata').scrollTo( '0', 1200 );   

}

//=============================================================================

// Scroll to bottom

//=============================================================================

function scrollBottom() {

      $('#tabledata').scrollTo( 'max', 1200 ); 

}

//=============================================================================

// jQuery

//=============================================================================

$(document).ready(function() {

      // Add some colors to the table...

      $("#tabledata > tr:odd").addClass("odd");                

      $("#tabledata > tr:even").addClass("even");  

});

// -->

</script>

</head>

<body>

<div class="header">ScrollTo - Example 1</div>

<p>

<div class="buttonClass" onclick="scrollDown()">Down</div>

<div class="buttonClass" onclick="scrollUp()">Up</div>

<div class="buttonClass" onclick="scrollStart()">Top</div>

<div class="buttonClass" onclick="scrollBottom()">Bottom</div>

<p class="clear">

<br>

<table cellpadding="5" cellspacing="0" border="1">

<thead>

<tr>

<td style="width:65px">Type</td>

<td style="width:213px">Fullname</td>

<td style="width:32px">Year</td>

<td style="width:442px">Title</td>

</tr>

</thead>

<tbody id="tabledata">

<tr>

      <td>LP</td>

      <td>10.000 Maniacs</td>

      <td>1987</td>

      <td>In My Tribe</td>

</tr>

<tr>

      <td>LP</td>

      <td>10.000 Maniacs</td>

      <td>1989</td>

      <td>Blind Man's Zoo</td>

</tr>

Example 3: Create ScrollTo page-width buttons.

As you can see, the most complicated thing about this page is the CSS.

The scrollDown/Up/Top/Bottom functions use the scrollTo plugin to scroll the amount I want to scroll.

But scrollTo can do so many more things. It can scroll the whole window or scroll to elements, raw numbers, and much more. So head over to the demo page and have a look for yourself.

Please note the clever little trick I used to add even/odd colors to the table row in the .ready function.

You can see my live example here. (Please note that this is made for a tablet or phone, so if you want to use it in IE, you will have to tweak the CSS to make it work as expected. Firefox and Chrome will do fine.)

jQuery UI Touch Punch by David Furfero

The last plugin I will show you is so small that it takes up only 584 bytes. It doesn't have any options, methods, or anything else. You cannot tweak it in any way, and all it does is sit in the background and do its thing.

You might notice that I already used it in an article called "Let Your Fingers Do the Walking with jQuery," I really see it as the most important of all.

Here's the story. When you get a little more into jQuery, you'll soon start using jQuery UI and you'll discover drag, drop, sliders, and all the other nice features that UI offers. You'll make nice webpages that will work like a charm, and the boss will say, "Wow! This is cool. I also want to use this on my iPad." And you'll reply, "No problem, sir. Just point the Safari browser to this address." But when your boss does, nothing will happen. Your drag and drop won't work, your sliders won't work, and you'll be feeling like the dumbest jerk in the office. But then you'll be so happy when your boiling brain remembers jQuery UI Touch Punch. Quickly, you'll download it and add it after the jQuery UI declaration. Then, you'll then go back to your boss, looking like you just invented the wheel, and say "Sir, please refresh page 2." He might need a little help here, but, my dear friend, the result is stunning. It works! Your drag and drop, and slides, and all the fancy stuff you created are back to life. And all thanks to jQuery UI Touch Punch, the little hack to jQuery UI that will make it work on touch devices. And that's why this little plugin is on my list.

Point your browser to . There are some tests, and you can donate if you want.

But wait! There's more!

The Final Plug

I have now shown you a little bit (hardly anything really) of the world of jQuery plugins. If you search on Google, the plugins you'll find can be overwhelming and you'll soon lose your way. So whenever I have a problem that I cannot figure out in jQuery, I Google it, and very often, I'll find a plugin that way or I'll "steal" an idea from a plugin that's very close to what I need.

To give you a little more taste of the sweet world of jQuery plugins, I've compiled a small list that shows you some of the plugins that I have stumbled upon during my daily work.

FancyBox is a tool for displaying images, HTML content, and multi-media in a Mac-style "lightbox" that floats over the top of the webpage.

MixItUp is a jQuery plugin providing animated filtering and sorting. Just amazing…

Have a look at Hasin Hayder's page called The Badass List of Essential jQuery Plugins. Here you'll find cool stuff. Some of it's useful, and some of it's just over the top, but still you will be amazed by what you can do in a browser.

Final note: The examples I provide are not 100% (you can get all the code for this article here). They might need a little tweak here and there. But that's not the point. The point is to make you interested in using jQuery, using plugins, and being a better developer who will develop web applications that do the job for your customers, users, and bosses.

Till next time, have a look at "Detect Shake in Phone Using jQuery." Did you know you could do that?

Jan Jorgensen is one of the owners of www.reeft.dk, which specializes in mobile and i5 solutions. He works with RPG, HTML, JavaScript, Perl, and PHP. You can reach him at This email address is being protected from spambots. You need JavaScript enabled to view it.. 

 

Also Read

TechTip: A Primer to Bootstrap 4, Part 2

TechTip: A Primer to Bootstrap 4, Part 1

A Hand-Holding App Builder for Handheld Devices