Fbloggs Geekdom

I’ve written a few articles in recent years that have been published by MC Press Online, relating to IBM i topics. If you don’t know what the IBM i is (or an AS/400, iSeries or System i), you can stop reading! Here are two lists of links to those articles. The first list is general education. The second is product-specific, related to products marketed by my company. (Articles are ordered by most recent first)

Educational Articles

• PHP: What Can You Do with It on Your System i?
• Learn How JavaScript Can Help Create Dynamic Web Browser Interfaces
• Jazz Up Your Web Site by Customizing PHP Templates
• Build Upon the Strengths of Your Legacy Systems
• Essential Skills for System i Web Development, Part II
• Essential Skills for System i Web Development, Part I
• How to Get Out from Under an Obsolete Legacy Technology
• PHP: A Party Waiting for a Few Good Developers
• Use AJAX for Bright and Shiny Web Apps, Part 2
• Use AJAX for Bright and Shiny Web Apps

Product-Specific Articles

• Product Review: WebSmart PHP Opens the System i to PHP Development
• Partner TechTip: Transform Spool Files into Meaningful Information
• Product Review: WebSmart PHP Beta Opens the System i to PHP Development
• Product Review: BCD’s License-Free Nexus Portal
• Partner TechTip: Get Your Data Organized!
• Product Review: BCD’s WebSmart
• Partner TechTip: Empower Users to Create and Run Real-Time Queries
• Portals: Gateways to Whole New Worlds

Tags: AJAX, AS/400, Catapult, Clover, IBM i, iSeries, JavaScript, Nexus, php, Portal, Query, System i, Web Development, WebSmart

Feedback is a jQuery plugin that lets you send feedback to a user in the form of an info message or error message, associated with any page element. It uses the jQuery UI plugin to determine the default styles of the info and error messages, but you can also use your own styles. Complete details, including demo, documentation and downloads are on this page.

Tags: JavaScript, jQuery, jQuery plugin, jQuery UI, plugin, Web Development

Firebug – debug your applications. An absolute must. Best features:

• Debugger – step through, over, etc.
• Console log for monitoring AJAX interactions -shows parms sent, data returned, round-trip time.

Web Developer – fantastic CSS diagnostic support. Best features:

• View generated source – important if your script modifies the original DOM of your page
• Display Element Information – shows all the properties of an element in a convenient popup. To use, press Ctrl+Shift+F or select menu Information/Display Element Information
• Edit CSS – lets you edit the CSS selectors in real-time, and shows you the results – almost as you type

MeasureIt. Lets you find the height and width of any element or area of the page, in pixels. Helps diagnose CSS issues, for example, when you use combinations of margin, width, padding and border attributes.

Codeburner from Sitepoint, one of my favorite online journals (www.sitepoint.com). Integrates with Firebug to provide comprehensive cross-reference information on HTML and CSS. Best feature:

• Browser compatibility tables

Tags: CSS, FireFox, JavaScript, jQuery, Web Development

Summary: Quirks of checkbox markup in HTML – differences between IE and FireFox…

Tags: Browser differences, HTML, JavaScript, Web Development

This post explains how to set a group of checkboxes to checked or unchecked using jQuery 1.3, by clicking an “All” or “None” button.

First, let’s select our group of checkboxes. I’ve seen some fairly complicated jQuery selectors for finding checkboxes on a page, but it seems to me the easiest thing to do is just assign a common class to each one in a group, even if you don’t define the class in your stylesheets. Like this:

<input type="checkbox" class="selsts" name="selsts" value="E"> Emailed
<input type="checkbox" class="selsts" name="selsts" value="W"> Work in Progress
<input type="checkbox" class="selsts" name="selsts" value="P"> Pending client call
<input type="checkbox" class="selsts" name="selsts" value="R">R-Returned call

the jQuery selector for this is: $(".selsts") .

We could also select all the elements based on their common name, which I think goes like this: $(['name=selsts']) .
But I prefer classes, because you can easily change their names without affecting server-side code that may be dependent on form field names.

Let’s say we have two buttons on our page, using the following markup:

Select: <input type="button" id="allsts" value="All">, <input type="button" id="nosts" value="None">

To make all our checkboxes checked:

$("#allsts").click(function() {
$(".selsts").attr('checked', true);
});


To uncheck all the checkboxes:

$("#nosts").click(function() {
$(".selsts").attr('checked', false);
});


That’s it.

To determine if a checkbox is checked or not, we can loop through the array like this:

$('.selsts' ).each( function() {
var isitchecked = this.checked;
});

Or, individually:

if ($('#somecheckbox').checked == true) { blah blah ... }


Tags: JavaScript, jQuery

FireFox doesn’t have a native global event handler. Here’s how to create one using FireFox’s event-capturing model.

Tags: Browser differences, FireFox, IE, JavaScript, Web Development

Firebug beta 1.0 is now available. This is by far the best toolbar available for FireFox or IE for debugging web applications. See This blog entry at Sitepoint for more details.  A few  of the features I really like are:

• The debugger  – identifies exact line of script in error.
• The HTML view – lets you view contents of externally linked Javascript files, also.
• The CSS inspector – shows you all ancestor css rules for elements, not just the current CSS rule, so you can see the total effect of the cascade.
• The ability to change CSS settings on the fly. For example, hover over a color, click on it, then change the RGB value to see another color – it does this for the specific area on the page, as well as in the sheet.

Tags: FireFox, JavaScript, Web Development

Ok, so JSON is conceptually simple. See json.org for more info. So I include json.js in a page, then attempt to reference the parseJSON method of a string object and get an error. Why? Is it because I reference the method in another external script file, instead of using inline script in the page itself? How exactly does Javascript run the code to extend the prototype of an intrinsic object? Is it prior to the page loading? Help!   BTW – I can get this working no problem in a simple page where the script is inline.

I confirmed that click is not a W3C method for anchor objects. However, thanks to the prototype property of objects you can extend a host object by adding methods to it. The code below does this for anchor elements, although you could do it for any element. Credit to Martin Honnen for his article at http://www.faqts.com/knowledge_base/view.phtml/aid/9368 for the solution. Here’s the code, which just needs to be in the top of your page so that it runs prior to any scripts at document load time:


try {
// create a element so that HTMLAnchorElement is accessible
document.createElement('a');
HTMLElement.prototype.click = function () {
if (typeof this.onclick == 'function') {
if (this.onclick({type: 'click'}) && this.href)
window.open(this.href, this.target ? this.target : '_self');
}
else if (this.href)
window.open(this.href, this.target ? this.target : '_self');
};
}
catch (e) {
alert('click method for HTMLAnchorElement couldn\'t be added')
}


Javascript Stuff

Tip: Local versus global variables- use the var keyword to declare a variable as local.  

Tip: don’t write this:     var x;   

because x will be undefined. Write this instead: var x = 0; // or some other initial value.

Question: the click method for anchor tags does not appear to work in FireFox. Can anyone confirm this? Here’s a piece of code that fails:
var anchortag = document.getElementsByTagName("a")[0];
anchortag.click();