ASP.NET HoverMenuExtender Lazy Loading

Question

Eu estou tentando obter meus hovermenuextenders fazer alguma carregamento lento. Eu tenho avatares em todo o site que quando pairado sobre deve puxar para trás várias coisas (imagens, posts recentes, contagem de post, etc), por razões óbvias eu não quero fazer isso para todos os avatares no page_load.

Usando o seguinte código que eu sou capaz de conseguir o evento em foco para disparar um postback para o servidor de forma assíncrona (ponto de interrupção é atingido onmouseover). No entanto, os comandos no postback não parecem ser refletido após a execução é feita. A estadia loading image / label no painel hover. Qualquer ajuda é apreciada!

Editar : Eu só percebi que o último avatar processado na página funciona corretamente, mas nenhum dos que estão acima que fazer. Alguma idéia o que pode estar causando esse comportamento estranho?

<script language="javascript" type="text/javascript">
    function OnHover(image) {        
        __doPostBack('<%= this.imageHoverTrigger.UniqueID %>', '');
    }
</script>

<!-- DUMMY Hover Trigger -->
<input id="imageHoverTrigger" runat="server" style="display:none;"
   type="button" onserverclick="imageHoverTrigger_Click" />

<!-- User Avatar -->
<div style="border: solid 1px #AAA; padding:2px; background-color:#fff;">    
    <asp:ImageButton ID="UserImg" runat="server" />  
</div>         

 <!-- Hover tooltip disabled by default 
    (Explicitly enabled if needed)-->
<ajax:HoverMenuExtender ID="UserInfoHoverMenu" Enabled="false" runat="server"
    OffsetX="-1"
    OffsetY="3" 
    TargetControlID="UserImg"
    PopupControlID="UserInfoPanel" dyn
    HoverCssClass="userInfoHover"
    PopupPosition="Bottom">
</ajax:HoverMenuExtender>

 <!-- User Profile Info -->
<asp:Panel ID="UserInfoHover" runat="server" CssClass="userInfoPopupMenu">            
    <asp:UpdatePanel ID="UserInfoUpdatePanel" runat="server" UpdateMode="Conditional" >
        <ContentTemplate> 
            <asp:Image ID="loadingImg" runat="server" ImageUrl="~/Design/images/ajax-loader-transp.gif" />                              
            <asp:Label ID="loadingLbl" runat="server" Text="LOADING..." ></asp:Label>  
            <asp:Panel ID="UserInfo" runat="server" Visible="false">
                <b><asp:Label ID="UserNameLbl" runat="server"></asp:Label><br /></b>  
                <span style="font-size:.8em">
                    <asp:Label ID="UserCityLbl" runat="server" Visible="false"></asp:Label> <asp:Label ID="UserStateLbl" runat="server" Visible="false"></asp:Label>
                </span>
            </asp:Panel>                        
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="imageHoverTrigger" />
        </Triggers>                    
    </asp:UpdatePanel>     
</asp:Panel>

E o code-behind:

protected void Page_Load(object sender, EventArgs e)
{
    UserImg.Attributes.Add("onmouseover", "javascript:OnHover(this)");
}

protected void imageHoverTrigger_Click(object sender, EventArgs args)
{
    // Hide loading image/label
    loadingLbl.Visible = false;        
    loadingImg.Visible = false;

    //TODO: Set user data here
    UserInfo.Visible = true;
}

Answer 1

Descobri-lo:

Meu Page_Load evento conexão deveria ter sido:

    UserImg.Attributes.Add("onmouseover", "javascript:OnHover('" + this.imageHoverTrigger.UniqueID + "','" + this.hiddenLbl.ClientID + "')");
    UserImg.Attributes.Add("onmouseout", "javascript:ClearTimer()");

e a função javascript deveria ter sido:

var hoverTimer;

    // Called on the hover of the user image
    function OnHover(trigger, hiddenTxt) {

        var field = document.getElementById(hiddenTxt);

        // Only post if this hover hasn't been done before
        if (field == null || field.innerHTML == "false") {
            hoverTimer = setTimeout(function() { ShowInfo(trigger) }, 500);          
        }            
    }

    // Clears timeout onmouseout
    function ClearTimer() {
        clearTimeout(hoverTimer);
    }

    // Retrieves user info from server
    function ShowInfo(trigger) {
        __doPostBack(trigger, '');
    }

Eu também adicionei um campo oculto no formulário, a fim de saber quando o foco tenha sido executado. O código por trás define o campo oculto para verdadeiras e meu javascript verifica o valor do campo oculto cada vez que ele executa. Isso interrompe o código de fazer rodada viagens cada vez que o usuário passa o cursor sobre a imagem.