Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 716
  • Last Modified:

Ajaxcontrol onmouseover ASP .NET

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
melinalt
Asked:
melinalt
  • 4
  • 3
1 Solution
 
melinaltAuthor Commented:
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
 
melinaltAuthor Commented:
What makes a question "Neglected" ?
0
 
prairiedogCommented:
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
prairiedogCommented:
>>>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
 
melinaltAuthor Commented:
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
 
prairiedogCommented:
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
 
melinaltAuthor Commented:
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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now