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

Refreshing a datatable with XHR/JSON datasource

Expand Messages
  • grotgrot
    I have a datatable in my app using a XHR/JSON datasource. Typically about 5 rows of data are returned, with a maximum of about 30. I d like to update the table
    Message 1 of 5 , Jan 30, 2009
    • 0 Attachment
      I have a datatable in my app using a XHR/JSON datasource. Typically
      about 5 rows of data are returned, with a maximum of about 30. I'd
      like to update the table by getting the data again periodically, on a
      button click and when local UI does things that should result in
      backend data changes.

      This is what my code looks like:

      var ds=new YAHOO.util.XHRDataSource(app.m.fullurl+"api/get-feeds");
      ds.responseSchema={resultsList: "feeds" };
      var dt=new YAHOO.widget.DataTable("feeds-table", app.feedColumnDefs, ds);

      I can't figure out how you do the refreshes. The above code is all
      that is needed to get the data first time. What I was hoping for is a
      datasource.refresh() or datatable.refresh() method.

      Does the datasource push new data to the datatable or does the
      datatable pull new data from the datasource? There is a setInterval
      method on the datasource but it takes 3 additional parameters that I
      have no idea about in addition to the polling interval. Similarly I
      have seen asyncRequest being used by other code, but again I have no
      idea what parameters to use. I want the datasource and datatable to
      just talk to each other in whatever manner they deem appropriate just
      like they do for the initial load.

      Roger
    • David Montgomery
      Hi, I had the same problem...it works in firefox but not in IE..... Below is my code that works in firefox ....if someone can get it towork in IE then that
      Message 2 of 5 , Jan 30, 2009
      • 0 Attachment
        Hi,
        I had the same problem...it works in firefox but not in IE.....
        Below is my code that works in firefox ....if someone can get it to
        work in IE then that will be great...
        note the line:
        myDataSource.setInterval(5000,"service_type=$service_type&ddd="+(new
        Date).getTime(),callbackObj);

              <script type="text/javascript">
                       function call_create_datagrid(){
                               YAHOO.example.XHR_JSON = function() {
                               var formatUrl = function(elCell, oRecord,
        oColumn, sData) {
                                   elCell.innerHTML = "<a href='http://" +
        oRecord.getData("Domain") + "' target='_blank'>" + sData + "</a>";
                               };
                               var myColumnDefs = [
                                   {key:"Service_ID", label:"Service ID",
        sortable:true, resizeable:true},
                                   {key:"Instanace_ID", label:"Instanace ID",
        sortable:true, resizeable:true},
                                   {key:"Status", sortable:true, resizeable:true},
                                   {key:"Domain", resizeable:true,formatter:formatUrl}
                               ];
                               var myDataSource = new
        YAHOO.util.DataSource("cgi_update_instances?");
                               myDataSource.responseType =
        YAHOO.util.DataSource.TYPE_JSON;
                               myDataSource.connXhrMode = "queueRequests";
        //myDataSource.setInterval(10000,"service_type=$service_type&ddd="+(new
        Date).getTime(),callbackObj);
                               myDataSource.responseSchema = {
                                   resultsList: "InstanacesDatabase.InstanacesList",
                                   fields:
        ["Service_ID","Instanace_ID","Status","Domain"]
                               };
                               var myDataTable = new
        YAHOO.widget.DataTable("json", myColumnDefs,
                                       myDataSource,
        {initialRequest:"service_type=$service_type&ddd="+(new
        Date).getTime()});
                                       //myDataSource, {initialLoad:false});
                               var mySuccessHandler = function() {
                                   this.set("sortedBy", null);
        this.onDataReturnInitializeTable.apply(this,arguments);
                               };
                               var myFailureHandler = function() {
        this.showTableMessage(YAHOO.widget.DataTable.MSG_ERROR,
        YAHOO.widget.DataTable.CLASS_ERROR);
                                   this.onDataReturnAppendRows.apply(this,arguments);
                               };
         
                                var callbackObj = {
                                       //success :
        myDataTableonDataReturnInitializeTable,
                                   success : mySuccessHandler,
                                   failure : myFailureHandler,
                                   scope : myDataTable,
                                   cache: false
                               };
        //myDataSource.sendRequest("service_type=$service_type&ddd="+(new
        Date).getTime(),callbackObj);
        myDataSource.setInterval(5000,"service_type=$service_type&ddd="+(new
        Date).getTime(),callbackObj);
                              return {
                                   oDS: myDataSource,
                                   oDT: myDataTable
                               };
                               }();
                       }
                   </script>




        To: ydn-javascript@yahoogroups.com
        From: grotgrot@...
        Date: Fri, 30 Jan 2009 08:18:07 +0000
        Subject: [ydn-javascript] Refreshing a datatable with XHR/JSON datasource


        I have a datatable in my app using a XHR/JSON datasource. Typically
        about 5 rows of data are returned, with a maximum of about 30. I'd
        like to update the table by getting the data again periodically, on a
        button click and when local UI does things that should result in
        backend data changes.

        This is what my code looks like:

        var ds=new YAHOO.util.XHRDataS ource(app. m.fullurl+ "api/get- feeds");
        ds.responseSchema= {resultsList: "feeds" };
        var dt=new YAHOO.widget. DataTable( "feeds-table" , app.feedColumnDefs, ds);

        I can't figure out how you do the refreshes. The above code is all
        that is needed to get the data first time. What I was hoping for is a
        datasource.refresh( ) or datatable.refresh( ) method.

        Does the datasource push new data to the datatable or does the
        datatable pull new data from the datasource? There is a setInterval
        method on the datasource but it takes 3 additional parameters that I
        have no idea about in addition to the polling interval. Similarly I
        have seen asyncRequest being used by other code, but again I have no
        idea what parameters to use. I want the datasource and datatable to
        just talk to each other in whatever manner they deem appropriate just
        like they do for the initial load.

        Roger


      • Satyam
        ... The usual cause for something working in Firefox but not IE are trailing commas in array lists, but I ve seen none. I usually give JSLint a try,
        Message 3 of 5 , Jan 30, 2009
        • 0 Attachment
          David Montgomery wrote:
          > Hi,
          > I had the same problem...it works in firefox but not in IE.....
          > Below is my code that works in firefox ....if someone can get it to
          > work in IE then that will be great...

          The usual cause for something working in Firefox but not IE are trailing
          commas in array lists, but I've seen none. I usually give JSLint a try,
          (www.jslint.org) which will normally point out some ambiguous or unsafe
          grammar that might be the cause of the problem.

          I also notice that you are using the addition of a timestamp to the URL
          to bypass the browser caching. This is not a good idea as you simply
          flood the cache with copies that won't ever be used again, depriving
          other applications of its benefits. In PHP; using the following
          instructions is enough to prevent even IE from caching:

          header('Cache-Control: no-cache, must-revalidate'); // HTTP/1.1
          header('Expires: Mon, 26 Jul 1997 05:00:00 GMT'); // Date in the past

          These or similar instructions in other languages, are enough to prevent
          any browser from doing any caching.

          Satyam

          > note the line:
          > myDataSource.setInterval(5000,"service_type=$service_type&ddd="+(new
          > Date).getTime(),callbackObj);
          >
          > <script type="text/javascript">
          > function call_create_datagrid(){
          > YAHOO.example.XHR_JSON = function() {
          > var formatUrl = function(elCell, oRecord,
          > oColumn, sData) {
          > elCell.innerHTML = "<a href='http://" +
          > oRecord.getData("Domain") + "' target='_blank'>" + sData + "</a>";
          > };
          > var myColumnDefs = [
          > {key:"Service_ID", label:"Service ID",
          > sortable:true, resizeable:true},
          > {key:"Instanace_ID", label:"Instanace ID",
          > sortable:true, resizeable:true},
          > {key:"Status", sortable:true, resizeable:true},
          > {key:"Domain",
          > resizeable:true,formatter:formatUrl}
          > ];
          > var myDataSource = new
          > YAHOO.util.DataSource("cgi_update_instances?");
          > myDataSource.responseType =
          > YAHOO.util.DataSource.TYPE_JSON;
          > myDataSource.connXhrMode = "queueRequests";
          > //myDataSource.setInterval(10000,"service_type=$service_type&ddd="+(new
          > Date).getTime(),callbackObj);
          > myDataSource.responseSchema = {
          > resultsList:
          > "InstanacesDatabase.InstanacesList",
          > fields:
          > ["Service_ID","Instanace_ID","Status","Domain"]
          > };
          > var myDataTable = new
          > YAHOO.widget.DataTable("json", myColumnDefs,
          > myDataSource,
          > {initialRequest:"service_type=$service_type&ddd="+(new
          > Date).getTime()});
          > //myDataSource, {initialLoad:false});
          > var mySuccessHandler = function() {
          > this.set("sortedBy", null);
          > this.onDataReturnInitializeTable.apply(this,arguments);
          > };
          > var myFailureHandler = function() {
          > this.showTableMessage(YAHOO.widget.DataTable.MSG_ERROR,
          > YAHOO.widget.DataTable.CLASS_ERROR);
          >
          > this.onDataReturnAppendRows.apply(this,arguments);
          > };
          >
          > var callbackObj = {
          > //success :
          > myDataTableonDataReturnInitializeTable,
          > success : mySuccessHandler,
          > failure : myFailureHandler,
          > scope : myDataTable,
          > cache: false
          > };
          > //myDataSource.sendRequest("service_type=$service_type&ddd="+(new
          > Date).getTime(),callbackObj);
          > myDataSource.setInterval(5000,"service_type=$service_type&ddd="+(new
          > Date).getTime(),callbackObj);
          > return {
          > oDS: myDataSource,
          > oDT: myDataTable
          > };
          > }();
          > }
          > </script>
          >
          >
          > ------------------------------------------------------------------------
          >
          > To: ydn-javascript@yahoogroups.com
          > From: grotgrot@...
          > Date: Fri, 30 Jan 2009 08:18:07 +0000
          > Subject: [ydn-javascript] Refreshing a datatable with XHR/JSON datasource
          >
          >
          > I have a datatable in my app using a XHR/JSON datasource. Typically
          > about 5 rows of data are returned, with a maximum of about 30. I'd
          > like to update the table by getting the data again periodically, on a
          > button click and when local UI does things that should result in
          > backend data changes.
          >
          > This is what my code looks like:
          >
          > var ds=new YAHOO.util.XHRDataSource(app.m.fullurl+"api/get-feeds");
          > ds.responseSchema={resultsList: "feeds" };
          > var dt=new YAHOO.widget.DataTable("feeds-table", app.feedColumnDefs, ds);
          >
          > I can't figure out how you do the refreshes. The above code is all
          > that is needed to get the data first time. What I was hoping for is a
          > datasource.refresh() or datatable.refresh() method.
          >
          > Does the datasource push new data to the datatable or does the
          > datatable pull new data from the datasource? There is a setInterval
          > method on the datasource but it takes 3 additional parameters that I
          > have no idea about in addition to the polling interval. Similarly I
          > have seen asyncRequest being used by other code, but again I have no
          > idea what parameters to use. I want the datasource and datatable to
          > just talk to each other in whatever manner they deem appropriate just
          > like they do for the initial load.
          >
          > Roger
          >
          >
          >
          > ------------------------------------------------------------------------
          >
          >
          > No virus found in this incoming message.
          > Checked by AVG - www.avg.com
          > Version: 8.0.233 / Virus Database: 270.10.15/1924 - Release Date: 01/29/09 07:13:00
          >
          >
        • Lucas Smith
          ... app.feedColumnDefs, ds); ... Roger, This example http://yuiblog.com/sandbox/yui/v252/examples/datatable/pag_row_color.html includes a load(..) method
          Message 4 of 5 , Jan 30, 2009
          • 0 Attachment
            --- In ydn-javascript@yahoogroups.com, "grotgrot" <grotgrot@...> wrote:
            >
            > I have a datatable in my app using a XHR/JSON datasource. Typically
            > about 5 rows of data are returned, with a maximum of about 30. I'd
            > like to update the table by getting the data again periodically, on a
            > button click and when local UI does things that should result in
            > backend data changes.
            >
            > This is what my code looks like:
            >
            > var ds=new YAHOO.util.XHRDataSource(app.m.fullurl+"api/get-feeds");
            > ds.responseSchema={resultsList: "feeds" };
            > var dt=new YAHOO.widget.DataTable("feeds-table",
            app.feedColumnDefs, ds);
            >
            > I can't figure out how you do the refreshes. The above code is all
            > that is needed to get the data first time. What I was hoping for is a
            > datasource.refresh() or datatable.refresh() method.
            >
            > Does the datasource push new data to the datatable or does the
            > datatable pull new data from the datasource? There is a setInterval
            > method on the datasource but it takes 3 additional parameters that I
            > have no idea about in addition to the polling interval. Similarly I
            > have seen asyncRequest being used by other code, but again I have no
            > idea what parameters to use. I want the datasource and datatable to
            > just talk to each other in whatever manner they deem appropriate just
            > like they do for the initial load.
            >
            > Roger
            >

            Roger,

            This example
            http://yuiblog.com/sandbox/yui/v252/examples/datatable/pag_row_color.html

            includes a load(..) method addition to the DT prototype and is based
            on a similar approach that Satyam named requery(). You can use either
            of these patches or just execute the myDataSource.sendRequest(..)
            noted inside to refresh your data. You'll want to use
            myDataTable.onDataReturnInitializeTable rather than
            onDataReturnSetRows as well.

            The code was written for 2.5.2, but should work with 2.6.0.

            If you want to regularly poll the back end irrespective of user
            interaction, use
            myDataSource.setInterval(5000, initialRequest, {
            success : myDataTable.onDataReturnInitilizeTable,
            failure : myDataTable.onDataReturnInitilizeTable,
            scope : myDataTable,
            argument : myDataTable.getState()
            });

            where 5000 = every 5 seconds, and initialRequest is the same value you
            would pass to the DataTable's initialRequest config. If you're not
            providing one, pass null.

            Hope this helps,
            Luke
          • grotgrot
            ... Once I found that it was easy. There seemed to be a rather large amount of code posted here for something so simple :-) For future reference, this message
            Message 5 of 5 , Feb 3, 2009
            • 0 Attachment
              > on a similar approach that Satyam named requery().

              Once I found that it was easy. There seemed to be a rather large
              amount of code posted here for something so simple :-)

              For future reference, this message adds a one line requery function to
              datatable that will reload the contents:

              http://tech.groups.yahoo.com/group/ydn-javascript/message/34851

              Roger
            Your message has been successfully submitted and would be delivered to recipients shortly.