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

Re: [ydn-javascript] Re: Referesh datatable on interval...

Expand Messages
  • Satyam
    I m afraid that I have not much time to do a full working example right now. To access the sorting information to read it and preserve it in between refreshes
    Message 1 of 8 , Dec 8, 2008
    • 0 Attachment
      I'm afraid that I have not much time to do a full working example right
      now.

      To access the sorting information to read it and preserve it in between
      refreshes or send it to the server can be obtained from

      myDataTable.get('sortedBy');

      The original URL arguments can be retreived from

      myDataTable.get('initialRequest');

      and can be manipulated as the string it is and then set again via

      myDataTable.set('initialRequest', newValue);

      You would have to respond to columnSortEvent to detect changes to column
      sorting.

      You are already listening to several events. You should use DataSource
      clearTimeout to stop polling while any of those events are handled.

      Restarting the polling can be done by calling that extra method
      intervalQuery or however yo call it. If you have set up the
      initialRequest attribute in response to columnSortEvent, then that new
      one will be used automatically. The logic on the server to respond to
      those arguments is up to you. If you decide to sort it on the client
      side, then you should do it in response to initEvent.

      Satyam

      claracruzz wrote:
      > Hi Satyam,
      >
      > Do you have a sample code for datatable interval refresh where the
      > column sorted state is maintained pls...?
      >
      > I'm not that fantastic with javascript/yui, and sample code would be
      > great!!!
      >
      >
      > Clara#
      >
      > --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
      >
      >> The caching issue you solve it on the server side and it all
      >>
      > depends on
      >
      >> what is it that you have there. If you had PHP, you would put the
      >> following instructions before the very first echo statement:
      >>
      >> header('Cache-Control: no-cache, must-revalidate'); // HTTP/1.1
      >> header('Expires: Mon, 26 Jul 1997 05:00:00 GMT'); // Date in the
      >>
      > past
      >
      >> That makes the server tell the browser not to cache anything and,
      >>
      > just
      >
      >> in case, if it does, consider it already expired. The way to do it
      >> varies from server to server but it runs more or less on those
      >>
      > lines.
      >
      >> The sorting issue, well, that is an issue indeed. There are two
      >>
      > ways
      >
      >> around it. Server-side and client-side. If your server can do
      >>
      > sorting
      >
      >> efficiently, that would be the best.
      >>
      >> The setInterval method returns an identifier for the timer. I
      >>
      > forgot
      >
      >> about that in the code I drafted. You should return it and store
      >>
      > it
      >
      >> somewhere. In response to a new sorting event, you should use this
      >> identifier to cancel the interval (DataSource method
      >>
      > clearInterval).
      >
      >> Then you should read the sorting information, change the
      >>
      > initialRequest
      >
      >> attribute (you can access it via datatable methods get and set,
      >>
      > just
      >
      >> like sortedBy) and restart the polling. Your server should receive
      >>
      > this
      >
      >> extra sorting arguments and send the data sorted.
      >>
      >> The other alternative is to do it on the client side. In that
      >>
      > case, you
      >
      >> would have to listen to the initEvent and call method sortColumn
      >>
      > with
      >
      >> the key and direction you saved somewhere else. This is not so
      >>
      > good,
      >
      >> because it will make the table flicker because it will first show
      >> unsorted, disappear and show again sorted.
      >>
      >> Something I forgot is that you would probably be safer stopping the
      >> polling in response to any of the events you are listening to.
      >>
      > After
      >
      >> all, it would be really disappointing if the whole table disappears
      >>
      > from
      >
      >> under your cell editor while you are just about to hit Ok. So,
      >>
      > stopping
      >
      >> the polling and resuming it afterwards should be the safest.
      >>
      >> Satyam
      >>
      >>
      >>
      >>
      >> claracruzz wrote:
      >>
      >>> Hi Satyam,
      >>> Thanks for pointing those out for me.. I've adjusted the string
      >>> arguments accordingly.
      >>> Don't mean to be a pain, but I can't for the life of me figure
      >>>
      > out
      >
      >>> another way to beat the IE caching problem. Would it be at all
      >>> possible to post an example code of a working 'refresh on
      >>>
      > interval'
      >
      >>> model please.
      >>>
      >>> I'm really stuck and also a little under the gun as per deadline.
      >>>
      >>> Just a simple complete strucutre of a datatable with refresh on
      >>> interval enabled and if you can, with the ability to maintain
      >>>
      > sorted
      >
      >>> columns on refresh. I'm struggling to understand what code goes
      >>>
      > where.
      >
      >>> Thank you
      >>>
      >>>
      >>> Clara
      >>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
      >>>
      >>>
      >>>> The problem I see here is the setting of postdata. First of
      >>>>
      > all,
      >
      >>>>
      >>>>
      >>> you
      >>>
      >>>
      >>>> should use methods escape or encodeURIComponent on the string
      >>>>
      >>>>
      >>> arguments,
      >>>
      >>>
      >>>> otherwise a simple white space in any of them would truncate the
      >>>>
      >>>>
      >>> url.
      >>>
      >>>
      >>>> Second, the arguments of the post don't go along the base URL in
      >>>>
      >>>>
      >>> the
      >>>
      >>>
      >>>> argument to the DataSource constructor. You only put everything
      >>>>
      > up
      >
      >>>>
      >>>>
      >>> to
      >>>
      >>>
      >>>> the question mark:
      >>>>
      >>>> this.myDataSource = new YAHOO.util.DataSource(helper_url + "?");
      >>>>
      >>>> Then you put the postdata into the initialRequest configuration
      >>>>
      >>>>
      >>> attribute in the last argument to DataTable's constructor, like
      >>>
      > this:
      >
      >>>
      >>>
      >>>> {
      >>>> formatRow: myRowFormatter,
      >>>> sortedBy:{
      >>>> key:"ID",
      >>>> dir:YAHOO.widget.DataTable.CLASS_ASC
      >>>> },
      >>>> initialRequest:postdata
      >>>> }
      >>>>
      >>>> Finally, you will have to fix the issue of the stale cached
      >>>>
      >>>>
      >>> responses in IE from the server side. That random argument you
      >>>
      > are
      >
      >>> using in the URL to differentiate requests so they don't go to
      >>>
      > the
      >
      >>> cache wouldn't work here because the same random number used
      >>> initially would be repeated over and over, unchanged. Moreover,
      >>>
      > if
      >
      >>> it did work, your particular usage would be the worst kind of
      >>> offender, every minute you would be putting into the cache a new
      >>> reply which will never be used again, pushing other worthy pages
      >>>
      > out
      >
      >>> of it. Your server should notify the browser that the reply
      >>>
      > should
      >
      >>> not be cached at all.
      >>>
      >>>
      >>>> Satyam
      >>>>
      >>>>
      >>>>
      >>>>
      >>>> claracruzz wrote:
      >>>>
      >>>>
      >>>>> Hi Satyam,
      >>>>> Thank you...
      >>>>> Not entirely sure though how to where the bits of code fit into
      >>>>>
      >>>>>
      >>> the
      >>>
      >>>
      >>>>> page. Pls kindly show an example of where the intervalQuery
      >>>>>
      >>>>>
      >>> function
      >>>
      >>>
      >>>>> YAHOO.widget.DataTable.prototype.intervalQuery = function
      >>>>>
      >>>>>
      >>> (interval,
      >>>
      >>>
      >>>>> newRequest)
      >>>>> {
      >>>>> this.getDataSource().setInterval(interval,
      >>>>> (newRequest === undefined?this.get
      >>>>> ('initialRequest'):newRequest),{
      >>>>> success: this.onDataReturnInitializeTable,
      >>>>> failure: this.onDataReturnInitializeTable,
      >>>>> scope: this
      >>>>> });
      >>>>> };
      >>>>>
      >>>>> goes and where the call
      >>>>> this.myDataTable.intervalQuery(60000);
      >>>>>
      >>>>> goes. Here's what I've got now, not sure if that's right;-
      >>>>>
      >>>>> //define datatable columns
      >>>>> var myColumnDefs = [
      >>>>> {....},
      >>>>> ];
      >>>>>
      >>>>> //define parameters to send to server
      >>>>> var postdata
      >>>>> ="strFunction="+strFunction+"&strTeam="+strTeam+"&strType="+st
      >>>>> rType+"&sStatus="+sStatus+"&sid="+Math.random();
      >>>>>
      >>>>> //set datasource
      >>>>> this.myDataSource = new YAHOO.util.DataSource
      >>>>> (helper_url+"?"+postdata);
      >>>>> //set recponse type expected to JSON
      >>>>> this.myDataSource.responseType =
      >>>>> YAHOO.util.DataSource.TYPE_JSON;
      >>>>> //not sure what this does
      >>>>> this.myDataSource.connXhrMode = "queueRequests";
      >>>>> //define response fields to be received
      >>>>> this.myDataSource.responseSchema = {
      >>>>> resultsList: "ResultSet.Result",
      >>>>> fields: ["ID",.....]
      >>>>> };
      >>>>>
      >>>>> //send request and append response data to datatable
      >>>>> this.myDataTable = new YAHOO.widget.DataTable("json",
      >>>>> myColumnDefs, this.myDataSource, {formatRow: myRowFormatter,
      >>>>>
      >>>>>
      >>> sortedBy:
      >>>
      >>>
      >>>>> {key:"ID", dir:YAHOO.widget.DataTable.CLASS_ASC}});
      >>>>>
      >>>>> YAHOO.widget.DataTable.prototype.intervalQuery =
      >>>>> function(interval, newRequest)
      >>>>> {
      >>>>> this.getDataSource().setInterval(interval,
      >>>>> (newRequest === undefined?this.get
      >>>>> ('initialRequest'):newRequest),{
      >>>>> success: this.onDataReturnInitializeTable,
      >>>>> failure: this.onDataReturnInitializeTable,
      >>>>> scope: this
      >>>>> });
      >>>>> };
      >>>>>
      >>>>> this.myDataTable.intervalQuery(60000);
      >>>>>
      >>>>> // Set up editing flow
      >>>>> var highlightEditableCell = function(oArgs) {
      >>>>> var elCell = oArgs.target;
      >>>>> if(YAHOO.util.Dom.hasClass(elCell, "yui-dt-
      >>>>>
      >>>>>
      >>> editable")) {
      >>>
      >>>
      >>>>> this.highlightCell(elCell);
      >>>>> }
      >>>>> };
      >>>>>
      >>>>> this.myDataTable.subscribe("cellMouseoverEvent",
      >>>>> highlightEditableCell);
      >>>>> this.myDataTable.subscribe("cellMouseoutEvent",
      >>>>> this.myDataTable.onEventUnhighlightCell);
      >>>>> //this.myDataTable.subscribe("cellClickEvent",
      >>>>> this.myDataTable.onEventShowCellEditor);
      >>>>> this.myDataTable.subscribe('cellClickEvent',function
      >>>>> (oArgs) {
      >>>>> var target = oArgs.target;
      >>>>> var column = this.getColumn(target);
      >>>>> var record = this.getRecord(target);
      >>>>> if (column.key === 'ID') {;
      >>>>> myPopupView(record.getData
      >>>>> ('ClickUrl'), record.getData('ID'));
      >>>>> }
      >>>>> else {
      >>>>> this.onEventShowCellEditor(oArgs);
      >>>>> }
      >>>>> });
      >>>>>
      >>>>>
      >>>>>
      >>>>> return {
      >>>>> oDS: this.myDataSource,
      >>>>> oDT: this.myDataTable
      >>>>> };
      >>>>>
      >>>>>
      >>>>>
      >>>>>
      >>>>>
      >>>>> Clara
      >>>>>
      >>>>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
      >>>>>
      >>>>>
      >>>>>
      >>>>>> DataSource already has a setInterval method that redoes the
      >>>>>>
      >>>>>>
      >>> query
      >>>
      >>>
      >>>>>>
      >>>>>>
      >>>>>>
      >>>>> at a
      >>>>>
      >>>>>
      >>>>>
      >>>>>> given interval so you probably wouldn't use that requery
      >>>>>>
      >>>>>>
      >>> function
      >>>
      >>>
      >>>>>>
      >>>>>>
      >>>>>>
      >>>>> which
      >>>>>
      >>>>>
      >>>>>
      >>>>>> uses sendRequest, you might want to define a different one
      >>>>>>
      > that
      >
      >>>>>>
      >>>>>>
      >>>>>>
      >>>>> uses
      >>>>>
      >>>>>
      >>>>>
      >>>>>> setInterval. Basically, setInterval is the same as
      >>>>>>
      > sendRequest
      >
      >>>>>>
      >>>>>>
      >>>>>>
      >>>>> with a
      >>>>>
      >>>>>
      >>>>>
      >>>>>> retry interval inserted at the front of the arguments, the
      >>>>>>
      > rest
      >
      >>>>>>
      >>>>>>
      >>> of
      >>>
      >>>
      >>>>>>
      >>>>>>
      >>>>>>
      >>>>> them
      >>>>>
      >>>>>
      >>>>>
      >>>>>> are the same.
      >>>>>>
      >>>>>> You could also the requery with window.setInterval or
      >>>>>>
      >>>>>>
      >>>>>>
      >>>>> YAHOO.lang.later,
      >>>>>
      >>>>>
      >>>>>
      >>>>>> which wouldn't be much different than using
      >>>>>>
      >>>>>>
      >>> DataSource.setInterval.
      >>>
      >>>
      >>>>>> |*YAHOO.lang.later* ( 60000 , this.myDataTable ,
      >>>>>> this.myDataTable.requery , undefined , true ) ;
      >>>>>>
      >>>>>> or you could defined another method:
      >>>>>>
      >>>>>> |
      >>>>>>
      >>>>>> YAHOO.widget.DataTable.prototype.intervalQuery = function
      >>>>>>
      >>>>>>
      >>> (interval,
      >>>
      >>>
      >>>>>>
      >>>>>>
      >>>>>>
      >>>>> newRequest) {
      >>>>>
      >>>>>
      >>>>>
      >>>>>> this.getDataSource().setInterval(interval,
      >>>>>> (newRequest === undefined?this.get
      >>>>>> ('initialRequest'):newRequest),{
      >>>>>> success: this.onDataReturnInitializeTable,
      >>>>>> failure: this.onDataReturnInitializeTable,
      >>>>>> scope: this
      >>>>>> });
      >>>>>> };
      >>>>>>
      >>>>>> and simply use it:
      >>>>>>
      >>>>>> this.myDataTable.intervalQuery(60000);
      >>>>>>
      >>>>>> Satyam
      >>>>>>
      >>>>>> claracruzz wrote:
      >>>>>>
      >>>>>>
      >>>>>>
      >>>>>>> Hello,
      >>>>>>>
      >>>>>>> I have a datatable and would like to implement refresh on
      >>>>>>>
      >>>>>>>
      >>>>>>>
      >>>>> interval
      >>>>>
      >>>>>
      >>>>>
      >>>>>>> against it. I have added the code;-
      >>>>>>> YAHOO.widget.DataTable.prototype.requery = function
      >>>>>>>
      > (newRequest)
      >
      >>>>>>>
      >>>>>>>
      >>> {
      >>>
      >>>
      >>>>>>> this.getDataSource().sendRequest(
      >>>>>>> (newRequest === undefined?this.get
      >>>>>>> ('initialRequest'):newRequest),{
      >>>>>>> success:
      >>>>>>>
      > this.onDataReturnInitializeTable,
      >
      >>>>>>> failure:
      >>>>>>>
      > this.onDataReturnInitializeTable,
      >
      >>>>>>> scope: this
      >>>>>>> });
      >>>>>>> };
      >>>>>>>
      >>>>>>> so that the datatable is constructed like so;-
      >>>>>>>
      >>>>>>> YAHOO.example.XHR_JSON = new function() {
      >>>>>>> //define datatable columns
      >>>>>>> var myColumnDefs = [
      >>>>>>> {......},
      >>>>>>> ];
      >>>>>>>
      >>>>>>> //set datasource
      >>>>>>> this.myDataSource = new YAHOO.util.DataSource(url);
      >>>>>>> //set recponse type expected to JSON
      >>>>>>> this.myDataSource.responseType =
      >>>>>>> YAHOO.util.DataSource.TYPE_JSON;
      >>>>>>> //not sure what this does
      >>>>>>> this.myDataSource.connXhrMode = "queueRequests";
      >>>>>>> //define response fields to be received
      >>>>>>> this.myDataSource.responseSchema = {
      >>>>>>> resultsList: "ResultSet.Result",
      >>>>>>> fields: [....]
      >>>>>>> };
      >>>>>>>
      >>>>>>> //send request and append response data to datatable
      >>>>>>> this.myDataTable = new YAHOO.widget.DataTable("json",
      >>>>>>> myColumnDefs, this.myDataSource, {formatRow: myRowFormatter,
      >>>>>>>
      >>>>>>>
      >>>>>>>
      >>>>> sortedBy:
      >>>>>
      >>>>>
      >>>>>
      >>>>>>> {key:"ID", dir:YAHOO.widget.DataTable.CLASS_ASC}});
      >>>>>>>
      >>>>>>> YAHOO.widget.DataTable.prototype.requery = function
      >>>>>>> (newRequest) {
      >>>>>>> this.getDataSource().sendRequest(
      >>>>>>> (newRequest === undefined?this.get
      >>>>>>> ('initialRequest'):newRequest),{
      >>>>>>> success:
      >>>>>>>
      > this.onDataReturnInitializeTable,
      >
      >>>>>>> failure:
      >>>>>>>
      > this.onDataReturnInitializeTable,
      >
      >>>>>>> scope: this
      >>>>>>> });
      >>>>>>> };
      >>>>>>>
      >>>>>>>
      >>>>>>> // Set up editing flow
      >>>>>>> var highlightEditableCell = function(oArgs) {
      >>>>>>> var elCell = oArgs.target;
      >>>>>>> if(YAHOO.util.Dom.hasClass(elCell, "yui-dt-
      >>>>>>> editable")) {
      >>>>>>> this.highlightCell(elCell);
      >>>>>>> }
      >>>>>>> };
      >>>>>>>
      >>>>>>> this.myDataTable.subscribe("cellMouseoverEvent",
      >>>>>>> highlightEditableCell);
      >>>>>>> this.myDataTable.subscribe("cellMouseoutEvent",
      >>>>>>> this.myDataTable.onEventUnhighlightCell);
      >>>>>>> this.myDataTable.subscribe("cellClickEvent",
      >>>>>>> this.myDataTable.onEventShowCellEditor);
      >>>>>>>
      >>>>>>>
      >>>>>>>
      >>>>>>> return {
      >>>>>>> oDS: this.myDataSource,
      >>>>>>> oDT: this.myDataTable
      >>>>>>> };
      >>>>>>>
      >>>>>>>
      >>>>>>>
      >>>>>>> };
      >>>>>>>
      >>>>>>>
      >>>>>>>
      >>>>>>> How do I then get my requery
      >>>>>>> (YAHOO.widget.DataTable.prototype.requery) to work pls?
      >>>>>>>
      >>>>>>>
      >>>>>>>
      >>>>>>> ------------------------------------
      >>>>>>>
      >>>>>>> Yahoo! Groups Links
      >>>>>>>
      >>>>>>>
      >>>>>>>
      >>>>>>> --------------------------------------------------------------
      >>>>>>>
      > --
      >
      >>>>>>>
      >>>>>>>
      >>> --
      >>>
      >>>
      >>>>>>>
      >>>>>>>
      >>>>>>>
      >>>>> ------
      >>>>>
      >>>>>
      >>>>>
      >>>>>>> No virus found in this incoming message.
      >>>>>>> Checked by AVG - http://www.avg.com
      >>>>>>> Version: 8.0.176 / Virus Database: 270.9.13/1826 - Release
      >>>>>>>
      >>>>>>>
      >>> Date:
      >>>
      >>>
      >>>>>>>
      >>>>>>>
      >>>>>>>
      >>>>> 03/12/2008 9:34
      >>>>>
      >>>>>
      >>>>>
      >>>>>>>
      >>>>>>>
      >>>>>>>
      >>>>> ------------------------------------
      >>>>>
      >>>>> Yahoo! Groups Links
      >>>>>
      >>>>>
      >>>>>
      >>>>> ----------------------------------------------------------------
      >>>>>
      > --
      >
      >>>>>
      >>>>>
      >>> ------
      >>>
      >>>
      >>>>> No virus found in this incoming message.
      >>>>> Checked by AVG - http://www.avg.com
      >>>>> Version: 8.0.176 / Virus Database: 270.9.15/1835 - Release
      >>>>>
      > Date:
      >
      >>>>>
      >>>>>
      >>> 07/12/2008 16:56
      >>>
      >>>
      >>>>>
      >>>>>
      >>>
      >>> ------------------------------------
      >>>
      >>> Yahoo! Groups Links
      >>>
      >>>
      >>>
      >>> ------------------------------------------------------------------
      >>>
      > ------
      >
      >>> No virus found in this incoming message.
      >>> Checked by AVG - http://www.avg.com
      >>> Version: 8.0.176 / Virus Database: 270.9.15/1835 - Release Date:
      >>>
      > 07/12/2008 16:56
      >
      >>>
      >
      >
      >
      > ------------------------------------
      >
      > Yahoo! Groups Links
      >
      >
      >
      > ------------------------------------------------------------------------
      >
      >
      > No virus found in this incoming message.
      > Checked by AVG - http://www.avg.com
      > Version: 8.0.176 / Virus Database: 270.9.15/1835 - Release Date: 07/12/2008 16:56
      >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.