How do I time a jquery .change function to run after the .net OnSelectedIndexChanged?

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:

        $(开发者_StackOverflow中文版'#<%=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.

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

Can you not register the Script via the pages script manager, at the end of your OnSelectedIndexChanged event handler ?

You also might need to manually tell the update panel to refresh.

Try this:

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

I don't know how the page is, but you need to do something alike.

Hope it helps! ;)