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

Re: [ydn-javascript] 2 DataTables for a single JSON response

Expand Messages
  • Satyam
    Reading the JSON data with asyncRequest is the way to go. Then you use the YUI JSON utility to parse it. Now, look at the basic example:
    Message 1 of 3 , Jul 2, 2009
    • 0 Attachment
      Reading the JSON data with asyncRequest is the way to go. Then you use
      the YUI JSON utility to parse it. Now, look at the basic example:

      http://developer.yahoo.com/yui/examples/datatable/dt_basic.html

      There, it loads into one DataTable the data from the array at:

      YAHOO.example.Data.bookorders

      In your case, one of the tables would load the data at
      parsedJson.inputs, the other would do the same but take its data from
      parsedJson.outputs. You will need to create two DataSources and two
      DataTables, no shortcut on that one, well, none that makes any real
      difference anyway. If you want to show a loading message, then you are
      quite on your own, use a YUI panel (part of the Container family) and
      show it before the asyncRequest and hide it after you created the
      instance of the second DataTable. Since you are loading both from local
      data, there will be no delay in between instancing and actually having
      them show the data, as it happens when the source is remote.

      Satyam



      nbeney escribió:
      >
      >
      > Hi,
      >
      > I want to create a page with 2 DataTables that should initially
      > display "Loading data".
      >
      > When YAHOO.util.Connect.asyncRequest returns a JSON response like, I
      > want to stuff the "inputs" rows in the first table and the "outputs"
      > rows in the second table.
      >
      > {
      > "inputs": [
      > { "input": "a", "value": 1 },
      > { "input": "b", "value": 2 },
      > { "input": "c", "value": 3 }
      > ],
      > "outputs": [
      > { "output": "x", "value": 6 }
      > ]
      > }
      >
      >
      > I am new to YUI and I think this is possible but I don't know how to
      > start.
      >
      > Thank you in advance for your help.
      >
      > Nicolas
      >
      >
      >
      > ------------------------------------------------------------------------
      >
      >
      > No virus found in this incoming message.
      > Checked by AVG - www.avg.com
      > Version: 8.5.375 / Virus Database: 270.13.2/2213 - Release Date: 07/01/09 18:07:00
      >
      >
    • Nicolas Beney
      Dear Satyam, Thank you as always for your help. Somebody pointed out that showTableMessage and hideTableMessage from the DataTable are what I need to control
      Message 2 of 3 , Jul 2, 2009
      • 0 Attachment
        Dear Satyam,

        Thank you as always for your help.

        Somebody pointed out that showTableMessage and hideTableMessage from
        the DataTable are what I need to control the display of "Loading..."

        So I ended up with a solution that uses asyncRequest to store the
        parsed JSON into a variable and has one FunctionDataSource/DataTable
        per table. Each DataTable has initialLoad: false to prevent the
        loading of the data on instantiation. The success callback of
        asyncRequest invokes sendRequest on each DataSource to force each
        table to reload.

        Nicolas

        CODE SNIPPET:
        -----------------------

        <script type="text/javascript">
        YAHOO.util.Event.addListener(window, "load", function() {
        var makeDataSource = function(resultsList, fields)
        {
        return new YAHOO.util.FunctionDataSource(
        function(sQuery) { return data[resultsList]; },
        {responseSchema: {fields: fields}}
        );
        };

        var data = null;

        //----------------------------------------

        var colDefs = [
        {key: "field", label: "Field", sortable: true},
        {key: "value", label: "Value", sortable: true},
        ];

        var inputsDS = makeDataSource("inputs", ["field", "value"]);
        var inputsDT = new YAHOO.widget.DataTable("inputs", colDefs,
        inputsDS, {initialLoad: false});
        inputsDT.showTableMessage("Loading...");

        var outputsDS = makeDataSource("outputs", ["field", "value"]);
        var outputsDT = new YAHOO.widget.DataTable("outputs", colDefs,
        outputsDS, {initialLoad: false});
        outputsDT.showTableMessage("Loading...");

        //----------------------------------------

        var callbacks = {
        success: function(o) {
        data = YAHOO.lang.JSON.parse(o.responseText);

        inputsDT.hideTableMessage();
        inputsDS.sendRequest("", inputsDT.onDataReturnInitializeTable,
        inputsDT);

        outputsDT.hideTableMessage();
        outputsDS.sendRequest("",
        outputsDT.onDataReturnInitializeTable, outputsDT);
        },
        failure: function(o) {
        var msg = o.statusText + " (" + o.status + ")";
        inputsDT.showTableMessage(msg);
        outputsDT.showTableMessage(msg);
        }
        };

        YAHOO.util.Connect.asyncRequest("GET", "/Portal/test-table-data",
        callbacks);
        });
        </script>
      Your message has been successfully submitted and would be delivered to recipients shortly.