SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unable to display table using YUI

    I have very very limited knowledge about JS, YUI and PHP and I could
    really use a lot of help with the problem. that said, now the problem,
    I have the php script finally generating the table and echo'ing it.
    The table has fivecolumns and some rows. on the JS side this is what I
    have


    function MakeRequest(){

    var myColumnDefs = [
    {key:"count", label:"Count"},
    {key:"name", label:"name"},
    {key:"address", label:"address"},
    {key:"phone", label:"phone"},
    {key:"zip", label:"zip"}];


    var dsLocalTable = new
    YAHOO.util.LocalDataSource(YAHOO.util.Dom.get("add the name of the php page"));
    dsLocalTable.responseType =
    YAHOO.util.LocalDataSource.TYPE_HTMLTABLE;
    dsLocalTable.responseSchema = {
    fields: ["count", "name", "address", "phone","zip"]
    };
    var myDataTableDeferred = new YAHOO.widget.DataTable("myContainer",
    myColumnDefs, dsLocalTable);}

    </script>

    </head>
    <body class="yui-skin-sam">
    <input type='button'
    onclick='MakeRequest();'
    value='Display'/>
    <div id="myContainer">
    </div>
    </body>
    </html>



    when the press the button, i can see the table with header row and no
    content and it just says "loading". But in firebug I see the following
    error "elTable.tBodies is undefined" :" if(!data){var
    datapieces=[];for(var j=0,...eType==9){this.responseType=DS.TYPE_XML;"

    I really appreciate any help with this problem

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You were saying that php generates the table, and the problem is that tbodies isn't defined.

    Some web browsers (I'm looking at you Internet Explorer) consider that for scripting purposes that the TBODY tag must be defined.

    Code html4strict:
    <table>
      <thead>
        <tr>
          <th>...</th>
          <th>...</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>...</td>
        </tr>
        <tr>
          <td>...</td>
        </tr>
      </tbody>
    </table>

    If a table is on the page without a tbody section, it is automatically generated when the text file is loaded and interpreted. There are situations though where such interpretation doesn't occur. As such, creating tbody sections for tables is considered mandatory for compatible usage of tables.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thats exactly why I am banging my head. all the tags are present where they should be and I also did couple of changes, thought I still get the cursing error...

    So this is how I changed it, I get the HTMl table into a variable and
    use that as a LocalDataSource, but still I get the same error. If I
    actually do a "document.write( a1);", it actually prints out the entire
    table. so why is it that the YUI can't see the tbody tags (The error
    message is "elTable.tBodies is undefined").

    Another thing is that is surprising me, I have thead tag present
    before tbody int he table def, but the YUI error seems to be with
    missing tbody, does that mean it found thead and not tbody, event
    hough its right after thead.....

    function MakeRequest( ){

    var a1;
    var callback =
    {
    success: function(o) {
    a1=eval('o.response Text');
    }
    }
    var transaction =
    YAHOO.util.Connect. asyncRequest( 'GET',"test. php",callback, null);

    var myColumnDefs = [
    {key:"count" , label:"Count" },
    {key:"name", label:"name" },
    {key:"address" , label:"address" },
    {key:"phone" , label:"phone" },
    {key:"zip", label:"zip"} ];

    var dsFunction = new YAHOO.util.LocalDat aSource(' a1');
    dsFunction.response Type = YAHOO.util.LocalDat aSource.TYPE_ HTMLTABLE;

    dsFunction.response Schema = {
    fields: ["count", "name", "address", "phone","zip" ]};
    var myDataTableDeferred = new YAHOO.widget. DataTable( "myContainer" ,
    myColumnDefs, dsFunction);
    }</script>

    </head><body class="yui-skin- sam">
    <input type='button'
    onclick='MakeReques t();'
    value='Display' />
    <div id="myContainer" >
    </div></body> </html>

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Well if elTable.tBodies is undefined, that must mean that elTable doesn't refer to a table at all, and is null or undefined.

    It may pay to use firebug to debug the javascript, so that you can work out where the elTable variable becomes defined, and why it's not being properly assigned in the first place.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    If it helps, here is the code that Yahoo is using, from http://www.luckyscrewz.com/yui/docs/DataTable.js.html

    Code javascript:
        // Validate HTML Element
        elContainer = YAHOO.util.Dom.get(elContainer);
        if(elContainer && elContainer.tagName && (elContainer.tagName.toLowerCase() == "div")) {
            this._elContainer = elContainer;
            // Peek in container child nodes to see if TABLE already exists
            var elTable = null;
            if(elContainer.hasChildNodes()) {
                var children = elContainer.childNodes;
                for(i=0; i<children.length; i++) {
                    if(children[i].tagName && children[i].tagName.toLowerCase() == "table") {
                        elTable = children[i];
                        break;
                    }
                }
            }
     
            // Progressively enhance an existing table from markup...
            // while using the markup as the source of data
            if(elTable && !this.dataSource) {
                // Fill RecordSet with data parsed out of table
                var aRecords = [];
     
                // Iterate through each TBODY
                for(i=0; i<elTable.tBodies.length; i++) {
                    var elBody = elTable.tBodies[i];
     
                    // Iterate through each TR
                    for(var j=0; j<elBody.rows.length; j++) {
                        var elRow = elBody.rows[j];
                        var oRecord = {};
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Zealot
    Join Date
    Oct 2008
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    function Create_Table_Tr($Id='',$Css_Name='',$Bg_Color='',$Height='',$Event_List='',$Align='center',$Valign='middle')
    {
    $this->TableTr_Id[] = $Id;
    $this->TableTr_Align[] = $Align;
    $this->TableTr_Valign[] = $Valign;
    $this->TableTr_Style_ClassName[] = $Css_Name;
    $this->TableTr_Bg_Color[] = $Bg_Color;
    $this->TableTr_Height[] = $Height;
    $this->TableTr_Event_List[] = $Event_List;

    }//end Create_Table_Tr

    function Create_Table_Td($row,$Caption='',$Width='',$Height='',$Css_Name='',$Bg_Color='',$Event_List='',$Align='left',$Valign='middle',$ColSpan=1)
    {
    $this->TableTd_Caption[$row][] = $Caption;
    $this->TableTd_Align[$row][] = $Align;
    $this->TableTd_Valign[$row][] = $Valign;
    $this->TableTd_Width[$row][] = $Width;
    $this->TableTd_Height[$row][] = $Height;
    $this->TableTd_Style_ClassName[$row][] = $Css_Name;
    $this->TableTd_Bg_Color[$row][] = $Bg_Color;
    $this->TableTd_Event_List[$row][] = $Event_List;
    $this->TableTd_ColSpan[$row][] = $ColSpan;
    }//end Create_Table_Td

    hope useful for you

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    What does the table code end up looking like once it has come over from php to javascript?

    From php to javascript you can pass only text, whether that be JSON, XML or raw text of some nature.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •