|TechTip: jQuery Fundamentals, Part I|
|Tips & Techniques - Web Languages|
|Written by Jan Jorgensen|
|Friday, 07 September 2012 00:00|
What should you, as an RPG programmer, know about jQuery?
For a very long time, I've been writing about jQuery, and some of you might wonder why on earth I keep "preaching" about this. I'll tell you why. Based on the email I get about my articles, the user group meetings I attend, and the programmers I work with on a daily basis, I really think jQuery is the medicine that can save us from being one of those old green-screen programmers who just sits there in the back, writing batch programs for our beloved IBM i.
So I keep talking about jQuery because it, combined with RPG or PHP, gives the users that little extra flavor that makes them feel that your application is just a bit better; it leaves them with the feeling that this old dog really can learn some new tricks.
This series of TechTips will show you some basic jQuery stuff that at first glance might seem very basic, but combined with your knowledge of RPG, it will give you a powerful tool pointing to the future.
When you want to manipulate one or more HTML elements on a Web page using jQuery, you do it by using a selector. A jQuery selector is one of the most important parts of the jQuery library, and it's therefore vital that you understand it.
All types of selectors in jQuery start with the dollar sign and parentheses, like this: $().
Below I have listed the selectors I use the most in my daily work:
There are of course a lot more, but these will sure get you started.
I will now start showing some examples. The examples are not necessarily very useful and are not supposed to be, but they serve the purpose of showing you how you can do things on a Web page.
Example 1: Reading the Content of an Input Field When Clicking a Button
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd value="
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- Get the jQuery library -->
// jQuery loaded
var myValue = $("#myInput").val()
$("#myOutput").val( myValue + ' (1)');
$("#myOutput").val( $("#myInput").val() + ' (2)');
// When placing the cursor in the input field select all text and save it in the saveText container
var myValue = $("#myInput").val();
// Save it in <div> container
$("#saveText").append( myValue + '<br>' ) ;
// Clear input field
<b>Reading the content of an input field when clicking a button</b>
Enter some text: <input id="myInput" type="text" size="40" value="Enter some text">
<input type="button" id="myButton1" value="Get Text (1)">
<input type="button" id="myButton2" value="Get Text (2)">
<input readonly id="myOutput" type="text" size="60" style="border: 1px solid #999999">
In this first example, I have listed all the code just to give you an idea what happens. In the following examples, I will not list the code because of the lack of space. But each one has a link you can click to see the example in action and a short description of what the example does. Then, just right-click on the example page and select Source to see all the code. At the end of the TechTip, you can download a zip file that contains all the examples.
So here's what happens in example 1.
Bind the click event to the button named "myButton1". This means that when you click the button, the code inside the function will be executed.
To address the ID of the input field named "myInput" by using the ID-selector, the program will use the .val() function to retrieve the input of the field and save it in a variable named "myValue". It will then use the ID-selector named "myOutput" and the .val function to write the retrieved content into the myOutput field.
To show you which button was clicked, the constant (1) will be added to the end of the data.
When you click "myButton2", the same happens as when clicking "myButton1", but instead of using a variable, the selectors are merged into each other. The result is the same, and the reason I show you the two examples is that despite the fact that the click on "myButton2" saves a variable, the code very often gets hard to read and hard to debug if any of those parentheses or brackets gets mixed up. So my preferred method is the one shown at a), but of course it's up to you.
Here, I made a little logging feature mainly to show just how easily you can do things in jQuery.
What the .focus function does is the following:
When the field is focused, retreive the content.
Append it to a div container using the .append function.
Clear the input field.
Define the input field with id "myInput".
Define the buttons to handle the text.
Define the output field with id "myOutput" and with a delicate little touch of CSS.
The div container holds the text from the input field when the .focus event is fired.
As you can see, not much code is required to do all this stuff because everything is hidden away inside the jQuery library.
So let's move on to some more examples.
Example 2: Using a Class Selector to Manipulate Buttons and Text
In this example, I show you how a simple mouse-click can change the whole look of a Web page by using a class selector and some CSS classes. The jQuery .addClass and .removeClass functions are used to handle the layout. Also note that the buttons defined with <input> and <button> have to be handled a little differently to accomplish the same effect.
Example 3: Reversing Background Color and Font Size Using Odd/Even Selector
This example shows how to use the even/odd selector to change the background color of the <tr> element within a <table>. By clicking a button, that background color will be set, and another button will reverse the colors.
This is the first TechTip in my jQuery fundamentals series, and I hope it raises an eyebrow in an office somewhere.
I will keep writing about jQuery in the near future, and you will be presented with things like CallBack functions, ways to save data on the fly using AJAX, and much more. So stay tuned, and give jQuery a chance to prove its value in your everyday programming life.
|Last Updated on Friday, 07 September 2012 08:01|