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

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

How do I call a function from my rollover?

I have a DataTable that I've built and added a link to the rows of the DataTable. Currently, when a user clicks this link in the datatable, the page performs a postback and includes a request querystring parameter. Using this parameter, a calculation is performed by a method in my C# file, that will produce a string that will then be displayed and fade out after a few seconds. I'd like to have the same functionality available by the user doing a rollover on that link. How do I do this? I imagine that there will be some javascript/jQuery involved in this, and if so, can you please include detailed code or links with detailed code (jsfiddle etc.) so that I can follow. I'm still a bit of a novice in jQuery/javascript.

<script type="text/javascript">
        //MYSQL DB VERSION
        $(document).ready(function () {
            $(".divFadeInOut").fadeToggle(4000);

            $.ajax({
                "url": "SignInGrid.aspx/getData",
                "type": "POST",
                "contentType": "application/json; charset=utf-8",
                "dataType": "json",
                success: function (json) {
                    var table = $('#example').DataTable({
                        "columns": [
                            {
                                "className": "dt-body-center",
                                "targets": 0,
                                "data": "StudentID",
                                "render": function (data, type, full, meta, oData) {
                                    return '<a href="StudentAthleteInfo.aspx?StudentID=' + data + '">' + data + '</a>';
                                }
                            },
                            {
                                "className": "dt-body-center",
                                "data": "StudentName"
                            },
                            {
                                "className": "dt-body-center",
                                "data": "TimeIn"
                            },
                            {
                                "className": "dt-body-center",
                                "data": "TimeSignedIn"
                            },
                            {
                                "className": "dt-body-center",
                                "targets": 0,
                                "data": "StudentID2",
                                "render": function (data, type, full, meta, oData) {
                                    return '<a href="StudentAthleteInfo.aspx?StudentID=' + data + '" class="glyphicon glyphicon-ok text-center" style="color: green;"></a>';
                                }
                            },
                            {
                                "className": "dt-body-center",
                                "targets": 0,
                                "data": "StudentID3",
                                "render": function (data, type, full, meta, oData) {
                                    return '<a href="StudentAthleteInfo.aspx?StudentID=' + data + '" class="glyphicon glyphicon-time text-center" style="color: red;"></a>';
                                }
                            },
                        ],
                        "aaData": $.parseJSON(json.d)
                    });
                }
            });

            var lblVal = $(".userIDLabel").html();
            var lblVal1 = $(".dealerTypeLabel").html();

            if (lblVal.indexOf("ADMIN") >= 0) {
                $(".adminLinks").css("display", "block");
                $("#liViewVendorSubmissions").css("display", "block");
                $("#liVendorList").css("display", "none");
                $("#topdropdown").css("display", "none");

                $("#liSearchInvintoryMenuItem").css("display", "none");
                $("#liRequstBoardMenuItem").css("display", "none");
                $("#liProfileMenuItem").css("display", "none");
                $("#liContactUsMenuItem").css("display", "none");
            }
            else {
                $(".adminLinks").css("display", "none");
            }
        });
    </script>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">
    <div class="row myRow">
        <div class="col-lg-12 text-page-title-center" style="background: #000; height: 33px;">
            <div id="divPageTitle" class="center-page-title center" runat="server">
                <asp:Label class="pageTitle" runat="server" ID="pageTitle" Text="SIGNED IN LIST"></asp:Label>
            </div>
        </div>
    </div>
    <table id="example" class="display responsive nowrap" data-page-length="5" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th class="dt-head-center dt-body-center" data-orderable="true">StudentID</th>
                <th class="dt-head-center" data-orderable="true">StudentName</th>
                <th class="dt-head-center" data-orderable="true">TimeIn</th>
                <th class="dt-head-center" data-orderble="true">TimeSignedIn</th>
                <th class="dt-head-center">Week Total</th>
                <th class="dt-head-center">Sign Out</th>
                <%--<th>Delete</th>--%>
            </tr>
        </thead>
    </table>
</asp:Content>

Open in new window

0
Michael Sterling
Asked:
Michael Sterling
  • 4
  • 4
1 Solution
 
James BilousSoftware EngineerCommented:
You can use an AJAX request in a "mouseover" event using jquery.

Essentailly, rolling over the link creates a mouseover event which can be listened for and responded to with a function using jquery. In this response function, you can make an asynchronous request which retrieves the text you wish to display. Take the response, create the popup and replace its text with the text from the jquery response and you're in business.

See:
Handling mouseover events: http://www.w3schools.com/jquery/event_mouseover.asp
JQuery Post: http://www.w3schools.com/jquery/ajax_post.asp
JQuery Replace: http://www.w3schools.com/jquery/html_replacewith.asp
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
@James Bilous: Thank you for the links. My problem seems to be: "drilling down to" or "getting a hold of" the specific element in my row. I can hover over the table and get the div (<div id=pop-up></div>) to pop up, and also I can hover over the link: <a href="#" id="lnkweektotal">Show pop up</a>" and get the div to show up, which is pretty standard/basic. However, as I stated, I'm having trouble finding / getting to my link (its actually an image of a green check mark) and having the div only pop up when that image/link is hovered over. Below is my code and an image of the green check mark image/link.

<%@ Page Title="" Language="C#" MasterPageFile="MasterPageStock.master" AutoEventWireup="true" CodeFile="SignInGrid.aspx.cs" Inherits="SignInGrid" %>

<asp:Content ID="Content0" ContentPlaceHolderID="head" runat="Server">
    <style type="text/css">
        td.details-control {
            background: url('Images/bullet_add.png') no-repeat center center;
            cursor: pointer;
        }

        tr.shown td.details-control {
            background: url('Images/red_minus.png') no-repeat center center;
        }

        .navbar-right {
            display: block;
        }

        .lnkBtnLogOut, .pageTitle {
            display: inline;
        }

        .rwBtn {
            margin: 30px 0 0 0;
        }
    </style>

    <script type="text/javascript">
        //MYSQL DB VERSION
        $(document).ready(function () {
            $.ajax({
                "url": "SignInGrid.aspx/getData",
                "type": "POST",
                "contentType": "application/json; charset=utf-8",
                "dataType": "json",
                success: function (json) {
                    var table = $('#example').DataTable({
                        "columns": [
                            {
                                "className": "dt-body-center",
                                "targets": 0,
                                "data": "StudentID",
                                "render": function (data, type, full, meta, oData) {
                                    return '<a href="StudentAthleteInfo.aspx?StudentID=' + data + '">' + data + '</a>';
                                }
                            },
                            {
                                "className": "dt-body-center",
                                "data": "StudentName"
                            },
                            {
                                "className": "dt-body-center",
                                "data": "TimeIn"
                            },
                            {
                                "className": "dt-body-center",
                                "data": "TimeSignedIn"
                            },
                            {
                                "className": "dt-body-center",
                                "targets": 0,
                                "data": "StudentID2",
                                "render": function (data, type, full, meta, oData) {
                                    return '<a href="StudentAthleteInfo.aspx?StudentID=' + data + '&showweektotal=y" class="glyphicon glyphicon-ok text-center" style="color: green;"></a>';
                                }
                            },
                            {
                                "className": "dt-body-center",
                                "targets": 0,
                                "data": "StudentID3",
                                "render": function (data, type, full, meta, oData) {
                                    return '<a href="StudentAthleteInfo.aspx?StudentID=' + data + '&signout=y" class="glyphicon glyphicon-time text-center" style="color: red;"></a>';
                                }
                            },
                        ],
                        "aaData": $.parseJSON(json.d)
                    });
                }
            });

            
            var lblVal = $(".userIDLabel").html();
            var lblVal1 = $(".dealerTypeLabel").html();

            if (lblVal.indexOf("ADMIN") >= 0) {
                $(".adminLinks").css("display", "block");
                $("#liViewVendorSubmissions").css("display", "block");
                $("#liVendorList").css("display", "none");
                $("#topdropdown").css("display", "none");

                $("#liSearchInvintoryMenuItem").css("display", "none");
                $("#liRequstBoardMenuItem").css("display", "none");
                $("#liProfileMenuItem").css("display", "none");
                $("#liContactUsMenuItem").css("display", "none");
            }
            else {
                $(".adminLinks").css("display", "none");
            }
        });

        $(document).on('click', '#btnWeekTotal', null, function () {
            var url = this.getAttribute("data-url");
            alert(url);
            alert(window.location);
            window.location = url;

        });

        $(function () {
            var moveLeft = 0;
            var moveDown = 0;

            $('table#example').hover(function (e) {
                $('div#pop-up').show();
            }, function () {
                $('div#pop-up').hide();
            });

            $('table#example').mousemove(function (e) {
                $("div#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
            });
        });

        $(function () {
            var moveLeft = 0;
            var moveDown = 0;

            $('a#lnkweektotal').hover(function (e) {
                $('div#pop-up').show();
            }, function () {
                $('div#pop-up').hide();
            });

            $('a#lnkweektotal').mousemove(function (e) {
                $("div#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
            });
        });

        //var table = $('#example').DataTable();

        //$('#example tbody').on('click', 'td', function () {
        //    alert(table.cell(this).data());
        //});
    </script>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">
    <div class="row myRow">
        <div class="col-lg-12 text-page-title-center" style="background: #000; height: 33px;">
            <div id="divPageTitle" class="center-page-title center" runat="server">
                <asp:Label class="pageTitle" runat="server" ID="pageTitle" Text="SIGNED IN LIST"></asp:Label>
            </div>
        </div>
    </div>
    <table id="example" class="display responsive nowrap" data-page-length="10" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th class="dt-head-center dt-body-center" data-orderable="true">StudentID</th>
                <th class="dt-head-center" data-orderable="true">StudentName</th>
                <th class="dt-head-center" data-orderable="true">TimeIn</th>
                <th class="dt-head-center" data-orderble="true">TimeSignedIn</th>
                <th class="dt-head-center">Week Total</th>
                <th class="dt-head-center">Sign Out</th>
                <%--<th>Delete</th>--%>
            </tr>
        </thead>
        <%--<tbody>
            <tr>
                <td class="dt-body-center"></td>
                <td class="dt-body-center"></td>
                <td class="dt-body-center"></td>
                <td class="dt-body-center"></td>
                <td class="dt-body-center"></td>
            </tr>
        </tbody>--%>
    </table>
    <p>
        <a href="#" id="lnkweektotal">Show pop up</a>
    </p>
    <div id="pop-up" style="display: none;">
        <h3>Pop-up div Successfully Displayed</h3>
    </div>
</asp:Content>

Open in new window


gridRow
0
 
James BilousSoftware EngineerCommented:
So your check mark is under the "Week Total" column? You can use a selector like n-th child to target only the nth cell in each row:

            $('#example td:nth-child(4) a').hover(function (e) {
                $('div#pop-up').show();
            }, function () {
                $('div#pop-up').hide();
            });

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Michael SterlingWeb Applications DeveloperAuthor Commented:
@James Bilous: Still no pop up action. Does it have anything to do with the way my data table is being created? The timing of its creation?
0
 
James BilousSoftware EngineerCommented:
If your HTML is not on the page at page load (which it won't be if you're asynchronously loading things in with a datatable) you'll need to use a delegate. ie:

$('body').on('mouseenter', '#example td:nth-child(4) a', function(e){
$('div#pop-up').show();
});

$('body').on('mouseleave', '#example td:nth-child(4) a', function(e){
$('div#pop-up').hide();
});

Open in new window


The reason for this is that the javascript runs when the page is loaded, and since the table data has not yet been loaded, jQuery does not have anything to bind to. By binding to a parent static element (by targeting body), events will bubble up from the dynamic elements to the parent static element which will in turn handle their events.
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
@James Bilous: I've tried this:

            $('#example body').on('mouseover', '#example td:nth-child(5) a', function (e) {
                $('div#pop-up').show();
            });

            $('#example body').on('mouseout', '#example td:nth-child(5) a', function (e) {
                $('div#pop-up').hide();
            });

Open in new window


and this

            $('body').on('mouseover', '#example td:nth-child(5) a', function (e) {
                $('div#pop-up').show();
            });

            $('body').on('mouseout', '#example td:nth-child(5) a', function (e) {
                $('div#pop-up').hide();
            });

Open in new window


both inside and outside of the $(document).ready(function () { } and got nothing. i'm including (hopefully) an image of my table in ff developer tools window. What is wrong with my sintax? Also I think the nth base is 1-indexed.

<%@ Page Title="" Language="C#" MasterPageFile="MasterPageStock.master" AutoEventWireup="true" CodeFile="SignInGrid.aspx.cs" Inherits="SignInGrid" %>

<asp:Content ID="Content0" ContentPlaceHolderID="head" runat="Server">
    <style type="text/css">
        td.details-control {
            background: url('Images/bullet_add.png') no-repeat center center;
            cursor: pointer;
        }

        tr.shown td.details-control {
            background: url('Images/red_minus.png') no-repeat center center;
        }

        .navbar-right {
            display: block;
        }

        .lnkBtnLogOut, .pageTitle {
            display: inline;
        }

        .rwBtn {
            margin: 30px 0 0 0;
        }
    </style>

    <script type="text/javascript">
        //MYSQL DB VERSION
        $(document).ready(function () {
            $.ajax({
                "url": "SignInGrid.aspx/getData",
                "type": "POST",
                "contentType": "application/json; charset=utf-8",
                "dataType": "json",
                success: function (json) {
                    var table = $('#example').DataTable({
                        "columns": [
                            {
                                "className": "dt-body-center",
                                "targets": 0,
                                "data": "StudentID",
                                "render": function (data, type, full, meta, oData) {
                                    return '<a href="StudentAthleteInfo.aspx?StudentID=' + data + '">' + data + '</a>';
                                }
                            },
                            {
                                "className": "dt-body-center",
                                "data": "StudentName"
                            },
                            {
                                "className": "dt-body-center",
                                "data": "TimeIn"
                            },
                            {
                                "className": "dt-body-center",
                                "data": "TimeSignedIn"
                            },
                            {
                                "className": "dt-body-center",
                                "targets": 0,
                                "data": "StudentID2",
                                "render": function (data, type, full, meta, oData) {
                                    return '<a href="StudentAthleteInfo.aspx?StudentID=' + data + '&showweektotal=y" class="glyphicon glyphicon-ok text-center" style="color: green;"></a>';
                                }
                            },
                            {
                                "className": "dt-body-center",
                                "targets": 0,
                                "data": "StudentID3",
                                "render": function (data, type, full, meta, oData) {
                                    return '<a href="StudentAthleteInfo.aspx?StudentID=' + data + '&signout=y" class="glyphicon glyphicon-time text-center" style="color: red;"></a>';
                                }
                            },
                        ],
                        "aaData": $.parseJSON(json.d)
                    });
                }
            });

            
            var lblVal = $(".userIDLabel").html();
            var lblVal1 = $(".dealerTypeLabel").html();

            if (lblVal.indexOf("ADMIN") >= 0) {
                $(".adminLinks").css("display", "block");
                $("#liViewVendorSubmissions").css("display", "block");
                $("#liVendorList").css("display", "none");
                $("#topdropdown").css("display", "none");

                $("#liSearchInvintoryMenuItem").css("display", "none");
                $("#liRequstBoardMenuItem").css("display", "none");
                $("#liProfileMenuItem").css("display", "none");
                $("#liContactUsMenuItem").css("display", "none");
            }
            else {
                $(".adminLinks").css("display", "none");
            }

            $('#example body').on('mouseover', '#example td:nth-child(5) a', function (e) {
                $('div#pop-up').show();
            });

            $('#example body').on('mouseout', '#example td:nth-child(5) a', function (e) {
                $('div#pop-up').hide();
            });
        });

        $(document).on('click', '#btnWeekTotal', null, function () {
            var url = this.getAttribute("data-url");
            alert(url);
            alert(window.location);
            window.location = url;

        });

        //$(function () {
        //    var moveLeft = 0;
        //    var moveDown = 0;

        //    $('table#example').hover(function (e) {
        //        $('div#pop-up').show();
        //    }, function () {
        //        $('div#pop-up').hide();
        //    });

        //    $('table#example').mousemove(function (e) {
        //        $("div#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
        //    });
        //});

        //$('table#example td:nth-child(5) a').hover(function (e) {
        //    $('div#pop-up').show();
        //}, function () {
        //    $('div#pop-up').hide();
        //});


        $(function () {
            var moveLeft = 0;
            var moveDown = 0;

            $('a#lnkweektotal').hover(function (e) {
                $('div#pop-up').show();
            }, function () {
                $('div#pop-up').hide();
            });

            $('a#lnkweektotal').mousemove(function (e) {
                $("div#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
            });
        });

        //var table = $('#example').DataTable();

        //$('#example tbody').on('click', 'td', function () {
        //    alert(table.cell(this).data());
        //});
    </script>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">
    <div class="row myRow">
        <div class="col-lg-12 text-page-title-center" style="background: #000; height: 33px;">
            <div id="divPageTitle" class="center-page-title center" runat="server">
                <asp:Label class="pageTitle" runat="server" ID="pageTitle" Text="SIGNED IN LIST"></asp:Label>
            </div>
        </div>
    </div>
    <table id="example" class="display responsive nowrap" data-page-length="10" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th class="dt-head-center dt-body-center" data-orderable="true">StudentID</th>
                <th class="dt-head-center" data-orderable="true">StudentName</th>
                <th class="dt-head-center" data-orderable="true">TimeIn</th>
                <th class="dt-head-center" data-orderble="true">TimeSignedIn</th>
                <th class="dt-head-center">Week Total</th>
                <th class="dt-head-center">Sign Out</th>
                <%--<th>Delete</th>--%>
            </tr>
        </thead>
        <%--<tbody>
            <tr>
                <td class="dt-body-center"></td>
                <td class="dt-body-center"></td>
                <td class="dt-body-center"></td>
                <td class="dt-body-center"></td>
                <td class="dt-body-center"></td>
            </tr>
        </tbody>--%>
    </table>
    <p>
        <a href="#" id="lnkweektotal">Show pop up</a>
    </p>
    <div id="pop-up" style="display: none;">
        <h3>Pop-up div Successfully Displayed</h3>
    </div>
</asp:Content>

[embed=file 1108503]

Open in new window

ffDTwindow.jpg
ffDevTools1.jpg
0
 
James BilousSoftware EngineerCommented:
Can you give that glyphicon anchor tag a class? If so, that would probably be the easiest solution rather than the n-th child stuff.

            $('body').on('mouseover', '.someAnchorTagClass', function (e) {
                $('div#pop-up').show();
            });

            $('body').on('mouseout', '.someAnchorTagClass', function (e) {
                $('div#pop-up').hide();
            });

Open in new window

1
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
WINNER!!! WINNER!!! Thank you James Bilous!
1

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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