Solved

Ajaxcontrol onmouseover ASP .NET

Posted on 2009-04-10
7
704 Views
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?

Thanks
<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"  >
      <HeaderTemplate>
            <asp:ImageButton ID="btnExpand" CommandName="Expand" runat="server" ImageUrl="/Images/expand.gif" /> <%#DataBinder.Eval(Container.DataItem, "profile")%>
      </HeaderTemplate>
      <ContentTemplate>
             <asp:HiddenField ID="txt_profileID" runat="server" Value='<%#DataBinder.Eval(Container.DataItem,"profileid") %>' />
              <asp:Repeater ID="rptLinks" runat="Server" >
               <ItemTemplate>
               <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>
               </ItemTemplate>
               </asp:Repeater>
       </ContentTemplate>
</cc1:Accordion>

Open in new window

0
Comment
Question by:melinalt
  • 4
  • 3
7 Comments
 
LVL 1

Author Comment

by:melinalt
ID: 24118755
ok,
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.

document.all("lnkDetails").click();

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.

Thanks

Designer:
=========================
 
 
 
 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head runat="server">
<title></title>
 
<script type="text/javascript">
            function GetHoverImage(t, i) {
                document.getElementById("hdType").value = t;
                document.getElementById("hdItem").value = i;
                document.all("lnkDetails").click();
            }
            
            function HideHoverImage(element) {
                document.getElementById("ReadMorePanel").visible = false;
            }
 </script>
   
</head>
 
<body  bgcolor="#eeeeee" leftmargin=0 rightmargin=0  bottommargin=0 >
 
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
 
<span onmouseover="GetHoverImage('Test1','Test1')" onmouseout="HideHoverImage(this);">
<asp:Label ID="lblread" runat="server" >Test 1</asp:Label>
</span>
<cc1:HoverMenuExtender ID="HoverReadMore" runat="server" TargetControlID="lblread" PopupControlID="ReadMorePanel" PopupPosition="Right">
</cc1:HoverMenuExtender>
 
<br />
<br />
<span onmouseover="GetHoverImage('Test2','Test2')" onmouseout="HideHoverImage(this);">
<asp:Label ID="Label1" runat="server" >Test 2</asp:Label>
</span>
 
<cc1:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID="Label1" PopupControlID="ReadMorePanel" PopupPosition="Right">
</cc1:HoverMenuExtender>
 
 
<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>
</asp:Panel>
 
 
</form>
 
</body>
</html>
 
 
CODE BEHIND:
============================================
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

0
 
LVL 1

Author Comment

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

Expert Comment

by:prairiedog
ID: 24131609
Click "Request Attention" to get the attention of the moderators.
http://www.experts-exchange.com/help.jsp?hi=412
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.
0
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
LVL 22

Expert Comment

by:prairiedog
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.

0
 
LVL 1

Author Comment

by:melinalt
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.
0
 
LVL 22

Accepted Solution

by:
prairiedog earned 500 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.
0
 
LVL 1

Author Closing Comment

by:melinalt
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.
Thanks,
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

816 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now