Hierarchical Table Manipulation with jQuery

I recently had to propagate change down a table that represented hierarchical data as well as show and hide columns.  The most important requirement was that the changes should not propagate up any levels, only down.  I have put up a sample on JSBin here that simulates generated HTML from ASP.NET(ie: dynamic control ids).  Most of the manipulation is done with class names.  The show and hide columns could probably have been done better, but you will get the gist.

jQuery functions:

       $(document).ready(function () {
            $('.HideTableDemoTab').click(function () {
                HideTableColumn(this);
            });

            $('.ShowTableDemoTab').click(function () {
                ShowTableColumn(this);
            });

            $('.TableDemoTabShowAll').click(function () {
                ShowAllColumns();
            });

        });

        function PropagateChanges(rowId, inputChanged, inputTarget, level) {
            if ($('.chkPropagate input').attr('checked')) {
                var tableRows = $('.TableDemo > tbody > tr:gt(' + rowId + ')');
                tableRows.each(function () {
                    var tableCells = $(this);
                    var currentLevel = tableCells.find('.Level').val();

                    if (currentLevel < level) {
                        tableCells.find('.' + inputTarget).val($('#' + inputChanged).val());

                    }
                    else {
                        return false; //break out of loop can't change parents

                    }

                });
            }
        }

        function HideTableColumn(column) {
            if (column.id == "tabHideCol1") {
                $("#TableDemo td:nth-child(1)").hide();
            }
            else if (column.id == "tabHideCol2") {
                $("#TableDemo td:nth-child(2)").hide();
            }
            else if (column.id == "tabHideCol3") {
                $("#TableDemo td:nth-child(3)").hide();

            }
        }

        function ShowTableColumn(column) {
            if (column.id == "tabShowCol1") {
                $("#TableDemo td:nth-child(1)").show();
            }
            else if (column.id == "tabShowCol2") {
                $("#TableDemo td:nth-child(2)").show();
            }
            else if (column.id == "tabShowCol3") {
                $("#TableDemo td:nth-child(3)").show();

            }
        }

        function ShowAllColumns() {
            $("#TableDemo td:nth-child(1)").show();
            $("#TableDemo td:nth-child(2)").show();
            $("#TableDemo td:nth-child(3)").show();
        }
Advertisements

jQuery Snippets for Visual Studio 2010

If you know me you know that jQuery is my favorite technology right now.  If you thought it was easy to use already, I have a treat for you.  Check out these jQuery Snippets for Visual Studio 2010 by John Sheehan to boost your jQuery productivity in Visual Studio 2010.

John also has a dedicated page to .NET Cheat Sheets I  print and use all the time.

ASP.NET 4.0 and Visual Studio 2010 Web Development Beta 2 Overview

Whitepaper on all the new things to come:

Many exciting changes for ASP.NET are coming in the .NET Framework version 4. This document gives an overview of many of the new features that are included in the upcoming Beta 2 release of the .NET Framework 4 and of Visual Studio 2010.

http://www.asp.net/learn/whitepapers/aspnet40/

My favorites so far:

Permanent Redirect with HTTP 301

How to properly do a permanent redirect with a HTTP 301.

ASP.NET 4.0 gives us this:

ASP.NET 4.0 adds a new RedirectPermanent helper method that makes it easy to issue HTTP 301 Moved Permanently responses, as in the following example:

RedirectPermanent("/newpath/foroldcontent.aspx");

ASP.NET 4.0 Auto-Start Applications, I can’t wait…

If you have ever dealt with a memory intensive ASP.NET web application you know how valuable this new Auto-Start feature will be.

Some Web applications need to load large amounts of data or perform expensive initialization processing before serving the first request. In earlier versions of ASP.NET, for these situations you had to devise custom approaches to “wake up” an ASP.NET application and then run initialization code during the Application_Load method in the Global.asax file.

A new scalability feature named auto-start that directly addresses this scenario is available when ASP.NET 4.0 runs on IIS 7.5 on Windows Server 2008 R2. The auto-start feature provides a controlled approach for starting up an application pool, initializing an ASP.NET application, and then accepting HTTP requests.

UpdatePanel Async Postsback slow in IE….what!?

How can it be that this problem only occurs in IE.  It is their technology on their platform!

When using Internet Explorer to browse a page that contains an UpdatePanel, there is a delay (often anywhere between 10 seconds and 45 seconds or more) after clicking a page element that initiates an async postback. The delay is not experienced when using browsers other than Internet Explorer.

FYI,  FireFox’s performance is superior on the same code base in my experiences so far.  I have opened up a case with Microsoft, so we will see what the IE team has to say.  More to come…

http://support.microsoft.com/kb/2000262

Cancel mouse event cross browser

I had an issue this week with a form element that was contained inside a DIV. The DIV had a onclick event as well as the form element. I wanted the form element to do its work and then stop the DIV’s onclick event. Through a lot of searching and help from some co-workers I came up with this script that works pretty well. I have tested it with IE6, IE7 and FF 3.

 <asp:Label ID="lblOptions" onclick="return CancelEventReturnFalse(event);" runat="server" Text="Options"></asp:Label>
function CancelEventReturnFalse(e) {

    try {

        if (e) {
            e.returnValue = false;
            e.cancelBubble = true;

            if (e.stopPropagation) {
                e.stopPropagation();

            }
            if (e.preventDefault) {
                e.preventDefault();
            }

        }

    } catch (c) {alert(c); }

    return false;

}