JQuery mouse over Question? : The Official Microsoft ASP.NET Forums

bodyHandler: function () {
                    var VendorID = $(this).closest("tr").find("span[id*=VendorNo]").text();
                    var ItemID = $(this).closest("tr").find("input[type=hidden][id*=itemID]").val();
                    alert(VendorID);
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "VendorRequest.aspx/getLastRequest",
                        data: "{'VendorID': '" + VendorID + "','ItemID': '" + ItemID + "'}",
                        dataType: "json",
                        success: function (msg) {
                            alert(msg.d);
                            return $(this).next(".tooltip999").html(msg.d);
                        }
                    });
                }

Keep your friends close and your enemies even closer

Reply

asteranup

All-Star

30184 Points

4906 Posts

Re: JQuery mouse over Question?

Sep 27, 2011 11:05 AM|LINK

Hi,

One more thing I have noticed that you are returning json result.

Is your ajax call is successful? Check this.

Either you build the html from the json result and set .html() or you return html datatype.

Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog

Reply

cenk1536

Contributor

2503 Points

2123 Posts

Re: JQuery mouse over Question?

Sep 27, 2011 11:35 AM|LINK

can you give me an example?

Keep your friends close and your enemies even closer

Reply

asteranup

All-Star

30184 Points

4906 Posts

Re: JQuery mouse over Question?

Sep 27, 2011 11:42 AM|LINK

It depends how you want to build your html from json. For example following post is used to build dropdown form json returned value-

http://forums.asp.net/p/1717977/4587810.aspx/1?Re+JQuery+AJAX+call+to+page+method+not+working

Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog

Reply

cenk1536

Contributor

2503 Points

2123 Posts

Re: JQuery mouse over Question?

Sep 27, 2011 12:36 PM|LINK

Hi asteranup,

I am using JQuery Tools Tooltip.It only works with the below samples but as I told you, the tooltip pops up inside of the row. How can I fix this?

Bytheway, there is NO problem with ajax, web method returns only one output.

Remove this one:

        $(document).ready(function () {
           $("table[id*=GridView1] span[id*=LastDeliveryDate]").tooltip({
 
                       delay: 0,
                        offset: [-65, -110],
                       position: 'center top',
                        bodyHandler: function () {
 
                            return $($(this).find("div.tooltip999").html());
                        }
 
                   });
                });

And add this:

$(document).ready(function () {
            $("table[id*=GridView1] span[id*=LastDeliveryDate]").mouseover(function () {
                //debugger
                $("#tooltip999").empty();
                $("#tooltip999").show();
                var VendorID = $(this).closest("tr").find("span[id*=VendorNo]").text();
                var ItemID = $(this).closest("tr").find("input[type=hidden][id*=itemID]").val();
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "VendorRequest.aspx/getLastRequest",
                    data: "{'VendorID': '" + VendorID + "','ItemID': '" + ItemID + "'}",
                    dataType: "json",
                    success: function (msg) {
                        //alert(msg.d);
 
                        $("#tooltip999").html(msg.d);
                    }
                });
            });
            $("table[id*=GridView1] span[id*=LastDeliveryDate]").mouseout(function () {
 
                //alert(msg.d);
 
                $("#tooltip999").html("");
                $("#tooltip999").hide();
 
            });
        });

Keep your friends close and your enemies even closer

Reply

cenk1536

Contributor

2503 Points

2123 Posts

Re: JQuery mouse over Question?

Sep 27, 2011 01:40 PM|LINK

Can I have this CSS on #tooltip999???May be if I can add those properties to the div, then It may pop up.

.tooltip999
{
    background: url(Images/white_arrow.png) repeat scroll 0 0 transparent;
    color: #e62424;
    display: none;
    font-size: 16px;
    text-align: center;
    height: 70px;
    padding: 25px;
    width: 160px;
    z-index: 11;
}

Keep your friends close and your enemies even closer

Reply

cenk1536

Contributor

2503 Points

2123 Posts

Re: JQuery mouse over Question?

Sep 28, 2011 07:01 AM|LINK

Hi,

Since I am using JQuery Tools Tooltip, I found a similar question as follows:

http://flowplayer.org/tools/forum/30/39282

And I tried to change the JQuery as follows:

$(document).ready(function () {
            $("table[id*=GridView1] span[id*=LastDeliveryDate]").tooltip({
 
                delay: 0,
                offset: [-65, -110],
                position: 'center top',
 
                onBeforeShow: function () {
                    debugger
                    var VendorID = $("table[id*=GridView1] span[id*=LastDeliveryDate]").closest("tr").find("span[id*=VendorNo]").text();
                    var ItemID = $("table[id*=GridView1] span[id*=LastDeliveryDate]").closest("tr").find("input[type=hidden][id*=itemID]").val();
 
                    theUrl = this.getTrigger().attr("table[id*=GridView1] span[id*=LastDeliveryDate]");
                    getAjaxData(theUrl, this.getTip());
                }
 
            });
            function getAjaxData(theUrl, $tip) {
                debugger
 
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "VendorRequest.aspx/getLastRequest",
                    data: "{'VendorID': '" + VendorID + "','ItemID': '" + ItemID + "'}",
                    dataType: "json",
                    success: function (msg) {
                        //alert(msg.d);
 
                        $tip.html(msg.d);
                    }
                });
            }
 
        });

I have 2 sample rows in this GridView and the VendorID on BeforeShow is returning both rows VendorID. How can I
fix this ???

Here is GridView markup:
...

asp:TemplateField HeaderText="Vendor No" SortExpression="VendorID" ItemStyle-Width="140px">
                                    <ItemTemplate>
                                        <asp:Label ID="VendorNo" runat="server" Text='<%# Bind("VendorID") %>'></asp:Label>
                                        <div id="tooltip4" class="tooltip4">
                                            <div>
                                                <%# Eval("requesttype")%><br />
                                            </div>
                                        </div>
                                    </ItemTemplate>
                                    <ItemStyle Width="140px" />
                                </asp:TemplateField>
                                <asp:BoundField HeaderText="Request Date" DataField="RequestDate" SortExpression="RequestDate"
                                    ReadOnly="True" DataFormatString="{0:dd MMMM yyyy}" HtmlEncode="false" ItemStyle-Width="150px">
                                    <ItemStyle Width="150px" />
                                </asp:BoundField>
                                <asp:TemplateField HeaderText="Item Name" SortExpression="ItemName" ItemStyle-Width="150px">
                                    <ItemTemplate>
                                        <asp:Label ID="Label1" runat="server" Text='<%# Bind("ItemName") %>'></asp:Label>
                                        <asp:HiddenField ID="itemID" runat="server" Value='<%#Eval("ItemID") %>' />
                                    </ItemTemplate>
                                    <ItemStyle Width="135px" />
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Pack Amount" SortExpression="PackAmount" ItemStyle-Width="140px">
                                    <EditItemTemplate>
                                        <asp:DropDownList ID="DropDownList2" runat="server" DataSourceID="SqlDataSource3"
                                            DataTextField="PackAmount" DataValueField="PackageID" OnSelectedIndexChanged="DropDownList2_IndexChanged"
                                            AutoPostBack="true" CssClass="ddl">
                                        </asp:DropDownList>
                                        <asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:LPConnectionString %>"
                                            SelectCommand="Select [PackAmount],[PackageID] from [Packages] where [ItemID] = @ItemID order by PackAmount asc">
                                            <SelectParameters>
                                                <asp:Parameter Name="ItemID" Type="Int32" DefaultValue="1" />
                                            </SelectParameters>
                                        </asp:SqlDataSource>
                                    </EditItemTemplate>
                                    <ItemTemplate>
                                        <asp:Label ID="Label2" runat="server" Text='<%# Bind("PackAmount") %>'></asp:Label>
                                    </ItemTemplate>
                                    <ItemStyle Width="140px" />
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Quantity" SortExpression="Quantity" ItemStyle-Width="150px">
                                    <EditItemTemplate>
                                        <asp:TextBox ID="Quantity" runat="server" Text='<%# Bind("Quantity") %>' Columns="5"
                                            MaxLength="2" CssClass="calculate"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" Display="None"
                                            ControlToValidate="Quantity" ErrorMessage="You must enter Quantity" SetFocusOnError="True">
                                        </asp:RequiredFieldValidator>
                                        <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToValidate="Quantity"
                                            Operator="DataTypeCheck" Type="Integer" ErrorMessage="You must enter a number"
                                            Font-Bold="True" SetFocusOnError="True" Display="None"></asp:CompareValidator>
                                        <asp:RegularExpressionValidator ID="RegularExpressionValidator3" ControlToValidate="Quantity"
                                            ValidationExpression="^\d+(\,\d{1,4})?$" ErrorMessage="You must enter a positive number"
                                            EnableClientScript="true" runat="server" SetFocusOnError="True" Display="None" />
                                        <asp:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender1" TargetControlID="RequiredFieldValidator1"
                                            Width="200px" HighlightCssClass="highlight">
                                        </asp:ValidatorCalloutExtender>
                                        <asp:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender2" TargetControlID="CompareValidator1"
                                            Width="200px" HighlightCssClass="highlight">
                                        </asp:ValidatorCalloutExtender>
                                        <asp:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender3" TargetControlID="RegularExpressionValidator3"
                                            Width="200px" HighlightCssClass="highlight">
                                        </asp:ValidatorCalloutExtender>
                                    </EditItemTemplate>
                                    <ItemTemplate>
                                        <asp:Label ID="Label3" runat="server" Text='<%# Bind("Quantity") %>'></asp:Label>
                                    </ItemTemplate>
                                    <ItemStyle Width="150px" />
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Total" SortExpression="Total" ItemStyle-Width="150px">
                                    <EditItemTemplate>
                                        <asp:Label ID="Label5" runat="server" Text='<%# Eval("Total") %>' CssClass="lbl"></asp:Label>
                                    </EditItemTemplate>
                                    <ItemTemplate>
                                        <asp:Label ID="Label4" runat="server" Text='<%# Bind("Total") %>'></asp:Label>
                                    </ItemTemplate>
                                    <ItemStyle Width="150px" />
                                </asp:TemplateField>
                                <asp:BoundField HeaderText="Monthly Consumption" DataField="MonthlyConsumption" SortExpression="MonthlyConsumption"
                                    ReadOnly="True" ItemStyle-Width="150px">
                                    <ItemStyle Width="150px" />
                                </asp:BoundField>
                                <%--<asp:BoundField HeaderText="Last Delivery Date" DataField="DeliveryDate" SortExpression="DeliveryDate"                                     ReadOnly="True" DataFormatString="{0:dd MMMM yyyy}" HtmlEncode="false" ItemStyle-Width="150px">                                     <ItemStyle Width="150px" />                                 </asp:BoundField>--%>
                                <asp:TemplateField HeaderText="Last Delivery Date" SortExpression="DeliveryDate"
                                    ItemStyle-Width="150px">
                                    <ItemTemplate>
                                        <asp:Label ID="LastDeliveryDate" runat="server" Text='<%# Bind("DeliveryDate","{0:dd MMMM yyyy}") %>'
                                            CssClass="anchor1"></asp:Label>
                                        <div id="tooltip999">
                                        </div>
                                    </ItemTemplate>
                                    <ItemStyle Width="150px" />
                                </asp:TemplateField>

Keep your friends close and your enemies even closer

JQuery mouse over Question? RSS

21 replies

cenk1536

Re: JQuery mouse over Question?

asteranup

Re: JQuery mouse over Question?

cenk1536

Re: JQuery mouse over Question?

cenk1536

Re: JQuery mouse over Question?

asteranup

Re: JQuery mouse over Question?

cenk1536

Re: JQuery mouse over Question?

asteranup

Re: JQuery mouse over Question?

cenk1536

Re: JQuery mouse over Question?

cenk1536

Re: JQuery mouse over Question?

cenk1536

Re: JQuery mouse over Question?

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft