jQuery UI Datepicker Slow On IE6

Internet Explorer 6 is, unfortunately, still is widely used in corporate environments. I’ve found the jQuery UI (1.7.2) Datepicker too slow on IE6, taking several seconds to display, and another few seconds to hide.

Looking for a solution, I’ve found this thread, suggesting it’s an IE6 bug that caused it to load the same background images dozens of times. The suggested solution, however, didn’t work for me. I came up with a slightly better solution. Simply add this CSS rule to prevent the background images from loading in IE6:

* html .ui-datepicker tbody a {background-image:none !important;}

The next step is to disable animation. The date picker has many elements – animating them is too much work for IE6, resulting in the animation not showing at all – but still delaying the calendar. Wonderful. The solution is to disable the animation for IE6 by setting its duration to 0. You may also want to set the animation to null, because some animations ignore the zero duration. This is done for IE6 only, as there is no need to penalize modern browsers.

$('input.Calendar').datepicker({
           showAnim: jQuery.support.boxModel ? 'drop' : null, // optional
           duration: jQuery.support.boxModel ? 'normal' : ''
        });

Using jQuery to Filter Table Rows

I’m retouching an old system, and though it could use a filter on it’s report page. The report has a large table with about 300 rows. After some play with jQuery, I came out with this little filter.
The project is using the .net GridView control, so I had limited control over the output HTML code. Still, I think this code can work for most tables. One thing to notice: you should use the class “filterable” on your table or on one of its parents for the code to work.
First, we need a text box:

Filter:
<input type="text" id="FilterTextBox" name="FilterTextBox" />

And the code:

$(document).ready(function(){
 //add index column with all content.
 $(".filterable tr:has(td)").each(function(){
   var t = $(this).text().toLowerCase(); //all row text
   $("<td class='indexColumn'></td>")
    .hide().text(t).appendTo(this);
 });//each tr
 $("#FilterTextBox").keyup(function(){
   var s = $(this).val().toLowerCase().split(" ");
   //show all rows.
   $(".filterable tr:hidden").show();
   $.each(s, function(){
       $(".filterable tr:visible .indexColumn:not(:contains('"
          + this + "'))").parent().hide();
   });//each
 });//key up.
});//document.ready

Explanation:

  1. Create Index Column – lines 2-7 – The jQuery “:contains()” selector is case sensitive, so at the first step I create another column on the table, than contains the whole row’s text on lowered case. On line 3 you may have noticed I’m filtering only rows that has <td>, to avoid hiding the header column (presumably, the header only has <th>). Later, I could make searches in this column alone. This works as long as the text on the table doesn’t change.
  2. Bind the Key-Up Event – lines 8-16.
  3. Make an array with all filter keywords – line 9 – Get all word from the text box and put them in an array. Again, I’m using toLowerCase() because “:contains” is case sensitive.
  4. Hide rows – lines 12-15 – I’m using jQurey’s each function to go through the array, and hiding all rows that don’t contain the current keyword (Assuming AND between all words).

That’s it. Now rows on our table can be filtered.