Question

I’m trying to get my hovermenuextenders to do some lazy loading. I have avatars across the site that when hovered over should pull back various things (images, recent posts, post count, etc) For obvious reasons I don’t want to do this for all avatars on the page_load.

Using the following code I’m able to get the hover event to trigger a postback to the server asynchronously (breakpoint is hit onmouseover). However, the commands in the postback don’t seem to be reflected after execution is done. The loading image/label stay in the hover panel. Any help is appreciated!

EDIT: I just realized that the very last avatar rendered on the page works properly but none of the ones above it do. Any ideas what might be causing this strange behavior?

<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>

And the 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

Figured it out:

My Page_Load event hookup should’ve been:

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

and the javascript function should’ve been:

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, '');
    }

I also added a hidden field on the form in order to know when the hover has been executed. The code behind sets the hidden field to true and my javascript checks for the value of the hidden field each time it executes. This stops the code from doing round trips each time the user hovers over the image.