HoverMenuExtender Lazy Loading

[spiffyharvey]

I have user avatars through my site and what I want is to have a hovermenu displayed on mouseover that shows stats about the user. (Stats, recent activities, recent posts, etc.) For obvious reasons I don't want to have this loaded on page_load and using a DynamicService call seems like it'd be cumbersome at best. (I'd need to pass back images from the database, stats, post strings, etc)

I'm trying to get this to work using a hovermenuextender. So far so good. I'm able to get the menu to display without issue. The problem comes in trying to make it load dynamically onmouseover. I found a link explaining how to accomplish lazy loading using tabcontainers and tried to modify the code to work for the hovermenuextender.

I feel like I'm REALLY close. The very last avatar rendered on the page works correctly. In fact, hovering over an avatar at the top of the page will cause the very last avatar to load it's content so that when you then hover over the last one the content within it is already populated properly. Hovering over any other avatar makes it look like nothing is happening. The loading gif/message just stay visible. I'm sure I'm missing something simple. Any ideas?

Here's my code:

http://pastebin.com/m5ce4d9f4

<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"
HoverCssClass="userInfoHover"
PopupPosition="Bottom">
</ajax:HoverMenuExtender>

<!-- User Profile Info -->
<aspanel ID="UserHiddenPanel" 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>
<aspanel 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"></asp:Label>
<asp:Label ID="UserStateLbl" runat="server"></asp:Label>
</span>
</aspanel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="imageHoverTrigger" />
</Triggers>
</asp:UpdatePanel>
</aspanel>



And in 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;
}

 

[jmeckley]

I would forgo the ms ajax controls altogether and use jquery to make an ajax request back to the server to get the data. there are a number of aritcles on the web about integrating jquery (specifically jquery ajax) with webforms. Rick Strahl is the first name that comes to mind.

Jason Meckley
Programmer
Specialty Bakers, Inc.

 

[spiffyharvey]

I actually JUST figured it out.

My Page_Load event hookup should've been:

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

and the javascript function should've been:

function OnHover(image) {
__doPostBack(image, '');
}

I'm not sure how the page is rendered, but trying to pass in the dummy event trigger at run time was causing confusion somewhere. In any case, I was about to head down the jquery route when I solved my problem.

Thanks for the reply though