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

Re: datatable, sortable, json - what's wrong?

Expand Messages
  • puff01824
    By way of help to the next YUI user ... The problem turned out to be not in the posted code (it works properly) but in the pages HTML, though it certainly
    Message 1 of 2 , Mar 3, 2009
    • 0 Attachment
      By way of help to the next YUI user ...

      The problem turned out to be not in the posted code (it works properly) but in the pages HTML, though it certainly wasn't obvious from the symptom!

      Here's the defective HTML:
      <div id="idListPanel" style="visibility:hidden" >
      <div class="hd">GeoWiki Page List</div>
      <div class="bd" style="overflow: auto">
      <table class="simple1" id="table1">
      <tr class="simple1"><td class="simple1">
      <b>Click on page to view.</b>
      </td></tr>
      <tr class="simple1"><td class="simple1">
      <div id='idTable'><!-- data table goes here --></div>
      </td></tr>
      </table>
      </div>
      </div>
      The outer <div> is a YUI panel.  I used a <table> to organize the panel's body including the datatable <div id='idTable'>.  It is clearly not needed in this case and when the code is cleaned up so it looks like this:
      <div id="idListPanel" style="visibility:hidden" >
      <div class="hd">GeoWiki Page List</div>
      <div class="bd" style="overflow: auto">
      <h3>Click on page to view.</h3>
      <div id='idTable'><!-- data table goes here --></div>
      </div>
      </div>
      The problem no longer occurs.

      If those who know YUI better than I think this a bug let me know and I'll put together a proper bug report.

      Regards,
      Puff



      --- In ydn-javascript@yahoogroups.com, "puff01824" <rbell01824@...> wrote:
      >
      > I'm having some difficulty with sortable datatable columns on a json
      > dataset. The symptom is that only the first column sorts. Moreover,
      > clicking the other columns highlights the 1st column and sorts on it.
      > Try as I might I don't see what I'm doing wrong and wondered if anyone
      > might offer a clue.
      >
      > Here's the code:
      > // Initialize the data table
      > GW.initPageTable = function(){
      > // Setup data source
      > GW.src = new YAHOO.util.XHRDataSource("/json/pages");
      > GW.src.responseType = YAHOO.util.DataSource.TYPE_JSON;
      > GW.src.connXhrMode = "queueRequests";
      > GW.src.responseSchema = { resultsList: "pages",
      > fields: ["wikiTitle",
      > "revision",
      > 'current',
      > 'locked',
      > 'title',
      > 'content', 'author', 'date',
      > 'tags',
      > 'bboxEast', 'bboxWest', 'bboxSouth', 'bboxNorth',
      > 'geohash'] };
      > // Setup data table
      > GW.col = [
      > {key: "wikiTitle", sortable:true, label: 'Wiki Title', resizeable:true
      > },
      > {key: "title", sortable:true, label: 'Title', resizeable:true,
      > minWidth:300 },
      > {key: "author", sortable:true, label: 'Author', resizeable:true,
      > minWidth:150 },
      > {key: "date", sortable:true, label: 'Date', resizeable:true,
      > minWidth:150 },
      > {key: "tags", sortable:true, label: 'Tags', resizeable:true,
      > minWidth:200 }
      > ];
      > GW.dt = new YAHOO.widget.DataTable( "idTable", GW.col, GW.src );
      > };
      > </script> Things will sort on wikiTitle but an attempt to sort on any of
      > the other columns highlights the wikiTitle column and sorts on it.
      >
      > The first bit of the json data set looks like this:
      >
      > "pages": [{"bboxWest": null, "tags": ["site", "tag2", "tag3", "tag4"],
      > "bboxEast": null, "bboxSouth": null, "wikiTitle": "Great_Loop:About",
      > "date": "2009-03-02 19:06", "content": "<div id=\"body\">\n<p><img
      > style=\"float: left; margin-left: 5px; margin-right: 5px;\"
      > src=\"../static/img/wikilogo.png\" alt=\"\" width=\"164\" height=\"149\"
      > /></p>\n<p>This site provides a source of useful information about
      > America's Great loop, broadly a water route around the eastern United
      > States and parts of Canada.</p>\n<p>Its purposes are several
      > fold:</p>\n<ul>\n<li>Organize available useful information in a single
      > place where people interested in the great loop can more easily find
      > it.</li>\n<li>Organize information about routes, anchorages, marinas,
      > etc. both geographically linked to Google maps and in tables so that it
      > is easy to use.</li>\n<li>Allow users to add/edit information to keep it
      > current.</li>\n</ul>\n<p>You do NOT have to register to read and access
      > most parts of this site.&nbsp; Ho
      > wever, if you wish to add or edit you will be asked to register and
      > log-in.&nbsp; This provides for some control of content.&nbsp; Your
      > registration information will NOT be shared with anyone under any
      > circumstances.</p>\n</div>", "locked": false, "author": "Admin",
      > "title": "North America's Great Loop", "bboxNorth": null, "current":
      > true, "geohash": null, "revision": 0}, {"bboxWest": null, "tags":
      > ["site"], "bboxEast": null, "bboxSouth": null, "wikiTitle":
      > "Great_Loop:Help", "date": "2009-03-02 19:06", "content":
      > "<p>Placeholder for site help.</p>", "locked": false, "author": "Admin",
      > "title": "Help", "bboxNorth": null, "current": true, "geohash": null,
      > "revision": 0}, {"bboxWest": null, "tags": ["site"], "bboxEast": null,
      > "bboxSouth": null, "wikiTitle": "Great_Loop:FAQ", "date": "2009-03-02
      > 19:06", "content": "<p>Placeholder for FAQ</p>", "locked": false,
      > "author": "Admin", "title": "Frequently Asked Questions", "bboxNorth":
      > null, "current": true, "geohash": null, "revision": 0}]}
      >
      > Thanks for any clues.
      >
      > Regards,
      > Puff
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.