Databases
StackOverflow2013
Postsdbo
POASP.NET HoverMenuExtender Lazy Loading
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POASP.NET HoverMenuExtender Lazy Loading
    text
    copied!<p>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. </p> <p>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!</p> <p><strong>EDIT</strong>: 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?</p> <pre><code>&lt;script language="javascript" type="text/javascript"&gt; function OnHover(image) { __doPostBack('&lt;%= this.imageHoverTrigger.UniqueID %&gt;', ''); } &lt;/script&gt; &lt;!-- DUMMY Hover Trigger --&gt; &lt;input id="imageHoverTrigger" runat="server" style="display:none;" type="button" onserverclick="imageHoverTrigger_Click" /&gt; &lt;!-- User Avatar --&gt; &lt;div style="border: solid 1px #AAA; padding:2px; background-color:#fff;"&gt; &lt;asp:ImageButton ID="UserImg" runat="server" /&gt; &lt;/div&gt; &lt;!-- Hover tooltip disabled by default (Explicitly enabled if needed)--&gt; &lt;ajax:HoverMenuExtender ID="UserInfoHoverMenu" Enabled="false" runat="server" OffsetX="-1" OffsetY="3" TargetControlID="UserImg" PopupControlID="UserInfoPanel" dyn HoverCssClass="userInfoHover" PopupPosition="Bottom"&gt; &lt;/ajax:HoverMenuExtender&gt; &lt;!-- User Profile Info --&gt; &lt;asp:Panel ID="UserInfoHover" runat="server" CssClass="userInfoPopupMenu"&gt; &lt;asp:UpdatePanel ID="UserInfoUpdatePanel" runat="server" UpdateMode="Conditional" &gt; &lt;ContentTemplate&gt; &lt;asp:Image ID="loadingImg" runat="server" ImageUrl="~/Design/images/ajax-loader-transp.gif" /&gt; &lt;asp:Label ID="loadingLbl" runat="server" Text="LOADING..." &gt;&lt;/asp:Label&gt; &lt;asp:Panel ID="UserInfo" runat="server" Visible="false"&gt; &lt;b&gt;&lt;asp:Label ID="UserNameLbl" runat="server"&gt;&lt;/asp:Label&gt;&lt;br /&gt;&lt;/b&gt; &lt;span style="font-size:.8em"&gt; &lt;asp:Label ID="UserCityLbl" runat="server" Visible="false"&gt;&lt;/asp:Label&gt; &lt;asp:Label ID="UserStateLbl" runat="server" Visible="false"&gt;&lt;/asp:Label&gt; &lt;/span&gt; &lt;/asp:Panel&gt; &lt;/ContentTemplate&gt; &lt;Triggers&gt; &lt;asp:AsyncPostBackTrigger ControlID="imageHoverTrigger" /&gt; &lt;/Triggers&gt; &lt;/asp:UpdatePanel&gt; &lt;/asp:Panel&gt; </code></pre> <p><strong>And the code-behind:</strong></p> <pre><code>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; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload