Question

OK, this feels like a question that should be easy to answer, but as with so much mixing of asp.net and jQuery, it’s a bit of a nightmare.

What I want to do is be fading a div in and out at various times during the client’s viewing of my asp.net page; I fade it out using jQuery’s fadeTo() before triggering an UpdatePanel update (to indicate that the data there is not fresh) and I want to fade it in again once the UpdatePanel has been updated. I’ve gotten as far as updating the UpdatePanel in the codebehind, and this results in the div‘s content changing… but how do I fade the div back in again?

The way I see it, there are 2 ways; register an event handler on page load to detect when the div‘s content has been changed and fade it back in, or call a function from the asp.net codebehind when I’ve updated the div to fade it back in.

In the first case, there doesn’t seem to be any event triggered by the div‘s content changing, so I can’t seem to do that. If anyone knows how I could get a client event to trigger when I update the div, that would be a nice solution.

In the second case, I thought that this was what ClientScriptManager was for, but it doesn’t quite do what I want. I want to be able to register a particular Javascript function with ClientScriptManager and then tell ClientScriptManager to execute it in the client, from my codebehind. You can’t seem to do that. ClientScriptManager.RegisterClientScriptBlock() simply inserts some <script> into the HTML output, rather than calling a function. Presumably this would work if I kept registering things like:

<script>fadeBackIn();</script>

because the Javascript would be immediately evaluated and run, but this feels messy, and that feeling is intensified by the fact that I’d have to keep randomly generating a new unique value for the key argument of ClientScriptManager.RegisterClientScriptBlock(), because it’s specifically designed to stop this kind of repeated code. However, I’m struggling to see an alternative. Can anyone come up with a good idea as to a better mechanism to get this to work?

I’d really like something along the lines of:

ClientScriptManager.RegisterClientScriptFunction("fadeBackIn", "function fadeBackIn(){ ... }");

[...]

ClientScriptManager.ExecuteClientScriptFunction("fadeBackIn");

but I don’t see that functionality available. 🙁

Answer 1

You can attach to the page loaded event. The pageLoaded handler recieves an argument of type PageLoadedEventArgs which contains a get_panelsUpdated method that you can call to enumerate all the UpdatePanels whose content was just updated.

Example:

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(pageLoaded);

function pageLoaded(sender, args) 
{
    var panels = args.get_panelsUpdated();

    if (panels.length > 0) 
    {
        for (var i in panels) 
        {
            if (panels[i].id == "DesiredUpdatePanelId") 
            {
                fadeBackIn(); 
            }
        }
    }
}