views:

579

answers:

2

I'm trying to use the JQuery plugin called FixedTable in an ASP.Net WebForm to add a vertical scrollbar to an html table (see code below). I've added a reference to the JQuery document for Visual Studio (jquery-1.3.2-vsdoc2.js), and a reference to the fixedtable plugin (jquery.fixedtable.js) to my project. When I run it, I'm getting an error message from line 1614 of the jquery-1.3.2-vsdoc2.js file. I've copied the code from that file (where the error is occurring) below too. Can anyone tell me what is causing this problem, and if there is anything I can do to fix it?

Here is my project code:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="fixedtable.aspx.cs"    Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
<title></title>
<script type="text/javascript" src="js/jquery-1.3.2-vsdoc2.js"></script>
<script type="text/javascript" src="js/jquery.fixedtable.js"></script>
<script type="text/javascript">
    $(function() {
        $(".tableDiv").each(function() {
            var Id = $(this).get(0).id;
            var maintbheight = 555;
            var maintbwidth = 580;

            $("#" + Id + " .FixedTables").fixedTable({
                //width: maintbwidth,
                //height: maintbheight,
                //fixedColumns: 1,
                // header style
                classHeader: "fixedHead",
                // footer style        
                classFooter: "fixedFoot",
                // fixed column on the left        
                classColumn: "fixedColumn",
                // the width of fixed column on the left      
                //fixedColumnWidth: 150,
                // table's parent div's id           
                outerId: Id,
                // tds' in content area default background color                     
                Contentbackcolor: "#FFFFFF",
                // tds' in content area background color while hover.     
                Contenthovercolor: "#99CCFF",
                // tds' in fixed column default background color   
                fixedColumnbackcolor: "#187BAF",
                // tds' in fixed column background color while hover. 
                fixedColumnhovercolor: "#99CCFF"
            });
        });
    });
</script>
<style type="text/css">
    body
    {
        width: 900px;
    }
    p
    {
        float:left;
        width: 100%;
        margin: 20px 0px;
    }
    .fixedColumn .fixedTable td
    {
        color: #FFFFFF;
        background-color: #187BAF;
        font-size: 12px;
        font-weight: normal;
    }

    .fixedHead td, .fixedFoot td
    {
        color: #FFFFFF;
        background-color: #187BAF;
        font-size: 12px;
        font-weight: normal;
        padding: 5px;
        border: 1px solid #187BAF;
    }
    .fixedTable td
    {
        font-size: 8.5pt;
        background-color: #FFFFFF;
        padding: 5px;
        text-align: left;
        border: 1px solid #CEE7FF;
    }
    .tableDiv 
    {

    }
    .FixedTables
    {

    }
</style>


</head>
<body>
<form id="form1" runat="server">
<div id="tableDiv_Arrays" class="tableDiv">
    <table id="Open_Text_Arrays" class="FixedTables">
        <thead>
            <tr>
                <th>
                    Purpose
                </th>
                <th>
                    C#
                </th>
                <th>
                    Php4
                </th>
                <th>
                    Php5
                </th>
                <th>
                    ActionScript
                </th>
                <th>
                    JavaScript
                </th>
                <th>
                    Ruby
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    data1
                </td>
                <td>
                    data2
                </td>
                <td>
                    data3
                </td>
                <td>
                    data4
                </td>
                <td>
                    data5
                </td>
                <td>
                    data6
                </td>
                <td>
                    data7
                </td>
            </tr>
           <tr>
                <td>
                    data1
                </td>
                <td>
                    data2
                </td>
                <td>
                    data3
                </td>
                <td>
                    data4
                </td>
                <td>
                    data5
                </td>
                <td>
                    data6
                </td>
                <td>
                    data7
                </td>
            </tr>
        </tfoot>
    </table>
</div>
</form>
</body>
</html>

And below is the code from the jquery function in the jquery-1.3.2-vsdoc2.js file that is blowing up, the line where the error occurs is the next to the last line with this code: elem[ name ] = value; Also, the value object has NaNpx stored in it at the point where it blows up.

attr: function( elem, name, value ) {
 /// <summary>
 ///  This method is internal.
 /// </summary>
 /// <private />

 // don't set attributes on text and comment nodes
 if (!elem || elem.nodeType == 3 || elem.nodeType == 8)
  return undefined;

 var notxml = !jQuery.isXMLDoc( elem ),
  // Whether we are setting (or getting)
  set = value !== undefined;

 // Try to normalize/fix the name
 name = notxml && jQuery.props[ name ] || name;

 // Only do all the following if this is a node (faster for style)
 // IE elem.getAttribute passes even for style
 if ( elem.tagName ) {

  // These attributes require special treatment
  var special = /href|src|style/.test( name );

  // Safari mis-reports the default selected property of a hidden option
  // Accessing the parent's selectedIndex property fixes it
  if ( name == "selected" && elem.parentNode )
   elem.parentNode.selectedIndex;

  // If applicable, access the attribute via the DOM 0 way
  if ( name in elem && notxml && !special ) {
   if ( set ){
    // We can't allow the type property to be changed (since it causes problems in IE)
    if ( name == "type" && jQuery.nodeName( elem, "input" ) && elem.parentNode )
     throw "type property can't be changed";

    elem[ name ] = value;
   }

   // browsers index elements by id/name on forms, give priority to attributes.
   if( jQuery.nodeName( elem, "form" ) && elem.getAttributeNode(name) )
    return elem.getAttributeNode( name ).nodeValue;

   // elem.tabIndex doesn't always return the correct value when it hasn't been explicitly set
   // http://fluidproject.org/blog/2008/01/09/getting-setting-and-removing-tabindex-values-with-javascript/
   if ( name == "tabIndex" ) {
    var attributeNode = elem.getAttributeNode( "tabIndex" );
    return attributeNode && attributeNode.specified
     ? attributeNode.value
     : elem.nodeName.match(/(button|input|object|select|textarea)/i)
      ? 0
      : elem.nodeName.match(/^(a|area)$/i) && elem.href
       ? 0
       : undefined;
   }

   return elem[ name ];
  }

  if ( !jQuery.support.style && notxml &&  name == "style" )
   return jQuery.attr( elem.style, "cssText", value );

  if ( set )
   // convert the value to a string (all browsers do this but IE) see #1070
   elem.setAttribute( name, "" + value );

  var attr = !jQuery.support.hrefNormalized && notxml && special
    // Some attributes require a special call on IE
    ? elem.getAttribute( name, 2 )
    : elem.getAttribute( name );

  // Non-existent attributes return null, we normalize to undefined
  return attr === null ? undefined : attr;
 }

 // elem is actually elem.style ... set the style

 // IE uses filters for opacity
 if ( !jQuery.support.opacity && name == "opacity" ) {
  if ( set ) {
   // IE has trouble with opacity if it does not have layout
   // Force it by setting the zoom level
   elem.zoom = 1;

   // Set the alpha filter to set the opacity
   elem.filter = (elem.filter || "").replace( /alpha\([^)]*\)/, "" ) +
    (parseInt( value ) + '' == "NaN" ? "" : "alpha(opacity=" + value * 100 + ")");
  }

  return elem.filter && elem.filter.indexOf("opacity=") >= 0 ?
   (parseFloat( elem.filter.match(/opacity=([^)]*)/)[1] ) / 100) + '':
   "";
 }

 name = name.replace(/-([a-z])/ig, function(all, letter){
  return letter.toUpperCase();
 });

 if ( set )
  elem[ name ] = value;

 return elem[ name ];
},
A: 

Can you solve the issue?... I 'm developing a composite control (dynamic table) and I have to parse it using this plugin but when I run the app, I have a similar error. Any sugestion?... regards!

Fernando
A: 

Finally gave up on the FixedTable plugin and used CSS instead.

Russ Clark