ASP.NET HoverMenuExtender Lazy Loading-

Question

Ich versuche, meine hovermenuextenders zu bekommen etwas verzögertes Laden zu tun. Ich habe Avatare auf der gesamten Website, dass, wenn schwebte über sollten verschiedene Dinge zurückziehen (Bilder, aktuelle Beiträge, Post-Zähler, usw.) Aus offensichtlichen Gründen, die ich will das nicht auf dem page_load für alle Avatare tun.

Mit dem folgenden Code Ich bin in der Lage, das Hover-Ereignis zu bekommen ein Postback an den Server auslösen asynchron (Breakpoint getroffen wird Onmouseover). Allerdings sind die Befehle in der Postbacks nicht reflektiert zu werden scheinen nach der Ausführung erfolgt. Die Lade Bild / label im Schwebeplatte bleiben. Jede Hilfe ist willkommen!

Bearbeiten : Ich habe erkannt, dass das allerletzte Avatar auf der Seite gerendert funktioniert, aber keiner von den oben tun. Irgendwelche Ideen, was könnte dieses seltsame Verhalten verursachen?

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

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

es herausgefunden:

Meine Page_Load Ereignis hookup haben sein sollen:

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

und die Javascript-Funktion sollte haben gewesen:

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

Ich habe auch ein verstecktes Feld auf dem Formular, um zu wissen, wann der Hover ausgeführt wurde. Der Code hinter setzt das versteckte Feld zu wahren und meine Javascript Kontrollen für den Wert des verborgenen Feldes jedes Mal ausgeführt wird. Dies stoppt den Code aus jedem Umlauf tut der Benutzer auf das Bild schwebt.