jQuery is a JavaScript library that simplifies many JavaScript tasks. DOM traversal, DOM manipulation, registering events, performing Ajax calls and animation are just a few of the built-in features that jQuery simplifies. I encourage asp.net developers to look at jQuery for implementing Web 2.0 type behaviour. Recently, I gave a talk at the Toronto Visual Basic User Group (TVBUG). If you are interested the presentation is available online here.

I have decided to share some of my jQuery code on my blog. Some of the examples will be fairly simple and some will be more complicated. Hopefully may find them useful and I encourage you to cut and paste the code snippets and use them as you see fit.

The example here shows how to hide table columns. The trick is to iterate through the table row and then through the table cells of each row. If you come across a column span then you need to account for that. Here is the snippet.

 

  <input id="column" type="text" style="width: 20px;" maxlength="1" />   <input id="hide" type="button" value="Hide Columns" /> 
  <input id="show" type="button" value="Show All Columns" /><br/><br/>

  <table id="atable" border="1" cellpadding="7" cellspacing="0">
    <tr><td colspan="2">Row 1,Cell 1</td><td>Row 1,Cell 3</td><td>Row 1,Cell 4</td><td>Row 1,Cell 5</td><td>Row 1,Cell 6</td></tr>
    <tr><td>Row 2,Cell 1</td><td>Row 2,Cell 2</td><td>Row 2,Cell 3</td><td>Row 2,Cell 4</td><td>Row 2,Cell 5</td><td>Row 2,Cell 6</td></tr>
    <tr><td>Row 3,Cell 1</td><td>Row 3,Cell 2</td><td colspan="4">Row 3,Cell 3</td></tr>
    <tr><td>Row 4,Cell 1</td><td colspan="4">Row 4,Cell 2</td><td>Row 4,Cell 6</td></tr>
  </table>

  <script type="text/javascript">
  
    $(function() {
      //register click event with the hide button
      $('#hide').click(function() {
        //go through each row in the table
        $('#atable tr').each(function() {
          var numcol = 0;
          //go through each cell in the table row
          $('td', this).each(function() {
            //if the current column is greater than the value enter then hide the cell
            //i have no validation implemented foe the text box
            if (numcol >= $('#column').val()) $(this).hide();
            //increment column number and if the cell has colspan associated with it
            //then account for that as well
            numcol++;
            if ($(this).attr("colspan") != null) numcol += parseInt($(this).attr("colspan")) - 1;
          });
        });
      });
    });

    $(function() {
      $('#show').click(function() {
        $('#atable td').show();
      });
    });
    
  </script> 

In an earlier post I described how you can call jQuery from within a Silverlight application. The process is rather simple as was the example. Please refer to the original post for further details.

Afterwards I began to think about calling more complex jQuery constructs from within Silverlight. What about registering events and using anonymous functions? At first glance it didn’t seem it was going to work at least not with the technique I described in my earlier post. Then I discovered the dark side of Javascript the Eval function. The Silverlight HtmlPage.Window object exposes the Eval function that allows you to evaluate any string.

I added the following line of code to my the Page constructor for the example from my previous post.

This code basically registers a click event with the DOM element with id of #hello. When the DOM element is clicked an alert is displayed and it works perfectly well.

As with raw Javascript all the pros and cons with the use of Eval exist when used from within Silverlight. But it’s good to know that if required complex Javascript functionality can be implemented from within Silverlight.

Last night I gave a jQuery presentation at TVBUG and I was asked whether you could call the jQuery API directly from within Silverlight. My initial response was yes, but I had promise the person that I would create a demo and blog about it.

Calling Javascript from within Silverlight control involves the following steps;

1. Add a using System.Windows.Browser namespace to the code behind of the Silverlight control.
2. Creating a ScriptObject by calling HtmlPage.Window.CreateInstance.
3. Calling the Invoke method off the ScriptObject from step 2.

Let’s look at some code.

The listing below contains a code snippet that is run when a Silverlight button is clicked.

Notice the parameters to the HtmlPage.Window.CreateInstance static member shown on line 25 contains the call to jQuery function $() and the selector #hello. This call returns a ScriptObject and can subsequently be used to invoke functions off the jQuery object. In this example, I am first setting the background of the DOM element with id of hello to red and then setting it’s border.

I have a working demo of this just navigate to this site.  

I had one of two options, drink green beer on St. Patrick's Day or give a JQuery presentation a TVBUG. Silly me I chose to give the presentation. All kidding aside, today, I had the privilege to speak at the Toronto Visual Basic User's Group. I decided to give the talk a St. Patrick’s theme and provided green food colouring for the water. I also gave the talk while wearing a St. Patrick’s hat.

The topic was on jQuery a technology that I have embraced for the last few months. As ASP.NET developers we need to upgrade our skill sets and be able to provide rich internet applications. jQuery is one such technology that delivers Web 2.0 type functionality. The audience was quite engaged and at the end of the presentation I got some very positive feedback and interest in jQuery. If you want to see the presentation online then visit the site. 

Here are some photos from the meeting.

I've been looking into improving the performance of a web site that I'm working on and decided to experiment with JavaScript minification and the asp.net <CompositeScript> tag. What exactly does <CompositeScript> actually do? Does it merely combine the Javascript files that appear within the tag or does it also minify them? If it does minify them how good a job does it do?

I decided to look at four scenarios;

1. Use the Javascript files as is, that is, no <CompositeScript> and no  minification.
2. Use the Javascript files as is but with the <CompositeScript> tag.
3. Minify the Javascript files using jsmin but with no <CompositeScript> tag
4. Minify the Javascript files using jsmin and include the <CompositeScript>.

The jsmin tool can be downloaded from here. It's a command line tool and is rather simple to use.

The following listing contains the Javascript files I used to test with. As you can see the majority of the files are jQuery and jQuery plug-ins. The only exception is the custom master.js file.

In the first scenario we inject the Javascript as is with no minification or combining. The resulting size of the Javascript files is shown in the following figure. I used Firebug to obtain this listing.

The total size of the five Javascript files is 147KB.

In the second scenario we use the <CompositeScript> Tag and this markup is shown in the listing below.

And the output from Firebug is show here. Notice that the five Javascripts have been combined into a single resource and is only 47KB. Is <CompositeScript> minifying the Javascript? Not really, after examining the Headers from Fiddler it appears that the size reduction is a result GZIP. I've included the outpit from Fiddler as well.

The question still remains will minification of the Javascript files prior to composing result in any performance gains.

In scenario 3 we minify the Javascript files using jsmin and remove the use of the <CompositeScript>. The Firebug results are shown here.

The total size of the five Javascript files is 75KB.

The last scenario involves minifying the Javascript files using jsmin and also including the <CompositeScript> tag. The Firebug results are shown below.

Incredible we are now down to 28KB. It appears that there is an advantage to performing minification prior to using the <CompositeScript> tag. Again as before the <CompositeScript> is compressing the Javascript using GZIP. We starting with a Javascript payload of 147KB and reduced it down to 28KB. Minify your Javascript prior to using the <CompositeScript> tag.

One last point I should make is that I only used jsmin to minify jquery-blockUI.js, jquery-timers.js, jquery-valid8.js and master.js. I downloaded the official minimized version of jquery-1.3.2.js from the jQuery site.