jQuery - Javascript on Steriods

---

For wildcat!, someone requested a wish item to add dynamic popup windows to see a preview of messages when they place their mouse over the message link. Since this request was ditto but many others, I explored adding "balloon tips" for these previews.

I found an javascript module jTip.js and this was very simple to implement into wildcat! mail template pages. Suddenly we have PREVIEWS!

But it wasn't perfect, so I looked for other javascripts and found a "enhanced clone" of jTip called ClueTip!

What was common between the two was that they both were plug-ins for a phenomenal new javascript framework called jQuery.

I checked out this jQuery and all I can start to describe this is by saying "WOW!"

jQuery is basically another language, a wrapper language more specifically that enhances the use of JavaScript. It basically makes it easier to create Web 2.0 applications with less javascript programming - "Write less, Do more" is the jQuery motto.

It does have a different language syntax that takes getting use to, but once you get over that hurdle, it is really quite flexible and I may say elegant as well with its ability to "chain" jQuery methods together in one line.

Here is a quick example of how jQuery improves javascript coding used in Wildcat!

Mail Inbox and listings have select checkboxes. The following javascript in wcMsglib.js is used to get the total selected:

Using raw DOM/Javascript:

// Find nodes by class name

document.getElementsByClassName = function(className) {
   var children = document.getElementsByTagName('*') || document.all;
   var elements = new Array();
   for (var i = 0; i < children.length; i++) {
     var child = children[i];
     var classNames = child.className.split(' ');
     for (var j = 0; j < classNames.length; j++) {
       if (classNames[j] == className) {
         elements.push(child);
         break;
       }
     }
   }
   return elements;
}

function msgTotalSelected()
{
  var nTotal = 0;
  var msgitems = document.getElementsByClassName("msgitem");
  for (var i = 0; i < msgitems.length; i++) {
    var e = msgitems[i];
    if (e.type == "checkbox" && e.checked) nTotal++;
  }
  return nTotal;
}

Using jQuery:

<script type='text/javascript' rc='/public/js/jquery.js'></script>

function msgTotalSelected() {
  return $('msgitem:checked').length;
}

In short, jQuery handles all the typical complex DOM operations you would do to find DOM nodes, elements, classes and objects on a web page and provides a very elegant language syntax to give you all the functionality you need to create awesome web pages very quickly.

Do we need jQuery for Wildcat! web development?

Of course not. It is another tool, but a great one at that! It can make programming Web 2.0 easier.

jQuery also has a growing list of add-ons called "jQuery Plugins" that many people have written to glorify your web pages and make it more interactive.

jQuery also supports cross-browser functionality. This is one thing that will definitely reduce testing a web site against different web browsers.

The jQuery documentation is good (needs more examples) and I particularily like the Visual jQuery Reference site! In addition, the jQuery mailing list support group is very active and helpful as well.

Since I found some very useful jQuery plugins, it is a pretty good bet we will begin to implement jQuery with Wildcat! in many of its client areas. I've been exploring how to use jQuery template concepts, AJAX and other things and I have already found that we can scale the Wildcat! server more by moving a good bit of the server-side template processing to the Browser. I can't go overboard with this because jQuery will add overhead to the Browser thus making it appear more sluggish.

If this all jQuery exploration holds up, I might be setting up a jQuery support area for wildcat! developers and sysops at Santronics Online. This will allow Wildcat! customers to discuss jQuery and how they might be able to further use it with Wildcat! I'll make an announcement when the mail and files areas are ready.

--
HLS