JQuery mouse over Question? RSS

• • Reply
  

  cenk1536

  Contributor

  2503 Points

  2118 Posts

  JQuery mouse over Question?

  Sep 26, 2011 01:14 PM|LINK

  Hi,

  I have a GridView and when I mouseover on a specific column (lets say column Last Delivery Date),the JQuery below runs and Tooltip appears with the result returns.The problem is,It does NOT work for the other rows.When I try to mouse over Last Delivery Date on another row it does NOT work.

  How can I fix this?

  Best regards.

   $(document).ready(function () {
              $("table[id*=GridView1] span[id*=LastDeliveryDate]").mouseover(function () {
                  //debugger
                  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);
                      }
                  });
              });
   
          });

  Keep your friends close and your enemies even closer
• • Reply
  

  gt1329a

  All-Star

  15377 Points

  2501 Posts

  ASPInsiders

  MVP

  Re: JQuery mouse over Question?

  Sep 26, 2011 06:09 PM|LINK

  You might be better off using a plugin in this case, rather than re-solving all the issues that come with displaying tooltips. qTip is a good one that has AJAX loading functionality built-in: http://craigsworks.com/projects/qtip2/

  Encosia - ASP.NET, jQuery, AJAX, and more.
  
  A guide to combining jQuery and ASP.NET: jQuery for the ASP.NET developer
  • Edited by gt1329a on Sep 26, 2011 06:10 PM
• • Reply
  

  cenk1536

  Contributor

  2503 Points

  2118 Posts

  Re: JQuery mouse over Question?

  Sep 26, 2011 06:29 PM|LINK

  Hi,

  Thanks for your reply.I think its NOT about tooltip.Actually,tooltip pops up without any result when I try to mouse over another row.(Eventhough there is data returning back from the query.)

  Keep your friends close and your enemies even closer
• • Reply
  

  vijay_myl

  Contributor

  5070 Points

  1068 Posts

  Re: JQuery mouse over Question?

  Sep 27, 2011 05:16 AM|LINK

  hi..try this below link....In this i use image on mouse over istead of image u can use delivery date....

  http://vbdotnetaddict.blogspot.com/2011/07/how-to-show-large-image-on-mouseover.html

  If the post is useful don't forget to MARK as Answer
  My .NET blog
  Submit Article
  
• • Reply
  

  asteranup

  All-Star

  30184 Points

  4906 Posts

  Re: JQuery mouse over Question?

  Sep 27, 2011 06:20 AM|LINK

  Hi,

  Which tooltip you are using. I can not see your tooltip code. You can check the following posts-

  http://forums.asp.net/p/1722397/4610340.aspx/1?Re+onmouse+over+zoom+images+in+datalist
  
  http://forums.asp.net/p/1702186/4524629.aspx/1?Re+tooltip+error+in+gridview
  
  http://forums.asp.net/p/1698953/4502949.aspx/1?Re+ToolTip+on+GridView+Question+
  
  http://forums.asp.net/p/1686488/4444245.aspx/1?Re+error+Tooltip+using+jquery
  
  http://forums.asp.net/t/1670538.aspx/1?Pop+up+of+Global+and+standard+Items#4373757
  
  http://forums.asp.net/t/1670191.aspx/1?JQuery+tools+tooltip#4373454

  You can following the above posts and call the ajax from inside the bodyHandler.

  Thanks & Regards
  Anup Das Gupta
  Mark as Answer if you feel so. Visit My Blog
  • Edited by asteranup on Sep 27, 2011 06:20 AM
• • Reply
  

  cenk1536

  Contributor

  2503 Points

  2118 Posts

  Re: JQuery mouse over Question?

  Sep 27, 2011 06:28 AM|LINK

  Hi asteranup,

  Here my tooltip

   $(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());
                  }
   
              });
          });
  
  Here is markup:

   <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" class="tooltip999">
                                          </div>
                                      </ItemTemplate>
                                      <ItemStyle Width="150px" />
                                  </asp:TemplateField>

  Keep your friends close and your enemies even closer
• • Reply
  

  cenk1536

  Contributor

  2503 Points

  2118 Posts

  Re: JQuery mouse over Question?

  Sep 27, 2011 06:38 AM|LINK

  I changed the Jquery as follows but still there is a problem.Eventhough the result which returns from the web method is true,tooltip pops up empty on a row but it works OK on another row.I dont get it.

  $(document).ready(function () {
              $("table[id*=GridView1] span[id*=LastDeliveryDate]").mouseover(function () {
                  //debugger
                  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

  2118 Posts

  Re: JQuery mouse over Question?

  Sep 27, 2011 07:07 AM|LINK

  Hi,

  I added the lines below to the JQuery and it sort of works.I mean the tooltip pops up inside the row. How can I fix this?

  $("#tooltip999").empty();
  $("#tooltip999").show();

  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 07:24 AM|LINK

  Hi,

  You can try this-

  $(document).ready(function() {
              $("table[id*=GridView1] span[id*=LastDeliveryDate]").mouseover(function() {
                  //debugger
                  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) {
                          $(this).next(".tooltip999").html(msg.d);
                      }
                  });
              });
              $("table[id*=GridView1] span[id*=LastDeliveryDate]").mouseout(function() {
                  $(this).next(".tooltip999").html("");
              });
          });

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

  asteranup

  All-Star

  30184 Points

  4906 Posts

  Re: JQuery mouse over Question?

  Sep 27, 2011 07:27 AM|LINK

  Hi,

  You can also try this-

  $(document).ready(function() {
              $("table[id*=GridView1] span[id*=LastDeliveryDate]").tooltip({
                  delay: 0,
                  offset: [-65, -110],
                  position: 'center top',
                  bodyHandler: function() {
                      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) {
                              return $(this).next(".tooltip999").html(msg.d);
                          }
                      });
                  }
              });
          });

  In this case remove mouse over and mouse out event.

  Thanks & Regards
  Anup Das Gupta
  Mark as Answer if you feel so. Visit My Blog
  • Edited by asteranup on Sep 27, 2011 07:27 AM