You may have noticed that all of my code snippets up to this point have required something called "jQuery" and I've been remiss in not giving a more basic background of what this thing really is, what it can do for you and your iForms, and (maybe even more importantly) what it can't do for you.
jQuery is what is called a "javascript framework." That is to say, it's a library that helps make some javascript functions easier. If you at a facility that is not using javascript in your iForms and don't have plans (or the ability) to do so, then this has no bearing on your processes and, unfortunately, most of the "code" things that you'll see on this site will be out of your scope. However, if your facility is using javascript, but would like to expand your functionality, I'd recommend using a javascript framework / library such as jQuery (and there are others) to enhance your capabilities.
What is jQuery
jQuery is self-described as "a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript."
And the wise folks at Wikipedia describe jQuery as:
jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 55% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.
jQuery is free, open source software, dual-licensed under the MIT License or the GNU General Public License, Version 2. jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications.
So, long story short, jQuery makes it easier for you to build interactivity into your iForms.
What Can jQuery Do For Your iForms
Easier DOM Reference
One of jQuery's best features is its shortcuts and flexibility for referencing one or more DOM elements (the "DOM" is the Document Object Model and is how javascript references objects in the document). For example, look at the two ways to reference an object in your page:
// Using native JavaScript
var chkJS = document.getElementById('myCheckbox');
// Using jQuery
var chkJQ = $('#myCheckbox');
Now, that in an of itself saves some code, but isn't all that impressive. Where jQuery really can shine are in the areas of acting on multiple form elements, and DOM element manipulation.
Multiple Element Selection
You may have noticed that the syntax for selecting the "myCheckbox" form element in the example above matches how elements are referenced in the CSS world. Other CSS syntaxes work with jQuery as well. For example, $('.medCheckbox') would return an array of all of the form elements with the "medCheckbox" class. This comes in particularly handy, for example, when you need to find out what value is checked in a radio button group.
function js() {
var rdo = document.myForm.myRadio,
rdoValue;
for (var i=0; i < rdo.length; i++) {
if (rdo[i].checked) {
rdoValue = rdo[i].value;
}
}
document.getElementById('outputCell').innerHTML = 'Pure JavaScript says ' + rdoValue;
}
function jq() {
var rdoValue = 'jQuery says ' + $('input:radio[name="myRadio"]:checked').val();
$('#outputCell').text(rdoValue);
}
(play with this code at jsFiddle)
So in place of a loop function in pure JavaScript, checking each element to see if it is checked, you can use one single jQuery reference $('input:radio[name="myRadio"]:checked');
What that's saying is "get me all the input elements that are radio buttons that have the name myRadio that are also checked." Now, there's only one of those, so you can chain the ".val()" function to the end to get the value of the checked radio button in your group.
DOM Element Manipulation
One of the most useful things that I miss when I'm not using jQuery is the flexibility of using classes without having to worry about what else the element is doing. For example, let's say that you have a textbox that you want to have both the "required" class and the "evenRow" class for styling, but you only want the textbox to have the "required" class if the related checkbox is checked. With native JavaScript, you'd have to either check the class list to see if "evenRow" was present or pass the information as a parameter to your function to make sure that you don't lose the "evenRow" class when adding or removing the "required" class. jQuery makes it easy to add, remove, and toggle classes whenever you need to, without touching any of the other classes.
var summer_time = false;
$('#myElement').addClass('newClass');
$('#myElement').removeClass('oldClass');
$('#myElement').toggleClass('school',!summer_time);
Let's just say you have a "failedValidation" class that highlights elements that fail validation. At the next submit, you would want to remove the "warning" class from all elements that have it to start with a "clean slate." In native JavaScript, that can be pretty
cumbersome, but with jQuery, it's as simple as $('.failedValidation').removeClass('failedValidation');
Events
You can leverage jQuery's syntax to add events to your DOM elements as well. Let's say that you want the same function to be triggered when any of your order checkboxes are clicked. In native JavaScript, you would ordinarily add an "onClick" attribute to each and every one of your checkbox elements. If you're reusing your code well, you'd call a common function and what-not, but you would still have to touch every checkbox on the page. With jQuery, you can add the "click" event (just like any other event) to all of your checkboxes in your "onLoad" section by selecting all of your checkboxes and giving them an event:
$('input:checkbox').click(function() {
$(this).closest('td').toggleClass('highlighted',($(this).attr('checked') != ''));
});
(play with this code at jsFiddle)
In Conclusion
Do you need to have jQuery at your site? No, not really. You can do pretty much everything that can be accomplished with jQuery by using only native JavaScript. Does it make it easier? In many cases, yes, but it all comes down to how fancy you want (and need) to get and how well you and your team will be able to understand the code. If your team is geared toward native JavaScript and they're the ones that are going to need to maintain this code for the next several years, you may come out ahead in the long run. If your team is interested in learning jQuery, though, I'd highly recommend it.
Scott Morris is available for training, mentoring, troubleshooting, and iForms consulting. Find out more at www.thinkiforms.com
0 comments: