[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

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

How do I get a function to fire from the roll over (mouse over / hover) event?

Ok, so what i presently have is a div that lives under a label. the lable lives in a template field, which is part of a GridView. the Gridview lives inside of a UpdatePanel. Presently, using some jQuery, when a user rolls over / hovers over the label, the div pops up and displays some static information. what i'd like to have happen is, when a user hovers over the label, the jQuery (or javascript, which ever is preferred) would cause a function to fire off. this function, using the value of the label, would do some processing (maybe hit the database for some information) and then return a value that would be assigned to and or displayed by a literal inside the div. How do I do this? My existing code is included. I've asked this before but maybe in the wrong way and was clear about what I need.

my current jQuery code on the parent page:

        $(document).ready(function () {
            var updateWait = setTimeout(fadeUpdate, 3000);
            function fadeUpdate() {
                $("div.UpdatedMessage").fadeOut(1000);
            }
            $("a.SnapShot").hover(function () {
                var myo = $(this).offset();
                $("div.SnapShot").css({ left: (myo.left + 150) + "px", top: myo.top + -40 + "px" }).show();
            }, function () {
                $("div.SnapShot").hide();
            });
        });

this is what my grid, on the user control, that i've placed on the parent page, looks like:
the div that currently displays when you hover over the 'lblStudentName' filed in the grid is defined right underneath the lable itself.

        <asp:GridView ID="gdvStudentsSignedIn" runat="server" AutoGenerateColumns="false"
            CssClass="SignedInGrid" GridLines="None" AllowSorting="true" AllowPaging="true"
            PageSize="10" PagerStyle-HorizontalAlign="Center" OnRowDataBound="gdvStudentsSignedIn_OnRowDatabound"
            OnSorting="gdvShipments_OnSorting" OnRowCommand="gdvStudentSignedIn_OnRowCommand" OnPageIndexChanging="gdvStudentsSignedIn_OnPageIndexChanging">
            <Columns>
                <asp:TemplateField HeaderText="Record ID" SortExpression="1" ItemStyle-CssClass="StudentName">
                    <ItemTemplate>
                        <h2>
                            <asp:Label ID="lblRecordID" runat="server" CssClass="StudentNameLabel" Text='<%# Eval("InOutUid") %>'></asp:Label><h2>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="StudentName" SortExpression="1" ItemStyle-CssClass="StudentName">
                    <ItemTemplate>
                        <h2>
                            <a id="aSnapShot" runat="server" class="SnapShot">
                                <asp:Label ID="lblStudentName" runat="server" CssClass="StudentNameLabel" Text='<%# Eval("AthleteName") %>'></asp:Label></a><h2>
                                    <div class="SnapShot" style="display: none; padding: 0 0 0 10px">
                                        <div class="InfoContainer">
                                            <div class="InfoContent">
                                                <div id="div5" runat="server">
                                                    <h6 id="h1" runat="server">
                                                        <asp:Label ID="lblCurrentTime" runat="server" CssClass="StudentNameLabel" Text='<%# SnapShotCurrentWeekTotal(Eval("AthleteUiD")) %>'></asp:Label></h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Student ID" SortExpression="2">
                    <ItemTemplate>
                        <h2>
                            <asp:Label ID="lblAthleteUid" runat="server" Text='<%# Eval("AthleteUiD") %>'></asp:Label></h2>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Time In" SortExpression="3">
                    <ItemTemplate>
                        <h2>
                            <asp:Label ID="lblTimeIn" runat="server" Text='<%# Eval("TimeIn") %>'></asp:Label></h2>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Since Signed In">
                    <ItemTemplate>
                        <h2>
                            <asp:Label runat="server" ID="lblSinceSignedIn" CssClass="sinceSignedIn" Text='<%# CalculateTime(Eval("TimeIn"), Eval("AthleteUid")) %>'></asp:Label></h2>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Team / Sport" SortExpression="5">
                    <ItemTemplate>
                        <h2>
                            <asp:Label ID="lblTeamName" runat="server" Text='<%# Eval("TeamName") %>'></asp:Label></h2>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:LinkButton runat="server" ID="btnSignOut" Text="Sign Out" CommandName="SignOut"
                            CommandArgument='<%# Eval("InOutUid") %>' CssClass="button small green" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <PagerSettings Mode="NextPrevious" />
            <PagerStyle CssClass="Paging" />
            <PagerTemplate>
                <div class="Paging">
                    <asp:LinkButton ID="PreviousLinkButton" runat="server" CommandArgument="Prev" CommandName="Page"
                        CssClass="PagerControl" Text="Prev"></asp:LinkButton>
                    <asp:Label ID="PageDescriptionLabel" runat="server" CssClass="PagerControl"></asp:Label>
                    <asp:LinkButton ID="NextLinkButton" runat="server" CommandArgument="Next" CommandName="Page"
                        CssClass="PagerControl" Text="Next"></asp:LinkButton>
                </div>
            </PagerTemplate>
        </asp:GridView>

this is my function that i want to kick off and perform a calculation. it lives in the code behind of the user control.

    protected string SnapShotCurrentWeekTotal(object studentId)
    {
        string strDateTime;
        string stId;
        DateTime currentDateTime;

        stId = (String)(studentId);

        DateTime signInTime = (DateTime)(Utility.GetFirstSignInTimeForTheWeek(stId));
        strDateTime = String.Format("{0:yyyy/MM/dd HH:mm:ss}", DateTime.Now.ToString());
        currentDateTime = DateTime.Parse(strDateTime);
        TimeSpan duration = new TimeSpan(0, 3, 0, 0);
        currentDateTime = currentDateTime.Add(duration);
        TimeSpan ts = currentDateTime - signInTime;

        return "<h6>Current Week Total: " + ts.Days.ToString() + ":" + 
            ts.Hours.ToString("00") + ":" + 
            ts.Minutes.ToString("00") + ":" + 
            ts.Seconds.ToString("00") + "</h6>";
    }
                                            

Open in new window

0
Michael Sterling
Asked:
Michael Sterling
  • 4
  • 3
1 Solution
 
Tom BeckCommented:
You say you have the Gridview in an UpdatePanel. What is the purpose of that? No need to update the entire Gridview just to display additional information about one item in the list.

I'm sure there's more than one way to do this, but here is what I would do in that situation (all untested code).

In your TemplateField, I would just have the Label to hold the "AthleteName". You can style the label to look like a link if desired.

<asp:TemplateField HeaderText="StudentName" SortExpression="1" ItemStyle-CssClass="StudentName">
                    <ItemTemplate>
                        <h2>
                                <asp:Label ID="lblStudentName" runat="server" CssClass="StudentNameLabel" Text='<%# Eval("AthleteName") %>'></asp:Label><h2>
                    </ItemTemplate>
                </asp:TemplateField>

Then I would create a new aspx page whose only purpose is to fetch the additional information and style it's appearance. It only needs the asp controls and css necessary to display the information the way you want it to look in the pop up. And of course the SnapShotCurrentWeekTotal function would be in code behind.

Somewhere on your GridView page you have your SnapShot pop up div markup in plain html with display:none.

When a user hovers over the athlete's name in the GridView you can use jquery ajax to call your new page, passing the "AthleteName" in a simple GET query. Include a loading gif for the pop up in case it takes time to fetch the information. Your hover would look something like this:

$(document).ready(function () {
            ...
            ...

            $.ajaxSetup({
            cache:false
           });
          var ajax_load = "<img src='images/loading.gif' class='loading' alt='loading...' />";
          var loadUrl = "AdditionalInfo.aspx?UiD=";   //the new aspx page
            $("span.StudentNameLabel").hover(function () {
                var myo = $(this).offset();
                $("div.SnapShot").css({ left: (myo.left + 150) + "px", top: myo.top + -40 + "px" }).show();
                loadUrl += $(this).html();          //add the athlete's name to the query string
                loadUrl = encodeURI(loadUrl);  //encode the name in the query string
                $("div.SnapShot").html(ajax_load).load(loadUrl);
            }, function () {
                $("div.SnapShot").hide();
            });
        });

Then in your code behind of the "AdditionalInfo.aspx" page you retrieve the athlete's name from the query string with something like:

string studentId = HttpUtility.UrlDecode(Request.QueryString["UiD"]);

...and call the function:  SnapShotCurrentWeekTotal(studentId); and have it populate the markup on the page (asp:Labels or whatever) to include the additional information.
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
@tommyboy: Ok. i think i understand what's goin on here. just to verify or maybe further explain, i have a question about the SnapShot div that will contain the page with the additional information. how will i center or make sure that the information that shows up in the SnapShot div will be viewable? I'm sure the information will be there, but do i need to worry about it scrolling or the information being out of view? This would be new territory for me so i just wanna know what to expect. It seems simple enough to follow though. Also you suggested placing the SnapShot div elsewhere on the page. If I leave it where it is will that be ok? I ask because I have code that places that div right where i want it, so if everything else works as you've described i'd like to leave it where it is. will that cause a problem?
0
 
Tom BeckCommented:
Unless I am misreading your code, it looks like you were attempting to place the popup div in a position that was relative to the name being hovered with this line:

$("div.SnapShot").css({ left: (myo.left + 150) + "px", top: myo.top + -40 + "px" }).show();

That makes sense except in your original code "div.SnapShot" refers to all the divs in your GridView with class="SnapShot". My suggestion is to remove all those "div.SnapShot" divs from the GridView and have only one "div.SnapShot" outside the GridView. Why repeat that markup for every row in the GridView when you will only be popping up one SnapShot div when a user hovers? Just have one and set it to display:none, show and hide it with the jquery, populate it dynamically with relative information, and position it relative to the name hovered.
0
Free Backup Tool for VMware and Hyper-V

Restore full virtual machine or individual guest files from 19 common file systems directly from the backup file. Schedule VM backups with PowerShell scripts. Set desired time, lean back and let the script to notify you via email upon completion.  

 
Michael SterlingWeb Applications DeveloperAuthor Commented:
@tommyBoy: i think i see what you're saying, let me say it this way. my SnapShot class was only supposed to be for the one column in each row (the 'Student Name' column). so as it stands now, when you hover over that field, in each row, the jQuery makes that div popup. so i've only got one div with that class, but it's repeated for each row, that part works fine as far as i'm concerned but I can remove it from the GridView and place it out side of it and just place it where I want it to, when it pops up. i see what you're saying there.
0
 
Tom BeckCommented:
that part works fine as far as i'm concerned

It's not working the way you think it is. Because a div with the class SnapShot exists for every row in the GridView, when you use this selector $("div.SnapShot") it is applying the code that follows to EVERY div with that class, not just the one in the row that was hovered. Jquery is doing a lot of processing there, re-positioning many divs and stacking them up one on top of the other. You're only seeing the one on top. Eliminate all those divs and all that processing, you only need one that is independent of the GridView. In fact, you might as well give that one pop up div an id="SnapShot" instead of a class.
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
@tommyBoy: sounds like a plan. i'll get right on it. didn't know about the extra processing...
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
thank you.
0

Featured Post

Restore individual SQL databases with ease

Veeam Explorer for Microsoft SQL Server delivers an easy-to-use, wizard-driven interface for restoring your databases from a backup. No expert SQL background required. Web interface provides a complete view of all available SQL databases to simplify the recovery of lost database

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