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

Re: [ydn-javascript] DataTable, deleteRow problems

Expand Messages
  • david@myshape.com
    I made sure that I save the target row in my DataTable object so I can reference it later, and I made sure to set the scope of the asyncRequest to be the
    Message 1 of 4 , Nov 1, 2007
      I made sure that I save the target row in my DataTable object so I can reference it later, and I made sure to set the scope of the asyncRequest to be the DataTable object.

      Perhaps the target.parentNode.parentNode is the actual Table but not the actual DataTable object.


      Here's the portion of my code that deals with it:


      this.handleCellClick = function(ev) {
      var target = YAHOO.util.Event.getTarget(ev);

      var column = this.getColumn(target);
      var record = this.getRecord(target);

      // Delete record
      if (column.key == 'delete') {
      var recId = record.getData(tableName + 'Id');

      // save the reference to the row
      target.parentNode.parentNode.deleteTargetRow = target.parentNode;

      var handleYes = function () {
      YAHOO.util.Connect.asyncRequest(
      'POST',
      '/main/en/content/getjsondata',
      {
      success: function (o) {
      var r = YAHOO.Tools.JSONParse(o.responseText);
      if (r.status == 'Ok') {

      // old code that doesn't work
      //
      // this.deleteRow(this.deleteTargetRow);
      //
      for (i = 0; i < this.rows.length; i++) {
      if (this.rows[i] == this.deleteTargetRow) {
      this.deleteRow(i);
      break;
      }
      }
      // update the row background colors
      for (i = 0; i < this.rows.length; i++) {
      if (i % 2 == 0) {
      YAHOO.util.Dom.replaceClass(this.rows[i], 'yui-dt-odd', 'yui-dt-even');
      } else {
      YAHOO.util.Dom.replaceClass(this.rows[i], 'yui-dt-even', 'yui-dt-odd');
      }
      }
      } else {
      alert(r.message);
      }
      },
      failure: function (o) {
      alert(o.statusText);
      },
      scope:target.parentNode.parentNode
      },
      'query=' + YAHOO.Tools.JSONEncode({
      't': tableName,
      'act': 'd',
      'pk': recId
      })
      );
      }


      -----Original Message-----
      From: Satyam <satyam@...>
      Sent: Thursday, November 1, 2007 1:54pm
      To: ydn-javascript@yahoogroups.com
      Subject: Re: [ydn-javascript] DataTable, deleteRow problems

      Since dialogs return the result of the user reply via callbacks and those
      callbacks can have a different scope than the caller, I wonder if you are
      not losing the reference to the row to be deleted. That might explain why
      you got row zero deleted.

      How are you deleting rows? If you delete the actual HTML <tr>, you'll get
      the alternate coloring left with a hole, if you use deleteRow, then the
      DataTable fixes the colors.

      Satyam


      ----- Original Message -----
      From: "HoserMage" <david@...>
      To: <ydn-javascript@yahoogroups.com>
      Sent: Thursday, November 01, 2007 5:54 PM
      Subject: [ydn-javascript] DataTable, deleteRow problems


      >I had implemented a delete row column as described in part2 of the
      > blog entry. Instead of a confirm() call, I used a dialog. Then I
      > noticed that the deleteRow() was always deleting the first row in the
      > table, no matter which row I clicked on. I had to change my code to
      > loop through the rows in the table to find the index to pass to
      > deleteRow to make it work correctly.
      >
      > After that's working, I noticed another problem with delete rows in
      > the middle of the table... The alternating row backgrounds are now
      > messed up. After deleting the row, the program should walk through
      > the rest of the table to update the add/even class of the rows. I can
      > do that myself, but I thought it should be done automatically in the
      > next release.
      >
      >
      >
      >
      >
      > Yahoo! Groups Links
      >
      >
      >
      >
      >
      > --
      > No virus found in this incoming message.
      > Checked by AVG Free Edition.
      > Version: 7.5.503 / Virus Database: 269.15.17/1103 - Release Date:
      > 01/11/2007 6:01
      >
      >
    • Satyam
      ... From: To: Sent: Thursday, November 01, 2007 7:58 PM Subject: Re: [ydn-javascript] DataTable, deleteRow
      Message 2 of 4 , Nov 1, 2007
        ----- Original Message -----
        From: <david@...>
        To: <ydn-javascript@yahoogroups.com>
        Sent: Thursday, November 01, 2007 7:58 PM
        Subject: Re: [ydn-javascript] DataTable, deleteRow problems


        >I made sure that I save the target row in my DataTable object so I can
        >reference it later, and I made sure to set the scope of the asyncRequest to
        >be the DataTable object.
        >
        > Perhaps the target.parentNode.parentNode is the actual Table but not the
        > actual DataTable object.

        The target is an HTML element and so are their parents. I am not sure
        whether it would be the HTML table element or the tbody element, but neither
        is the DataTable object. The DataTable object and the HTML table element
        are two different things.

        Since you defined the callback functions as inner functions within the
        handleCellClick function, all variables declared within the outer function
        are available to the inner function so the handleYes function has access to
        variables target, record, column, recordId and even to the argument ev.
        There is no need for you to store the row to be deleted anywhere. Firebug
        usually doesn't show automatically these variables in the watch window, but
        if you add any of them manually, it will show its value.

        Based on your code, this is what I would try, I haven't tested it:

        this.handleCellClick = function(ev) {
        var target = YAHOO.util.Event.getTarget(ev);

        var column = this.getColumn(target);
        var record = this.getRecord(target);
        var dt = this;

        // Delete record
        if (column.key == 'delete') {
        YAHOO.util.Connect.asyncRequest(
        'POST',
        '/main/en/content/getjsondata',
        {
        success: function (o) {
        var r = YAHOO.Tools.JSONParse(o.responseText);
        if (r.status == 'Ok') {
        dt.deleteRow(target);

        You can save the reference to the datatable object which the listener to
        cellClickEvent receives as its scope, in a local variable, in this case
        'dt'. That variable 'dt' will be visible in all inner functions, just like
        'target'. Thus, you don't need to store anything anywhere nor adjust any
        scopes to keep the reference to the DataTable.

        Satyam



        >
        >
        > Here's the portion of my code that deals with it:
        >
        >
        > this.handleCellClick = function(ev) {
        > var target = YAHOO.util.Event.getTarget(ev);
        >
        > var column = this.getColumn(target);
        > var record = this.getRecord(target);
        >
        > // Delete record
        > if (column.key == 'delete') {
        > var recId = record.getData(tableName + 'Id');
        >
        > // save the reference to the row
        > target.parentNode.parentNode.deleteTargetRow = target.parentNode;
        >
        > var handleYes = function () {
        > YAHOO.util.Connect.asyncRequest(
        > 'POST',
        > '/main/en/content/getjsondata',
        > {
        > success: function (o) {
        > var r = YAHOO.Tools.JSONParse(o.responseText);
        > if (r.status == 'Ok') {
        >
        > // old code that doesn't work
        > //
        > // this.deleteRow(this.deleteTargetRow);
        > //
        > for (i = 0; i < this.rows.length; i++) {
        > if (this.rows[i] == this.deleteTargetRow) {
        > this.deleteRow(i);
        > break;
        > }
        > }
        > // update the row background colors
        > for (i = 0; i < this.rows.length; i++) {
        > if (i % 2 == 0) {
        >
        > YAHOO.util.Dom.replaceClass(this.rows[i], 'yui-dt-odd', 'yui-dt-even');
        > } else {
        >
        > YAHOO.util.Dom.replaceClass(this.rows[i], 'yui-dt-even', 'yui-dt-odd');
        > }
        > }
        > } else {
        > alert(r.message);
        > }
        > },
        > failure: function (o) {
        > alert(o.statusText);
        > },
        > scope:target.parentNode.parentNode
        > },
        > 'query=' + YAHOO.Tools.JSONEncode({
        > 't': tableName,
        > 'act': 'd',
        > 'pk': recId
        > })
        > );
        > }
        >
        >
        > -----Original Message-----
        > From: Satyam <satyam@...>
        > Sent: Thursday, November 1, 2007 1:54pm
        > To: ydn-javascript@yahoogroups.com
        > Subject: Re: [ydn-javascript] DataTable, deleteRow problems
        >
        > Since dialogs return the result of the user reply via callbacks and those
        > callbacks can have a different scope than the caller, I wonder if you are
        > not losing the reference to the row to be deleted. That might explain why
        > you got row zero deleted.
        >
        > How are you deleting rows? If you delete the actual HTML <tr>, you'll get
        > the alternate coloring left with a hole, if you use deleteRow, then the
        > DataTable fixes the colors.
        >
        > Satyam
        >
        >
        > ----- Original Message -----
        > From: "HoserMage" <david@...>
        > To: <ydn-javascript@yahoogroups.com>
        > Sent: Thursday, November 01, 2007 5:54 PM
        > Subject: [ydn-javascript] DataTable, deleteRow problems
        >
        >
        >>I had implemented a delete row column as described in part2 of the
        >> blog entry. Instead of a confirm() call, I used a dialog. Then I
        >> noticed that the deleteRow() was always deleting the first row in the
        >> table, no matter which row I clicked on. I had to change my code to
        >> loop through the rows in the table to find the index to pass to
        >> deleteRow to make it work correctly.
        >>
        >> After that's working, I noticed another problem with delete rows in
        >> the middle of the table... The alternating row backgrounds are now
        >> messed up. After deleting the row, the program should walk through
        >> the rest of the table to update the add/even class of the rows. I can
        >> do that myself, but I thought it should be done automatically in the
        >> next release.
        >>
        >>
        >>
        >>
        >>
        >> Yahoo! Groups Links
        >>
        >>
        >>
        >>
        >>
        >> --
        >> No virus found in this incoming message.
        >> Checked by AVG Free Edition.
        >> Version: 7.5.503 / Virus Database: 269.15.17/1103 - Release Date:
        >> 01/11/2007 6:01
        >>
        >>
        >
        >
        >
        >
        >
        >
        > Yahoo! Groups Links
        >
        >
        >
        >
        >
        > --
        > No virus found in this incoming message.
        > Checked by AVG Free Edition.
        > Version: 7.5.503 / Virus Database: 269.15.17/1103 - Release Date:
        > 01/11/2007 6:01
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.