Solved

Ajaxcontrol onmouseover ASP .NET

Posted on 2009-04-10
7
702 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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

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…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

706 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

19 Experts available now in Live!

Get 1:1 Help Now