Loading ...
Sorry, an error occurred while loading the content.

Problem in Yahoo UI Datatable beta .

Expand Messages
  • Jayaprakash
    Hi all, I am having some difficulty with the YUI data table. I am able to produce under normal circumstances like using JSON data, JavaScript array, etc. What
    Message 1 of 3 , May 1, 2007
    • 0 Attachment
      Hi all,

      I am having some difficulty with the YUI data table. I am able to
      produce under normal circumstances like using JSON data, JavaScript
      array, etc.

      What I am trying to achieve here is I have an XML file from my data
      resides. I access the XML file using JavaScript and retrieves the data
      and create a table that contains the XML data inside a div block that
      has a unique ID to identify it. Everything works correctly upto this
      point I mean I've displayed the table inside the <body> of the document.

      Now I am trying to make the above mentioned table into a data table and
      at that point the problem starts it shows two errors one in yahoo.js
      file and the other in datatable-beta.js file.

      I don't know why it happens and not sure whether this is a problem of
      my code. I've furnished my code below for your consideration.

      The code below mentioned will WORK ONLY ON IE not in FIREFOX
      ======================================================================

      xml-datatable.htm
      ----------------------------------------------------------------------
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
      4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html;
      charset=iso-8859-1" />
      <title>XML Data Table - Demo</title>
      <link rel="stylesheet" href="bugsreport.css" />
      <script type="text/javascript" src="xml.js"></script>

      <script type="text/javascript"
      src="../../build/yahoo/yahoo.js"></script>
      <script type="text/javascript"
      src="../../build/datasource/datasource-beta-debug.js"></script>
      <script type="text/javascript"
      src="../../build/datatable/datatable-beta-debug.js"></script>
      <script type="text/javascript"
      src="../../build/dom/dom.js"></script>
      <script type="text/javascript"
      src="../../build/event/event.js"></script>

      <script type="text/javascript">
      var oXmlDom = createDocument();
      oXmlDom.async = true;

      oXmlDom.onreadystatechange = function () {
      if(oXmlDom.readyState == 4) {
      }
      }

      //oXmlDom.load
      ("http://www.blog2blog.net/users/fausto/datatable/bugsreport.xml");
      oXmlDom.load("blog.xml");
      //alert(oXmlDom.firstChild);
      var oRoot = oXmlDom.documentElement;


      //alert(oRoot);

      var rowSize = oRoot.childNodes.length;
      var colSize = oRoot.childNodes[0].childNodes.length;

      var resultArray = new Array(rowSize);
      var i,j,k;

      for(i=0; i < rowSize; i++) {
      resultArray[i] = new Array(colSize);
      }

      for(i=0; i < oRoot.childNodes.length; i++) {
      var row = oRoot.childNodes[i];
      for(j = 0; j < row.childNodes.length; j++) {
      var inner = row.childNodes[j];
      for(k=0; k < inner.childNodes.length;
      k++) {
      var innerData = inner.childNodes
      [k].text;
      resultArray[i][j] =
      inner.childNodes[k].text;
      }
      }
      }

      var tableHeader = "<div id=\"table_123\"><table
      class=\"t1\"><thead><tr class=\"r1\"><th class=\"h1\">ID</th><th
      class=\"h2\">Summary</th><th class=\"h3\">Opened</th><th class=\"h4
      \">Closed</th><th class=\"h5\">Status</th><th class=\"h6
      \">Priority</th><th class=\"h7\">Assigned To</th><th class=\"h8
      \">Submitted By</th></tr></thead>";
      //alert(tableHeader);

      var tbodyStart = "<tbody>";
      var rowStart = "<tr class=\"r2\">";

      var tBody = tbodyStart + rowStart;

      for(i=0; i < rowSize;i++) {
      for(j=0; j< colSize; j++) {
      var className = "c" + (j+1);
      var tdValue = "<td
      class=\""+className+"\">"+resultArray[i][j]+"</td>";
      tBody = tBody + tdValue;
      }
      if(i == (rowSize-1)) {
      tBody = tBody
      + "</tr></tbody></table></div>";
      }
      else {
      tBody = tBody + "</tr><tr class=\"r2
      \">";
      }
      }

      var tableFull = tableHeader + tBody;

      function createDataTable() {
      var columnHeaders = [
      {key:"id_no",text:"ID",sortable:true},

      {key:"summary",text:"Summary",sortable:true},

      {key:"Open",text:"Opened",sortable:true},

      {key:"close",text:"Closed",sortable:true},

      {key:"status",text:"Status",sortable:true},
      {key:"priority",text:"Priority",sortable:true},
      {key:"assign",text:"Assigned To",sortable:true},
      {key:"submit",text:"Submitted By",sortable:true}
      ];

      var columnSet = new YAHOO.widget.ColumnSet
      (columnHeaders);

      var markup = YAHOO.util.Dom.get("table_123");

      var dataTable = new YAHOO.widget.DataTable
      (markup,columnSet,null);

      applyDataTableHeaderStyle(dataTable);

      applyDataTableBodyStyle(dataTable);

      return;
      }

      //Function that applies the CSS styles on the data table header field
      function applyDataTableHeaderStyle(dt) {
      dt.getTable().className = "t1";
      dt.getHead().childNodes[0].className = "r1";

      var headerCells = dt.getHead().childNodes[0];
      var cellCount = headerCells.childNodes.length;
      for(var i=0; i <cellCount;i++) {
      headerCells.childNodes[i].className = "h"+(i+1);
      }
      return;
      }

      //Function that applies the CSS styles on the tbody section
      function applyDataTableBodyStyle(dt) {
      var rowCounter = dt.getBody().childNodes.length;
      for(var i=0; i < rowCounter;i++) {
      var row = dt.getBody().childNodes[i];
      row.className = "r2";
      var cellCounter = row.childNodes.length;
      for(var j=0; j < cellCounter; j++) {
      var td = row.childNodes[j];
      td.className = "c" + (j+1);
      }
      }
      return;
      }
      </script>
      </head>
      <body>
      <div id="content"></div>

      <script type="text/javascript">
      document.getElementById('content').innerHTML = tableFull;
      createDataTable();
      </script>
      </body>
      </html>
      ----------------------------------------------------------------------
      blog.xml
      ----------------------------------------------------------------------
      <?xml version="1.0" encoding="UTF-8"?>
      <viewentries toplevelentries="2">
      <viewentry position="1" unid="6FA663861160ACA6C12572C90041627A"
      noteid="568E" siblings="2">
      <entrydata columnnumber="0" name="id">
      <text>000003 </text>
      </entrydata>
      <entrydata columnnumber="1" name="summary">
      <text>Wiki tag "<" nowiki ">" to avoid parsing of
      wiki.class seems is not working. </text>
      </entrydata>
      <entrydata columnnumber="2" name="opened">
      <text>02/11/06 </text>
      </entrydata>
      <entrydata columnnumber="3" name="closed">
      <text>02/02/07 </text>
      </entrydata>
      <entrydata columnnumber="4" name="STATUS">
      <text>Fixed </text>
      </entrydata>
      <entrydata columnnumber="5" name="priority">
      <text>Normal </text>
      </entrydata>
      <entrydata columnnumber="6" name="assignedto">
      <text>Maarga </text>
      </entrydata>

      <entrydata columnnumber="7" name="submittedby">
      <text>Denis </text>
      </entrydata>
      </viewentry>

      <viewentry position="2" unid="3574E68D12A9EE3AC12572C900420C2E"
      noteid="5692" siblings="2">
      <entrydata columnnumber="0" name="id">
      <text>000007</text>
      </entrydata>
      <entrydata columnnumber="1" name="summary">
      <text>The word ...collapse... do not disappers when the
      text area is less then limit of collapse area </text>
      </entrydata>
      <entrydata columnnumber="2" name="opened">
      <text>05/11/06 </text>
      </entrydata>
      <entrydata columnnumber="3" name="closed">
      <text>09/11/06 </text>
      </entrydata>
      <entrydata columnnumber="4" name="STATUS">
      <text>Fixed </text>
      </entrydata>
      <entrydata columnnumber="5" name="priority">
      <text>Low </text>
      </entrydata>
      <entrydata columnnumber="6" name="assignedto">
      <text>Denis </text>
      </entrydata>
      <entrydata columnnumber="7" name="submittedby">
      <text>Denis </text>
      </entrydata>
      </viewentry>
      </viewentries>
      ----------------------------------------------------------------------
      xml.js
      ----------------------------------------------------------------------
      function createDocument() {
      var aVersions = [
      "MSXML2.DOMDocument.5.0",
      "MSXML2.DOMDocument.4.0",
      "MSXML2.DOMDocument.3.0",
      "MSXML2.DOMDocument",
      "Microsoft.XmlDom"
      ];

      for(var i=0; i < aVersions.length; i++) {
      try {
      var oXmlDom = new ActiveXObject(aVersions[i]);
      return oXmlDom;
      }
      catch (oError) {

      }
      }
      throw new Error("MSXML is not installed");
      }
      ----------------------------------------------------------------------
      bugsreport.css
      ----------------------------------------------------------------------
      /* CSS Document */

      TABLE.t1 {
      width:750px; border: 1px solid black; border-collapse:
      collapse; table-layout:fixed;
      }

      TR.r1 {
      height:31px; font-size:11px; font-family:Verdana, Arial,
      Helvetica, sans-serif
      }

      TR.r2 {
      font-size:11px; font-family:Verdana, Arial, Helvetica, sans-
      serif;text-align:center
      }

      TD.c1 {
      border: 1px solid black;
      }
      TD.c2 {
      border: 1px solid black; text-align: justify;
      }
      TD.c3 {
      border: 1px solid black;
      }
      TD.c4 {
      border: 1px solid black;
      }
      TD.c5 {
      border: 1px solid black;
      }
      TD.c6 {
      border: 1px solid black;
      }
      TD.c7 {
      border: 1px solid black;
      }
      TD.c8 {
      border: 1px solid black;
      }

      TH.h1 {
      width:61px; overflow:hidden; border: 1px solid black;
      background: rgb(135, 206, 250);
      }
      TH.h2 {
      width:271px; overflow:hidden;border: 1px solid black;
      background: rgb(135, 206, 250);
      }
      TH.h3 {
      width:55px; overflow:hidden; border: 1px solid black;
      background: rgb(135, 206, 250);
      }
      TH.h4 {
      width:55px; overflow:hidden; border: 1px solid black;
      background: rgb(135, 206, 250);
      }
      TH.h5 {
      width:51px; overflow:hidden; border: 1px solid black;
      background: rgb(135, 206, 250);
      }
      TH.h6 {
      width:76px; overflow:hidden; border: 1px solid black;
      background: rgb(135, 206, 250);
      }
      TH.h7 {
      width:84px; overflow:hidden; border: 1px solid black;
      background: rgb(135, 206, 250);
      }
      TH.h8 {
      width:90px; overflow:hidden; border: 1px solid black;
      background: rgb(135, 206, 250);
      }

      /*SS rules entered by JP*/
      TR.r1 a{
      font-size:11px; font-family:Verdana, Arial, Helvetica, sans-
      serif;text-decoration:none;color:#000;font-weight:bold;
      }
      TR.r1 a:link{
      font-size:11px; font-family:Verdana, Arial, Helvetica, sans-
      serif;text-decoration:none;color:#000;font-weight:bold;
      }
      TR.r1 a:hover{
      font-size:11px; font-family:Verdana, Arial, Helvetica, sans-
      serif;color:#ff0000;text-decoration:none;
      }
      ----------------------------------------------------------------------

      I would be very greatful if you guide me in this case to solve the
      issue.

      Regards

      Jayaprakash
    • tssha
      ... Try re-ordering the script sequence:
      Message 2 of 3 , May 1, 2007
      • 0 Attachment
        --- In ydn-javascript@yahoogroups.com, "Jayaprakash" <jpvalappil@...>
        wrote:
        >
        > Hi all,
        >
        > I am having some difficulty with the YUI data table. I am able to
        > produce under normal circumstances like using JSON data, JavaScript
        > array, etc.
        >
        > What I am trying to achieve here is I have an XML file from my data
        > resides. I access the XML file using JavaScript and retrieves the data
        > and create a table that contains the XML data inside a div block that
        > has a unique ID to identify it. Everything works correctly upto this
        > point I mean I've displayed the table inside the <body> of the document.
        >
        > Now I am trying to make the above mentioned table into a data table and
        > at that point the problem starts it shows two errors one in yahoo.js
        > file and the other in datatable-beta.js file.
        > <script type="text/javascript"
        > src="../../build/yahoo/yahoo.js"></script>
        > <script type="text/javascript"
        > src="../../build/datasource/datasource-beta-debug.js"></script>
        > <script type="text/javascript"
        > src="../../build/datatable/datatable-beta-debug.js"></script>
        > <script type="text/javascript"
        > src="../../build/dom/dom.js"></script>
        > <script type="text/javascript"
        > src="../../build/event/event.js"></script>

        Try re-ordering the script sequence:

        <script type="text/javascript"
        src="../../build/yahoo/yahoo.js"></script>
        <script type="text/javascript"
        src="../../build/dom/dom.js"></script>
        <script type="text/javascript"
        src="../../build/event/event.js"></script>
        <script type="text/javascript"
        src="../../build/datasource/datasource-beta-debug.js"></script>
        <script type="text/javascript"
        src="../../build/datatable/datatable-beta-debug.js"></script>

        If you have a look at the "getting started" section at
        http://developer.yahoo.com/yui/datatable/, you'll notice DOM and Event
        both precede DataSource and DataTable.

        Regards.
        Thomas
      • Jayaprakash
        Hi Thomas, Thanks a lot for showing my error. It is working perfectly now. Thanks a lot man for the prompt help Regards Jayaprakash ... JavaScript ... data ...
        Message 3 of 3 , May 1, 2007
        • 0 Attachment
          Hi Thomas,

          Thanks a lot for showing my error. It is working perfectly now.

          Thanks a lot man for the prompt help

          Regards

          Jayaprakash

          --- In ydn-javascript@yahoogroups.com, "tssha" <tsha@...> wrote:
          >
          > --- In ydn-javascript@yahoogroups.com, "Jayaprakash" <jpvalappil@>
          > wrote:
          > >
          > > Hi all,
          > >
          > > I am having some difficulty with the YUI data table. I am able to
          > > produce under normal circumstances like using JSON data,
          JavaScript
          > > array, etc.
          > >
          > > What I am trying to achieve here is I have an XML file from my
          data
          > > resides. I access the XML file using JavaScript and retrieves the
          data
          > > and create a table that contains the XML data inside a div block
          that
          > > has a unique ID to identify it. Everything works correctly upto
          this
          > > point I mean I've displayed the table inside the <body> of the
          document.
          > >
          > > Now I am trying to make the above mentioned table into a data
          table and
          > > at that point the problem starts it shows two errors one in
          yahoo.js
          > > file and the other in datatable-beta.js file.
          > > <script type="text/javascript"
          > > src="../../build/yahoo/yahoo.js"></script>
          > > <script type="text/javascript"
          > > src="../../build/datasource/datasource-beta-debug.js"></script>
          > > <script type="text/javascript"
          > > src="../../build/datatable/datatable-beta-debug.js"></script>
          > > <script type="text/javascript"
          > > src="../../build/dom/dom.js"></script>
          > > <script type="text/javascript"
          > > src="../../build/event/event.js"></script>
          >
          > Try re-ordering the script sequence:
          >
          > <script type="text/javascript"
          > src="../../build/yahoo/yahoo.js"></script>
          > <script type="text/javascript"
          > src="../../build/dom/dom.js"></script>
          > <script type="text/javascript"
          > src="../../build/event/event.js"></script>
          > <script type="text/javascript"
          > src="../../build/datasource/datasource-beta-debug.js"></script>
          > <script type="text/javascript"
          > src="../../build/datatable/datatable-beta-debug.js"></script>
          >
          > If you have a look at the "getting started" section at
          > http://developer.yahoo.com/yui/datatable/, you'll notice DOM and
          Event
          > both precede DataSource and DataTable.
          >
          > Regards.
          > Thomas
          >
        Your message has been successfully submitted and would be delivered to recipients shortly.