unable to highlight table rows RSS

• • Reply
  

  acheo

  Member

  81 Points

  67 Posts

  unable to highlight table rows

  Feb 24, 2012 02:39 AM|LINK

  Hi,

   

  I'm creating table rows and columns dynamically and there is no problem. However, when I try to highlight them, the jquery fucntion does not work. I pasted the .hover function from a demo that works perfectly. Any idea how I could get around this?

   

  thanks!

   

  <%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="Default2" %>
  
  <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
  
  <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
  
  <script type="text/javascript">
      $(document).ready(function ()
      {
          $("#search").click(function ()
          {
              var empId = $("#criteres").val();
              $.ajax(
              {
                  type: "POST",
                  dataType: "json",
                  contentType: "application/json",
                  url: "index.aspx/getCompanies",
                  data: "{'ville': '" + empId + "'}",
                  success: function (data)
                  {
                      Success(data);
                  },
                  error: function ()
                  {
                      alert("Error calling the web service.");
                  }
              });
          });
  
          $("tr").not(':first').hover(
            function () {
                $(this).css("background", "yellow");
            },
            function () {
                $(this).css("background", "");
            }
          );
      });
  
  function Success(data)
  {
         var r = new Array(), j = -1;
         for (var key = 0, size = data.d.length; key < size; key++)
         {
               r[++j] ='<tr><td>';
               r[++j] = data.d[key].nomEntreprise;
               r[++j] = '</td></tr><tr><td>';
               r[++j] = data.d[key].nom + '&nbsp' + data.d[key].prenom;
               r[++j] = '</td></tr><tr><td>';
               r[++j] = data.d[key].adresse + ',&nbsp' + data.d[key].ville + ',&nbsp' + data.d[key].codePostal;
               r[++j] = '</td></tr><tr><td>';
               r[++j] = data.d[key].telephone;
               r[++j] = '</td></tr><tr><td>';
               r[++j] = data.d[key].fax;
               r[++j] = '</td></tr><tr><td>';
               r[++j] = data.d[key].siteWeb;
               r[++j] = '</td></tr><tr><td>';
               r[++j] = '&nbsp';
               r[++j] = '</td></tr>';
          }
      $('#dataTable').html(r.join(''));
  }
      
  
  </script>
  
  </asp:Content>
  <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
  
        
      <input id="criteres" type="text" />
      <input id="search" type="button" value="button"/>
      <div class=".table">
          <table style="width: 100%;" id="dataTable">
          </table>
      </div>
     
  </asp:Content>

• • Reply
  

  Vipindas

  Contributor

  5514 Points

  810 Posts

  Re: unable to highlight table rows

  Feb 24, 2012 04:26 AM|LINK

  This will help you

  http://weblogs.asp.net/hajan/archive/2011/02/11/using-jquery-live-instead-of-jquery-hover-function.aspx

  http://webdevel.blogspot.in/2006/10/jquery-tip-highlight-row-on-hover.html

  Please remember to mark as answer if it helps you
  • Marked as answer by acheo on Feb 24, 2012 03:31 PM
• • Reply
  

  asteranup

  All-Star

  30184 Points

  4906 Posts

  Re: unable to highlight table rows

  Feb 24, 2012 05:44 AM|LINK

  Hi,

  acheo

  $("tr").not(':first').hover(
            function () {
                $(this).css("background", "yellow");
            },
            function () {
                $(this).css("background", "");
            }
          );
  

  Change this code-

  $("tr").not(':first').live({
              mouseenter:
             function () {
                 $(this).css("background", "yellow");
             },
              mouseleave:
             function () {
                 $(this).css("background", "");
             }
          });

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

  acheo

  Member

  81 Points

  67 Posts

  Re: unable to highlight table rows

  Feb 24, 2012 02:13 PM|LINK

  asteranup,

   

  With your code I get this error: Microsoft JScript runtime error: Object doesn't support property or method 'split'.

   

  See bold line where it break in jquery-1.4.1.js:

   

  jQuery.each(["live", "die"], function( i, name ) {
  	jQuery.fn[ name ] = function( types, data, fn ) {
  		var type, i = 0;
  
  		if ( jQuery.isFunction( data ) ) {
  			fn = data;
  			data = undefined;
  		}
  
  		types = (types || "").split( /\s+/ );  while ( (type = types[ i++ ]) != null ) {
  			type = type === "focus" ? "focusin" : // focus --> focusin
  					type === "blur" ? "focusout" : // blur --> focusout
  					type === "hover" ? types.push("mouseleave") && "mouseenter" : // hover support
  					type;

   

• • Reply
  

  asteranup

  All-Star

  30184 Points

  4906 Posts

  Re: unable to highlight table rows

  Feb 24, 2012 02:36 PM|LINK

  Hi,

  Can you check your code by upgrading the jquery file to 1.7 version.

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

  acheo

  Member

  81 Points

  67 Posts

  Re: unable to highlight table rows

  Feb 24, 2012 02:51 PM|LINK

  I linked to Google 1.7.1.

   

  It no longer produce error but tr's don't get highlighted.

• • Reply
  

  bruce (sqlwo...

  All-Star

  36882 Points

  5451 Posts

  Re: unable to highlight table rows

  Feb 24, 2012 03:02 PM|LINK

  as you are replacing the dom elements in the ajax calls response, the hover events are no longer attached. you need to setup the hover events after the .html() call.

  bruce (sqlwork.com)
  • Edited by bruce (sqlwork.com) on Feb 24, 2012 03:15 PM
• • Reply
  

  acheo

  Member

  81 Points

  67 Posts

  Re: unable to highlight table rows

  Feb 24, 2012 03:08 PM|LINK

  I'm new with JQuery so not following you 100%.  Could you please correct the code below to make this work.

  I found many many example on the Web but curiously, none of them work when I paste the code within mine.

   

  Thanks.

  <%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="Default2" %>
  
  <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
  
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  
  <script type="text/javascript">
      $(document).ready(function ()
      {
          $("#search").click(function ()
          {
              var empId = $("#criteres").val();
              $.ajax(
              {
                  type: "POST",
                  dataType: "json",
                  contentType: "application/json",
                  url: "index.aspx/getCompanies",
                  data: "{'ville': '" + empId + "'}",
                  success: function (data)
                  {
                      Success(data);
                  },
                  error: function ()
                  {
                      alert("Error calling the web service.");
                  }
              });
          });
  
          $("#tr").not(':first').hover(
          function () {
              $(this).css("background", "red");
          },
          function () {
              $(this).css("background", "");
          }
      );
  
  
  
  
      });
  
  function Success(data)
  {
         var r = new Array(), j = -1;
         for (var key = 0, size = data.d.length; key < size; key++)
         {
               r[++j] ='<tr><td>';
               r[++j] = data.d[key].nomEntreprise + '</br>' + data.d[key].nom + '&nbsp' + data.d[key].prenom
               + '</br>' + data.d[key].adresse + ',&nbsp' + data.d[key].ville + ',&nbsp' + data.d[key].codePostal
               + '</br>' + data.d[key].telephone + '</br>' + data.d[key].fax + '</br>' + data.d[key].siteWeb;
               r[++j] = '</td></tr><tr><td>';
               r[++j] = '&nbsp';
               r[++j] = '</td></tr>';
  
  
  //             r[++j] = '</td></tr><tr><td>';
  //             r[++j] = data.d[key].nom + '&nbsp' + data.d[key].prenom;
  //             r[++j] = '</td></tr><tr><td>';
  //             r[++j] = data.d[key].adresse + ',&nbsp' + data.d[key].ville + ',&nbsp' + data.d[key].codePostal;
  //             r[++j] = '</td></tr><tr><td>';
  //             r[++j] = data.d[key].telephone;
  //             r[++j] = '</td></tr><tr><td>';
  //             r[++j] = data.d[key].fax;
  //             r[++j] = '</td></tr><tr><td>';
  //             r[++j] = data.d[key].siteWeb;
  //             r[++j] = '</td></tr><tr><td>';
  //             r[++j] = '&nbsp';
  //             r[++j] = '</td></tr>';
          }
      $('#dataTable').html(r.join(''));
  }
      
  
  </script>
  
  </asp:Content>
  <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
  
        
      <input id="criteres" type="text" />
      <input id="search" type="button" value="button"/>
      <div class=".table" id="tableResult" >
          <table style="width: 100%;" id="dataTable">
          </table>
      </div>
  
  
     
  </asp:Content>

• • Reply
  

  acheo

  Member

  81 Points

  67 Posts

  Re: unable to highlight table rows

  Feb 24, 2012 03:30 PM|LINK

  I used the code suggested above by Vipindas : http://weblogs.asp.net/hajan/archive/2011/02/11/using-jquery-live-instead-of-jquery-hover-function.aspx and it works.

   

  thanks!

  • Edited by acheo on Feb 24, 2012 03:30 PM
  • Marked as answer by acheo on Feb 24, 2012 03:31 PM