Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


Ajaxcontrol onmouseover ASP .NET

Posted on 2009-04-10
Medium Priority
Last Modified: 2012-05-06
Technologies:  APS .NET, AJAX, VS 2008, SQL 2005

I have an ASP .NET web application which contains an accordion AJAX control which displays some categories from sql. It has an itemcommand event which, when called, pulls the sublist from the database and bind it to the selectedindex on the accordion control.

This first part works but now I need to add an "onmouseover" event to each item on the listing.  when the mouseover opens it has to display data from sql and it should hide on onmouseout.

Can somebody give references or examples that I can study in order to get this to work?

<asp:ScriptManager ID="smRecentlyView" runat="server"></asp:ScriptManager>
   <cc1:Accordion ID="accRecentlyView" runat="server" Width="100%"  AutoSize="None"  FadeTransitions="false" RequireOpenedPane="false"  OnItemCommand="accRecentlyView_ItemCommand" ContentCssClass="cpBody" HeaderCssClass="cpHeader" HeaderSelectedCssClass="selected" SelectedIndex="-1"  >
            <asp:ImageButton ID="btnExpand" CommandName="Expand" runat="server" ImageUrl="/Images/expand.gif" /> <%#DataBinder.Eval(Container.DataItem, "profile")%>
             <asp:HiddenField ID="txt_profileID" runat="server" Value='<%#DataBinder.Eval(Container.DataItem,"profileid") %>' />
              <asp:Repeater ID="rptLinks" runat="Server" >
               <li><a href='<%#DataBinder.Eval(Container.DataItem, "pagelink")%><%#DataBinder.Eval(Container.DataItem, "key")%>' target="_top" onMouseover="ddrivetip('<%#DataBinder.Eval(Container.DataItem, "longDescription")%>', '#EFEFEF')" onMouseout="hideddrivetip()"><%#DataBinder.Eval(Container.DataItem, "shortDescription")%></a></li>

Open in new window

Question by:melinalt
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3

Author Comment

ID: 24118755
I found the hovermenuextender.
I have two hiden controls in my page and a linkbutton.
When someone does a mouseover I am passing two variable to my hidden controls first and than calling the onclick event on my linkbutton by using javascript.


The onclick event will executing my sql by using the values stored in my hidden controls and displaying the data.

My problem now is that the page keeps blinking/fleaking out of control.  Probably because the onmouseover keep calling the onclick event from y button.

Here is the code and again, any help will be appreciated it.


<html xmlns="" lang="en" xml:lang="en">
<head runat="server">
<script type="text/javascript">
            function GetHoverImage(t, i) {
                document.getElementById("hdType").value = t;
                document.getElementById("hdItem").value = i;
            function HideHoverImage(element) {
                document.getElementById("ReadMorePanel").visible = false;
<body  bgcolor="#eeeeee" leftmargin=0 rightmargin=0  bottommargin=0 >
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<span onmouseover="GetHoverImage('Test1','Test1')" onmouseout="HideHoverImage(this);">
<asp:Label ID="lblread" runat="server" >Test 1</asp:Label>
<cc1:HoverMenuExtender ID="HoverReadMore" runat="server" TargetControlID="lblread" PopupControlID="ReadMorePanel" PopupPosition="Right">
<br />
<br />
<span onmouseover="GetHoverImage('Test2','Test2')" onmouseout="HideHoverImage(this);">
<asp:Label ID="Label1" runat="server" >Test 2</asp:Label>
<cc1:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID="Label1" PopupControlID="ReadMorePanel" PopupPosition="Right">
<input type="hidden" id="hdType" name="hdType" runat="server" />
<input type="hidden" id="hdItem" name="hdItem" runat="server" />
<asp:LinkButton ID='lnkDetails' runat='server' OnClick='lnkDetails_click'></asp:LinkButton> 
<asp:Panel ID="ReadMorePanel" runat="server"  BorderStyle="Solid"  BorderColor="ActiveBorder" BackColor="Beige" >
    <asp:Label ID="lblDetails" runat="server"></asp:Label>
Sub lnkDetails_click(ByVal sender As Object, ByVal E As System.EventArgs) Handles lnkDetails.Click
   lblDetails.Text = hdType.Value & " - " & hdItem.Value
End Sub

Open in new window


Author Comment

ID: 24124156
What makes a question "Neglected" ?
LVL 22

Expert Comment

ID: 24131609
Click "Request Attention" to get the attention of the moderators.
How long should I wait for a response to my question?
If your question goes 12 hours without a response, it is tagged as Neglected, and a notice is sent to Designated Experts asking them to take a look at it. After 24 hours, you can click the Request Attention button, and ask the Moderators to review your question and get more help for you.
The Moderators may take some actions, like adding to or changing the zones your question is asked in; that also sends a notice to the Designated Experts. They may also offer you some advice regarding your question; this is solely to help you get the answer you need.
Please remember that all of the Experts are volunteers, so sometimes they have real life issues that arise. They are not paid for answering questions; they earn certificates, t-shirts for those certificates and their membership to Experts Exchange. The most important reason for them being here and participating is because they enjoy being here and helping people.
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

LVL 22

Expert Comment

ID: 24131636
>>>My problem now is that the page keeps blinking/fleaking out of control.  Probably because the onmouseover keep calling the onclick event from y button.
You are right. You are making too many database calls.
I would use some Label or Panel, and pre-populate them with detailed information. Then onmouseover just make the Label or Panel visible, and onmouseout make them invisible.


Author Comment

ID: 24132774
Thanks Sage,
I don't want to pre-populate because the query is pretty big and it will delay my page load a lot. Instead, I want the onmouse over to run the query and display results  so it will be up to the user to run the query and not the page load.
LVL 22

Accepted Solution

prairiedog earned 2000 total points
ID: 24132846
Then don't use OnMouseOver, it will definitely cause the screen to blink.
You can have a LinkButton or Button, say called "View Details", upon clicked the db query is executed to load more information. Since you are using AJAX, you can display details in an AJAX ModalPopup.

Author Closing Comment

ID: 31569013
Decided to follow prairiedog's recommendation.
Added a simple javascript to open a popup windows onmouseover. The window calls a page that executes the sql statement and displays the results.
No more flicking.

Featured Post

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question