Posts Tagged ‘jquery’

Here’s a little eye-candy trick if you’re one of those using UpdatePanel  in ASP.NET (and not caring about performance, ahem) that will allow for a quick animation (e.g., fade, slide) on any data getting refreshed from the server. The method uses jQuery to handle the animation and a few lines of JavaScript to inject the animation into the “click” event of a button (or any other element!).

A neat use of this would be for, say, a GridView of data. You may have a series of filters for that data and instead of having that data (asynchronously) refresh with little notice from the user, you add a slideIn()/slideOut() animation so that the user can visually see exactly what is being refreshed.

The process involves 1) grabbing whatever the current onclick handler is for each element, 2) initializing the new “click” handlers for the buttons incorporating the new fadeOut or slideUp effect, and 3) binding your final effect for when the AJAX response is received.

The following code will invoke a function, InitBrowseButtons(), when the DOM is ready when the page is initially loaded (if your buttons invoking the “asynchronicity” are inside the update panel, you’ll need to do run ScriptManager.RegisterStartupScript(…) to re-bind the handlers). For this code, I bound a checkbox control that updates the data in the UpdatePanel when checked or unchecked. This can easily be substituted for a button or other element by changing the jQuery selector.

$(document).ready(function()
{
    InitBrowseButtons();
});

// round up the elements using jQuery selectors, grab the current onclick and insert your own
function InitBrowseButtons()
{
    $("input[type='checkbox'][name$='chkBrowseAll']").each(function()
    {
        var currAction = $(this).attr("onclick");

        $(this).attr("onclick", "").click(function()
        {
            $("div[id$='upMessages']").slideUp(500, function() { currAction(); });
        });
    });
}

This function will cycle through all the elements grabbed by the selector (only one in this case) and, for each, save the current onclick handler to a variable. It will then reassign a click event to that element, in thise case, a jQuery animation to slideUp an UpdatePanel named upMessages. On the callback event for the animation, it will then invoke the previous click handler (the parenthesis will invoke the variable as a function).

This function will handle the slideUp and the subsequent postback event, but what about when the data is posted back? The following function is invoked by static method ScriptManager.RegisterStartupScript(…) from the code-behind file. This will invoke a script each time a postback is complete.

The C# script (I called it from Page_Load, but adjust as necessary)…

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "InitFadeData", "InitFadeData();", true);

… will invoke the following JavaScript…

// function called when post back is completed
function InitFadeData()
{
    $("div[id$='upMessages']").slideDown(500);
}

This script grabs the same UpdatePanel (which is just a DIV) and slides the content open once it is repopulated with server-side data.

A demo can be found here. Source code here. All scripts were inline for the purposes of viewing.

And just to note about the performance of UpdatePanels; yes, they’re great for quick-and-dirty partial updates, but should mainly be used for low traffic sites or for administratitive sites (CMSes and other private web sites). Otherwise, use the built-in page methods or use jQuery’s AJAX methods and render your own UIs.