Higlighting Table row in JQuery

Recently when refactoring the JQuery old code, about a year ago and i found an old and un-JQuery solution where using inline Javascript in HTML. Inline Javascript are bad which are the curse of HTML.

For example :

 <table> 
    <tbody>
       <tr onclick="rowClick('carID') onmouseover=rowOver('carID') >
          <td>whatever here </td>
       </tr>
   </tbody>
</table>

1. Above inline Javascript will not be cache. Every time when the user refresh the page, it have to be reloaded again.
2. Hard to maintain and read something. You have to write everything in 1 line if the line is too long else you will get an error message like this “unterminated string literal” due to line break.
3.It is bad for javascript handling because it wont be able to access event object and
by reading you cant decide what this references to

One of the way to improve the code using jquery and using html class attribute.

<table> 
    <tbody>
       <tr class="carDetails">
          <td>whatever here </td>
       </tr>
   </tbody>
</table>

Since the mouse over event are tie to “this” object, we can get or do anything that are wraped around this object.

$(document).ready(function() {

   $('tr.carDetails').mouseover(function(e) {
       $(this).closest('tr').addClass('highlightSelectedRow');
   });

});

To get the selected row index you can follow the example. Using JQuery closest is one of the way :

    //this will return the row index
    var rowIndex = $(this).closest('tr').parent()[0].sectionRowIndex;

or

    //this will return the row index as well
    var rowIndex = $(this).closest('tr').removeClass('highlightSelectedRow').prevAll().length;

In the above example, when the user move the mouse over the table row, the tr will be added with css class ‘highlightSelectedRow’ to highlight the row color. You can see that we are using JQuery traversing/closest which are available in JQuery 1.3. The new version of JQuery 1.4, allowed array to be passed in. What it does are it get a set of elements containing the closest ancestor element that matches the specified selector, the starting element included.

New example :

<div id="a">
   <div id="b"><b class="carName">ABC</b>
   <div id="c"><b class="carName">CDE</b>
   <div id="d"><b class="carName">DEF</b>
</div>

$(document).ready(function() {

   $(".carName").mouseover(function() {
      //return id of div b or c or d which depends on the text that the mouse event is trigger.
      var id = $(this).closest("div").attr("id"); 
   });

});

Quote from JQuery website :

Closest works by first looking at the current element to see if it matches the specified expression, if so it just returns the element itself. If it doesn’t match then it will continue to traverse up the document, parent by parent, until an element is found that matches the specified expression. If no matching element is found then none will be returned.

JQuery get $.getJSON data

Imagine you have server side data return to your Javascript client side using Ajax and JSON as datatype return.

var groupid = null; //try outer scope
$.getJSON(url, data, function(result){

    groupid = result.groupid;  //json type data
    //do whatehever you like here
    //you wanted to return the data that you have been parsed or assign

});
alert(groupid); //error : will return null because the JSON already happern after the callback executed.

So instead doing that, we need to use delegate or callback function that JQuery have provided to us.
Remember the $.fn. thing.

Now, let see how we can use the delegate function to return us the data:

$.getJSON(path +'?request=url', function( data ) {

var selectOption = '';
//do what ever you like with the json data

selectOption =  selectOption + 'testing' + data; //example only
$.fn.delegateJSONResult( selectOption ); 

} ); 

$.fn.delegateJSONResult = function{  alert( data );  }

With JQuery delegates, it makes your life easier as developer and the most common used to all my event handling.

To understand better about delegates, look at JQuery code to see how it actually works behind the background or alternatively try to play around with this sanbox.

The above source code highlighting was proudly developed by WordPress. Many thanks.

jQuery

Have been using jQuery since my new projects. As a results, i am very satisfy with the Javascript framework and external UI Plug-in.

I used the guidelines provided by reindel blog to choose the best javascript framework to meet best for my new projects. My first round-up choice are between Mootools, Prototypes/script.aculo.us and jQuery. I use Slickspeed website to run and check how fast the website run, and jQuery gave me the best results. Since jQuery run much more faster than others, except Mootools (on the version that i had tested).

The reason why i choose jQuery over other javascript frameworks ——————————————————————–

1. The learning curve for jQuery are much more short and there are tons of tutorials for jQuery.

2. One of my requirements, is to optimise the performance when running on client side.

3. Slow staging server (no budget), cause slow execution of scripts at client side if i am using other javascript framework.

4. Both Microsoft and Nokia have decided to add jQuery in their .Net and Symbian OS. (Future mobile implementation).

5. jQuery official website provide more demo type tutorials compare to others, which are very handful when it comes to using new functions.

Quite like the syntax and idea of Prototypes/script.aculo.us features and might be consider it with my own personal project.

These reasons were only my personal opinions, which i do not mean that other javascript framework are bad. It really depends on how it is going to fit with your best need such as environment, learning curve, your own coding style and more.