Question

I have an asp:UpdatePanel that is hidden or not based on the code behind of an asp:DropDownList at OnSelectedIndexChanged.

When this Update Panel is shown, there is some jquery to highlight the new area:

  $(document).ready(function(){
      $('#Alert').animate({backgroundColor:'#FF953F'});
      $('#Alert').animate({backgroundColor:'white'}, 3000);
  });

This works great once the update panel is show again, but the first time it comes back, the jquery is running before the code behind, so there is a 3000ms pause and then the panel is shown with no highlighting.

How can I make sure the jquery runs after the panel is shown?

I have tried adding an if visible and delay to the JavaScript:

        $('#<%=ddlInfo.ClientID %>').change(function(){
            if( $('#Alert').is(':visible')){
                $('#Alert').animate({backgroundColor:'#FF953F'});
                $('#Alert').animate({backgroundColor:'white'}, 3000);
            };
        });

This didn’t make a change as the JavaScript runs before the panel is back.

And a delay:

    $('#Alert').delay(1000).animate({backgroundColor:'#FF953F'});

This worked great at delaying the panel from showing as the code behind had to wait until the delay was complete before it could show the panel again.

Thanks for any ideas on this.

Answer 1

Have you tried the EndRequestHandler yet?

Take a look at the following post.

http://zeemalik.wordpress.com/2007/11/27/how-to-call-client-side-javascript-function-after-an-updatepanel-asychronous-ajax-request-is-over/

And search for endRequestHandler on asp.net forums has a number of good posts.

I hope this can help.

Bob