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

[ydn-javascript] YUI DataTable problem refreshing table

Expand Messages
  • mschipperheyn
    Hi, I use server side pagination datatable. On delete I want the table to refresh itself at the location it is at. I can t seem to get that working. When I try
    Message 1 of 6 , Jul 29, 2009
      Hi,

      I use server side pagination datatable. On delete I want the table to
      refresh itself at the location it is at.

      I can't seem to get that working. When I try to debug it, I get an infinite
      loop somewhere.
      Also can't seem to change the default message BTW

      I use date.js to parse the date.

      Any ideas?

      var myDataTable;

      YAHOO.widget.DataTable.prototype.requery = function(newRequest) {
      this.getDataSource().sendRequest(
      (newRequest === undefined?this.get('initialRequest'):newRequest),
      this.onDataReturnReplaceRows,this);
      };
      YAHOO.widget.DataTable.prototype.getRequestBuilder = function(){
      return requestBuilder;
      }
      var messageTable = function() {

      var parseSQLDate = function(data){
      var date = null;
      date = new Date( Date.parse(data) );
      return date;
      };
      /**
      * This is a formatting callback for YUI DataTable to present date in ISO
      format
      * instead of American mm/dd/yyyy
      */
      var formatDateInDataTable = function(elCell, oRecord, oColumn, oData)
      {
      var oDate = oData;
      if(oDate != null)
      elCell.innerHTML = oDate.toString('dd MMM yyyy');
      };

      // Column definitions
      var myColumnDefs = [ // sortable:true enables sorting
      {key:"from", label:"ui.inbox.from", sortable:true},
      {key:"subject", label:"Subject",
      className:"messCol",sortable:false},
      {key:"lastUpdate", label:"Date", sortable:true,
      formatter:formatDateInDataTable},
      {key:"messageId",label:""}
      ];

      // DataSource instance
      var myDataSource = new
      YAHOO.util.DataSource("/server/json/getmessages.html?");
      myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
      myDataSource.responseSchema = {
      resultsList: "messages.records",
      fields: [
      {key:"from"},
      {key:"subject"},
      {key:"lastUpdate",parser:parseSQLDate},
      {key:"messageId"}
      ],
      metaFields: {
      totalRecords: "messages.totalRecords" // Access to value in the
      server response
      }
      };

      // DataTable configuration
      var myConfigs = {
      initialRequest: "sort=lastUpdate&dir=desc&startIndex=0&results=25",
      // Initial request for first page of data
      generateRequest: requestBuilder,
      dynamicData: true, // Enables dynamic server-driven data
      sortedBy : {key:"lastUpdate",
      dir:YAHOO.widget.DataTable.CLASS_DESC}, // Sets UI initial sort arrow
      paginator: new YAHOO.widget.Paginator({
      rowsPerPage:15,
      firstPageLinkLabel:"First",
      lastPageLinkLabel : "Last",
      previousPageLinkLabel : "<",
      nextPageLinkLabel : ">",
      }) // Enables pagination
      };

      var requestBuilder = function(oState, oSelf) {
      var oState = oState ? o : {pagination:{recordOffset:0, rowsPerPage:15},
      sortedBy:null};
      var sorting = (oState.sortedBy) ? oState.sortedBy.key : "lastUpdate";
      var dir = (oState.sortedBy && oState.sortedBy.dir ==
      YAHOO.widget.DataTable.CLASS_ASC) ? "asc" : "desc";
      var startIndex = (oState.pagination) ? oState.pagination.recordOffset : 0;
      var results = (oState.pagination) ? oState.pagination.rowsPerPage : 15;
      //var query=Dom.get('search').value;
      // Build custom request
      return
      "&sort="+sorting+"&dir="+dir+"&startIndex="+startIndex+"&results="+results;
      };

      YAHOO.widget.DataTable.MSG_LOADING = "Loading";
      YAHOO.widget.DataTable.MSG_ERROR = "Error";
      YAHOO.widget.DataTable.MSG_SORTDESC = "Order ascending";
      YAHOO.widget.DataTable.MSG_SORTASC = "ui.sortasscending";
      YAHOO.widget.DataTable.MSG_EMPTY = "No records found";

      // DataTable instance
      myDataTable = new YAHOO.widget.DataTable("messages", myColumnDefs,
      myDataSource, myConfigs);
      myDataTable.hideColumn(3);
      //myDataTable.refreshView();
      // Update totalRecords on the fly with value from server
      myDataTable.handleDataReturnPayload = function(oRequest, oResponse,
      oPayload) {
      oPayload.totalRecords = oResponse.meta.totalRecords;
      return oPayload;
      };

      myDataTable.subscribe('cellClickEvent',function(oArgs) {
      var target = oArgs.target;
      var record = this.getRecord(target);
      showMessage(record.getData('messageId'));
      });

      return {
      ds: myDataSource,
      dt: myDataTable
      };

      }();

      var deleteMessage = function(){

      YAHOO.util.Connect.asyncRequest('GET',"/server/json/delmessage.html?messageId="
      + curMessId, delbacks);
      //myDataTable.refreshView();
      messageVWPanel.hide();

      messageTable.requery(messageTable.getRequestBuilder(messageTable.getState(),messageTable));
      var delbacks = {

      success : function (o) {
      var message;
      try {
      message = YAHOO.lang.JSON.parse(o.responseText);
      }
      catch (x) {
      alert("JSON Parse failed!");
      return;
      }
      },

      failure : function (o) {
      if (!YAHOO.util.Connect.isCallInProgress(o)) {
      alert("Async 3 call failed!");
      }
      },

      timeout : 3000
      }
      };

      Cheers,

      Marc
      --
      View this message in context: http://www.nabble.com/YUI-DataTable-problem-refreshing-table-tp24725677p24725677.html
      Sent from the ydn-javascript mailing list archive at Nabble.com.
    • Ryan V. Bayona
      sorry i didnt quite get your question and what you re trying to do. do you want to refresh the entire page or just the datatable? and why would you refresh
      Message 2 of 6 , Jul 31, 2009
        sorry i didnt quite get your question and what you're trying to do. do you want to refresh the entire page or just the datatable? and why would you refresh the datatable upon record delete? the rows and the record in the recordset will be deleted too anyway
      • mschipperheyn
        Hi, Well, since this is a server side paginated datatable, If I just delete the row in the record set, I will e.g. delete row 15 in range 11-20. So, now I need
        Message 3 of 6 , Jul 31, 2009
          Hi,

          Well, since this is a server side paginated datatable, If I just delete the
          row in the record set, I will e.g. delete row 15 in range 11-20. So, now I
          need to get row 21. Since this is not on the client yet, I need to refresh
          the DataTable with a round trip to the server. I could refresh the entire
          page, but that is not really elegant. So I just want to re-execute the
          current all to the server.

          When what works, there will also be some remaining issues such as; what if I
          delete row 11 (page 2) and there are only 10 rows left (just one page). But
          that could be calculated. Ideally, of course, DataTable should take care of
          that stuff.

          Any ideas on the first issue?


          Cheers,

          Marc
          --
          View this message in context: http://www.nabble.com/YUI-DataTable-problem-refreshing-table-tp24725677p24753580.html
          Sent from the ydn-javascript mailing list archive at Nabble.com.
        • Ryan V. Bayona
          Hi, I see what you mean. This is what i have in mind : 1 .Assuming total rows is 20. 2. User deletes rows 11-15. 3. Code sends a request to the server, along
          Message 4 of 6 , Jul 31, 2009
            Hi,
            I see what you mean. This is what i have in mind :

            1 .Assuming total rows is 20.
            2. User deletes rows 11-15.
            3. Code sends a request to the server, along with the 'id' of the rows
            to be deleted.
            4. Server receives the id of the rows to be deleted and removes them
            from the db.
            5. Server should re-execute the query that produced the rows in #1, this
            time the rows 11-15 is not included because they do not exist on the
            database (deleted in #4 ) and returns the result.
            6. Client (Datatable) parses the returned results and replaces all rows
            currently displayed.


            --- In ydn-javascript@yahoogroups.com, mschipperheyn
            <m.schipperheyn@...> wrote:
            >
            >
            > Hi,
            >
            > Well, since this is a server side paginated datatable, If I just
            delete the
            > row in the record set, I will e.g. delete row 15 in range 11-20. So,
            now I
            > need to get row 21. Since this is not on the client yet, I need to
            refresh
            > the DataTable with a round trip to the server. I could refresh the
            entire
            > page, but that is not really elegant. So I just want to re-execute the
            > current all to the server.
            >
            > When what works, there will also be some remaining issues such as;
            what if I
            > delete row 11 (page 2) and there are only 10 rows left (just one
            page). But
            > that could be calculated. Ideally, of course, DataTable should take
            care of
            > that stuff.
            >
            > Any ideas on the first issue?
            >
            >
            > Cheers,
            >
            > Marc
            > --
            > View this message in context:
            http://www.nabble.com/YUI-DataTable-problem-refreshing-table-tp24725677p\
            24753580.html
            > Sent from the ydn-javascript mailing list archive at Nabble.com.
            >
          • mschipperheyn
            Exactly, and *that* is what I can t seem to get working. The idea is just re-executing the current request. Which is what my code is supposed to be doing
            Message 5 of 6 , Jul 31, 2009
              Exactly, and *that* is what I can't seem to get working.
              The idea is just re-executing the current request. Which is what my code is
              supposed to be doing

              Cheers,

              Marc

              Ryan V. Bayona wrote:
              >
              > Hi,
              > I see what you mean. This is what i have in mind :
              >
              > 1 .Assuming total rows is 20.
              > 2. User deletes rows 11-15.
              > 3. Code sends a request to the server, along with the 'id' of the rows
              > to be deleted.
              > 4. Server receives the id of the rows to be deleted and removes them
              > from the db.
              > 5. Server should re-execute the query that produced the rows in #1, this
              > time the rows 11-15 is not included because they do not exist on the
              > database (deleted in #4 ) and returns the result.
              > 6. Client (Datatable) parses the returned results and replaces all rows
              > currently displayed.
              >
              >
              > --- In ydn-javascript@yahoogroups.com, mschipperheyn
              > <m.schipperheyn@...> wrote:
              >>
              >>
              >> Hi,
              >>
              >> Well, since this is a server side paginated datatable, If I just
              > delete the
              >> row in the record set, I will e.g. delete row 15 in range 11-20. So,
              > now I
              >> need to get row 21. Since this is not on the client yet, I need to
              > refresh
              >> the DataTable with a round trip to the server. I could refresh the
              > entire
              >> page, but that is not really elegant. So I just want to re-execute the
              >> current all to the server.
              >>
              >> When what works, there will also be some remaining issues such as;
              > what if I
              >> delete row 11 (page 2) and there are only 10 rows left (just one
              > page). But
              >> that could be calculated. Ideally, of course, DataTable should take
              > care of
              >> that stuff.
              >>
              >> Any ideas on the first issue?
              >>
              >>
              >> Cheers,
              >>
              >> Marc
              >> --
              >> View this message in context:
              > http://www.nabble.com/YUI-DataTable-problem-refreshing-table-tp24725677p\
              > 24753580.html
              >> Sent from the ydn-javascript mailing list archive at Nabble.com.
              >>
              >
              >
              >
              >

              --
              View this message in context: http://www.nabble.com/YUI-DataTable-problem-refreshing-table-tp24725677p24753807.html
              Sent from the ydn-javascript mailing list archive at Nabble.com.
            • Ryan V. Bayona
              If you re going to do what i suggested, you would need to collect all the records / record ids of the rows to be deleted and then attach them as query
              Message 6 of 6 , Jul 31, 2009
                If you're going to do what i suggested, you would need to collect all the records / record ids of the rows to be deleted and then attach them as query strings/parameters to Satyam's Datatable requery method..

                Search around here and you can see Satyam's code.


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