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

2 DataTables for a single JSON response

Expand Messages
  • nbeney
    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,
    Message 1 of 3 , Jul 2, 2009
    • 0 Attachment
      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
    • 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 2 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 3 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.