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

DataTable, deleteRow problems

Expand Messages
  • HoserMage
    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
    Message 1 of 4 , Nov 1, 2007
    • 0 Attachment
      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.
    • Satyam
      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
      Message 2 of 4 , Nov 1, 2007
      • 0 Attachment
        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
        >
        >
      • 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 3 of 4 , Nov 1, 2007
        • 0 Attachment
          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 4 of 4 , Nov 1, 2007
          • 0 Attachment
            ----- 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.