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

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

Expand Messages
  • 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 1 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.