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

Issue deploying context menu on datatable during "re-render"

Expand Messages
  • no3h19c17_x2012x
    Hello, I ve run into an issue when deploying a context menu on a datatable. Please see the sequence of events noted below:
    Message 1 of 4 , Jul 31, 2008
    • 0 Attachment
      Hello,

      I've run into an issue when deploying a context menu on a datatable.

      Please see the sequence of events noted below:
      ========================================
      1. User submits search criteria which is passed to php logic in
      another file. This php file returns a query result set as a JSON string.

      2. The resulting JSON string is used to populate the datatable.

      3. When a datatable row is right-clicked a "Delete Review" context
      menu is generated.

      4. Upon clicking the "Delete Review" context menu, the
      deleteReviewLaunch function is called to handle deleting the selected
      record in the DB backend and removing the record from the presently
      rendered datatable.

      The above sequence of events works perfectly fine unless, the
      drawReviewHistoryTable function is run more then once. If the
      drawReviewHistoryTable function is run more than once ( i.e. the user
      runs another search ), the datatable and context menu will "re-render"
      fine but the context menu will no longer respond the the subscribed
      click event to launch the deleteReviewLaunch function.

      Excerpt of page showing code used to "draw" the datable.
      ========================================
      function drawReviewHistoryTable()
      {
      // Delete Review Function
      deleteReviewLaunch = function(p_sType, p_aArgs, p_myDataTable) {

      var task = p_aArgs[1];
      if(task) {
      // Extract the table row element that triggered the
      context menu event.
      var elRow = this.contextEventTarget;
      elRow = p_myDataTable.getTrEl(elRow);
      var deleteReviewRecord = p_myDataTable.getRecord(elRow);
      var deleteReviewID =
      deleteReviewRecord.getData("ReviewID");
      if (confirm('Are you sure?')) {
      alert(deleteReviewID);
      YAHOO.util.Connect.asyncRequest(
      'GET',
      'deleteReview.php?ReviewID=' + deleteReviewID,
      {
      success: function (o) {
      if (o.responseText == 'Deleted.') {
      alert("Review Deleted");
      } else {
      alert(o.responseText);
      }
      p_myDataTable.deleteRow(elRow);
      },
      failure: function (o) {
      alert("Error deleting review. Status code:
      " + o.status + " Response text: " + o.statusText );
      },
      scope:this
      }
      )
      }
      }
      };

      var jtss_id = document.search_reviews.tss_id.value;
      var jstart_date = document.search_reviews.start_date.value;
      var jend_date = document.search_reviews.end_date.value;

      var url="reviewHistoryJSON.php"
      url=url+"?tss_id="+jtss_id
      url=url+"&start_date="+jstart_date
      url=url+"&end_date="+jend_date
      url=url+"?"

      var revHistoryDataSource = new YAHOO.util.DataSource(url, {
      responseType: YAHOO.util.DataSource.TYPE_JSON,
      responseSchema: {
      resultsList: 'data',
      fields: [
      'ReviewID',
      'Ticket',
      'ShortDesc',
      'TicketProblem',
      'Recommendation',
      'Reviewer'
      ]
      }
      });

      var revHistoryColumns = [
      {key: 'Ticket', label: 'Ticket', sortable:true},
      {key: 'ShortDesc', label: 'ShortDescription', sortable:true,
      resizeable:true},
      {key: 'TicketProblem', label: 'TicketProblem', sortable:true},
      {key: 'Recommendation', label: 'Recommendation', sortable:true,
      resizeable:true},
      {key: 'Reviewer', sortable:true}
      ];


      var revHistoryTable = new YAHOO.widget.DataTable('revHistoryDisplay',
      revHistoryColumns, revHistoryDataSource, {draggableColumns:true});

      // Enables row within datatable highlighting
      revHistoryTable.subscribe("rowMouseoverEvent",
      revHistoryTable.onEventHighlightRow);
      revHistoryTable.subscribe("rowMouseoutEvent",
      revHistoryTable.onEventUnhighlightRow);

      revHistoryMenu = new YAHOO.widget.ContextMenu("mycontextmenu",
      {trigger:revHistoryTable.getTbodyEl()});
      revHistoryMenu.addItem("Delete Review");
      revHistoryMenu.render("revHistoryDisplay");

      revHistoryMenu.clickEvent.subscribe(deleteReviewLaunch, revHistoryTable);

      revHistoryTable.subscribe('cellClickEvent',function(ev) {
      var target = YAHOO.util.Event.getTarget(ev);
      var column = revHistoryTable.getColumn(target);
      var cell = revHistoryTable.getRecord(target);
      var cellData = cell.getData("Ticket");
      if (column.key == 'Ticket') {

      window.open('http://ts-ws5:8081/Logix/TicketViewresults.aspx?ticketnumber='
      + cellData);
      } else {
      revHistoryTable.onEventShowCellEditor(ev);
      }
      });
      }
      ========================================

      Any input on this would be greatly appreciated, this has been haunting
      me for the past week.

      Thanks in advance.
    • Todd Kloots
      Hi. I would try calling the ContextMenu instance s destroy method before the call to drawReviewHistoryTable . That should fix the problem.
      Message 2 of 4 , Aug 1, 2008
      • 0 Attachment
        Hi. I would try calling the ContextMenu instance's "destroy" method
        before the call to "drawReviewHistoryTable". That should fix the problem.

        no3h19c17_x2012x wrote:
        >
        > Hello,
        >
        > I've run into an issue when deploying a context menu on a datatable.
        >
        > Please see the sequence of events noted below:
        > ========================================
        > 1. User submits search criteria which is passed to php logic in
        > another file. This php file returns a query result set as a JSON string.
        >
        > 2. The resulting JSON string is used to populate the datatable.
        >
        > 3. When a datatable row is right-clicked a "Delete Review" context
        > menu is generated.
        >
        > 4. Upon clicking the "Delete Review" context menu, the
        > deleteReviewLaunch function is called to handle deleting the selected
        > record in the DB backend and removing the record from the presently
        > rendered datatable.
        >
        > The above sequence of events works perfectly fine unless, the
        > drawReviewHistoryTable function is run more then once. If the
        > drawReviewHistoryTable function is run more than once ( i.e. the user
        > runs another search ), the datatable and context menu will "re-render"
        > fine but the context menu will no longer respond the the subscribed
        > click event to launch the deleteReviewLaunch function.
        >
        > Excerpt of page showing code used to "draw" the datable.
        > ========================================
        > function drawReviewHistoryTable()
        > {
        > // Delete Review Function
        > deleteReviewLaunch = function(p_sType, p_aArgs, p_myDataTable) {
        >
        > var task = p_aArgs[1];
        > if(task) {
        > // Extract the table row element that triggered the
        > context menu event.
        > var elRow = this.contextEventTarget;
        > elRow = p_myDataTable.getTrEl(elRow);
        > var deleteReviewRecord = p_myDataTable.getRecord(elRow);
        > var deleteReviewID =
        > deleteReviewRecord.getData("ReviewID");
        > if (confirm('Are you sure?')) {
        > alert(deleteReviewID);
        > YAHOO.util.Connect.asyncRequest(
        > 'GET',
        > 'deleteReview.php?ReviewID=' + deleteReviewID,
        > {
        > success: function (o) {
        > if (o.responseText == 'Deleted.') {
        > alert("Review Deleted");
        > } else {
        > alert(o.responseText);
        > }
        > p_myDataTable.deleteRow(elRow);
        > },
        > failure: function (o) {
        > alert("Error deleting review. Status code:
        > " + o.status + " Response text: " + o.statusText );
        > },
        > scope:this
        > }
        > )
        > }
        > }
        > };
        >
        > var jtss_id = document.search_reviews.tss_id.value;
        > var jstart_date = document.search_reviews.start_date.value;
        > var jend_date = document.search_reviews.end_date.value;
        >
        > var url="reviewHistoryJSON.php"
        > url=url+"?tss_id="+jtss_id
        > url=url+"&start_date="+jstart_date
        > url=url+"&end_date="+jend_date
        > url=url+"?"
        >
        > var revHistoryDataSource = new YAHOO.util.DataSource(url, {
        > responseType: YAHOO.util.DataSource.TYPE_JSON,
        > responseSchema: {
        > resultsList: 'data',
        > fields: [
        > 'ReviewID',
        > 'Ticket',
        > 'ShortDesc',
        > 'TicketProblem',
        > 'Recommendation',
        > 'Reviewer'
        > ]
        > }
        > });
        >
        > var revHistoryColumns = [
        > {key: 'Ticket', label: 'Ticket', sortable:true},
        > {key: 'ShortDesc', label: 'ShortDescription', sortable:true,
        > resizeable:true},
        > {key: 'TicketProblem', label: 'TicketProblem', sortable:true},
        > {key: 'Recommendation', label: 'Recommendation', sortable:true,
        > resizeable:true},
        > {key: 'Reviewer', sortable:true}
        > ];
        >
        > var revHistoryTable = new YAHOO.widget.DataTable('revHistoryDisplay',
        > revHistoryColumns, revHistoryDataSource, {draggableColumns:true});
        >
        > // Enables row within datatable highlighting
        > revHistoryTable.subscribe("rowMouseoverEvent",
        > revHistoryTable.onEventHighlightRow);
        > revHistoryTable.subscribe("rowMouseoutEvent",
        > revHistoryTable.onEventUnhighlightRow);
        >
        > revHistoryMenu = new YAHOO.widget.ContextMenu("mycontextmenu",
        > {trigger:revHistoryTable.getTbodyEl()});
        > revHistoryMenu.addItem("Delete Review");
        > revHistoryMenu.render("revHistoryDisplay");
        >
        > revHistoryMenu.clickEvent.subscribe(deleteReviewLaunch, revHistoryTable);
        >
        > revHistoryTable.subscribe('cellClickEvent',function(ev) {
        > var target = YAHOO.util.Event.getTarget(ev);
        > var column = revHistoryTable.getColumn(target);
        > var cell = revHistoryTable.getRecord(target);
        > var cellData = cell.getData("Ticket");
        > if (column.key == 'Ticket') {
        >
        > window.open('http://ts-ws5:8081/Logix/TicketViewresults.aspx?ticketnumber=
        > <http://ts-ws5:8081/Logix/TicketViewresults.aspx?ticketnumber=>'
        > + cellData);
        > } else {
        > revHistoryTable.onEventShowCellEditor(ev);
        > }
        > });
        > }
        > ========================================
        >
        > Any input on this would be greatly appreciated, this has been haunting
        > me for the past week.
        >
        > Thanks in advance.
        >
        >
      • no3h19c17_x2012x
        Thanks for the input Todd. I had attempted that previously by implementing the following, where the searchHistory function is called by the user submitting
        Message 3 of 4 , Aug 1, 2008
        • 0 Attachment
          Thanks for the input Todd. I had attempted that previously by
          implementing the following, where the searchHistory function is called
          by the user submitting their search criteria. However, this prevents
          the datatable from rendering entirely, I think that is because both
          elements ( context menu and datatable ) are rendered within the same
          div. Maybe I have missed interpreted your suggestion. What are your
          thoughts? Thanks in advance.

          Code:
          =======
          function searchHistory()
          {
          revHistoryMenu.destroy();
          drawReviewHistoryTable();
          }
          =======

          --- In ydn-javascript@yahoogroups.com, Todd Kloots <kloots@...> wrote:
          >
          > Hi. I would try calling the ContextMenu instance's "destroy" method
          > before the call to "drawReviewHistoryTable". That should fix the
          problem.
          >
          > no3h19c17_x2012x wrote:
          > >
          > > Hello,
          > >
          > > I've run into an issue when deploying a context menu on a datatable.
          > >
          > > Please see the sequence of events noted below:
          > > ========================================
          > > 1. User submits search criteria which is passed to php logic in
          > > another file. This php file returns a query result set as a JSON
          string.
          > >
          > > 2. The resulting JSON string is used to populate the datatable.
          > >
          > > 3. When a datatable row is right-clicked a "Delete Review" context
          > > menu is generated.
          > >
          > > 4. Upon clicking the "Delete Review" context menu, the
          > > deleteReviewLaunch function is called to handle deleting the selected
          > > record in the DB backend and removing the record from the presently
          > > rendered datatable.
          > >
          > > The above sequence of events works perfectly fine unless, the
          > > drawReviewHistoryTable function is run more then once. If the
          > > drawReviewHistoryTable function is run more than once ( i.e. the user
          > > runs another search ), the datatable and context menu will "re-render"
          > > fine but the context menu will no longer respond the the subscribed
          > > click event to launch the deleteReviewLaunch function.
          > >
          > > Excerpt of page showing code used to "draw" the datable.
          > > ========================================
          > > function drawReviewHistoryTable()
          > > {
          > > // Delete Review Function
          > > deleteReviewLaunch = function(p_sType, p_aArgs, p_myDataTable) {
          > >
          > > var task = p_aArgs[1];
          > > if(task) {
          > > // Extract the table row element that triggered the
          > > context menu event.
          > > var elRow = this.contextEventTarget;
          > > elRow = p_myDataTable.getTrEl(elRow);
          > > var deleteReviewRecord = p_myDataTable.getRecord(elRow);
          > > var deleteReviewID =
          > > deleteReviewRecord.getData("ReviewID");
          > > if (confirm('Are you sure?')) {
          > > alert(deleteReviewID);
          > > YAHOO.util.Connect.asyncRequest(
          > > 'GET',
          > > 'deleteReview.php?ReviewID=' + deleteReviewID,
          > > {
          > > success: function (o) {
          > > if (o.responseText == 'Deleted.') {
          > > alert("Review Deleted");
          > > } else {
          > > alert(o.responseText);
          > > }
          > > p_myDataTable.deleteRow(elRow);
          > > },
          > > failure: function (o) {
          > > alert("Error deleting review. Status code:
          > > " + o.status + " Response text: " + o.statusText );
          > > },
          > > scope:this
          > > }
          > > )
          > > }
          > > }
          > > };
          > >
          > > var jtss_id = document.search_reviews.tss_id.value;
          > > var jstart_date = document.search_reviews.start_date.value;
          > > var jend_date = document.search_reviews.end_date.value;
          > >
          > > var url="reviewHistoryJSON.php"
          > > url=url+"?tss_id="+jtss_id
          > > url=url+"&start_date="+jstart_date
          > > url=url+"&end_date="+jend_date
          > > url=url+"?"
          > >
          > > var revHistoryDataSource = new YAHOO.util.DataSource(url, {
          > > responseType: YAHOO.util.DataSource.TYPE_JSON,
          > > responseSchema: {
          > > resultsList: 'data',
          > > fields: [
          > > 'ReviewID',
          > > 'Ticket',
          > > 'ShortDesc',
          > > 'TicketProblem',
          > > 'Recommendation',
          > > 'Reviewer'
          > > ]
          > > }
          > > });
          > >
          > > var revHistoryColumns = [
          > > {key: 'Ticket', label: 'Ticket', sortable:true},
          > > {key: 'ShortDesc', label: 'ShortDescription', sortable:true,
          > > resizeable:true},
          > > {key: 'TicketProblem', label: 'TicketProblem', sortable:true},
          > > {key: 'Recommendation', label: 'Recommendation', sortable:true,
          > > resizeable:true},
          > > {key: 'Reviewer', sortable:true}
          > > ];
          > >
          > > var revHistoryTable = new YAHOO.widget.DataTable('revHistoryDisplay',
          > > revHistoryColumns, revHistoryDataSource, {draggableColumns:true});
          > >
          > > // Enables row within datatable highlighting
          > > revHistoryTable.subscribe("rowMouseoverEvent",
          > > revHistoryTable.onEventHighlightRow);
          > > revHistoryTable.subscribe("rowMouseoutEvent",
          > > revHistoryTable.onEventUnhighlightRow);
          > >
          > > revHistoryMenu = new YAHOO.widget.ContextMenu("mycontextmenu",
          > > {trigger:revHistoryTable.getTbodyEl()});
          > > revHistoryMenu.addItem("Delete Review");
          > > revHistoryMenu.render("revHistoryDisplay");
          > >
          > > revHistoryMenu.clickEvent.subscribe(deleteReviewLaunch,
          revHistoryTable);
          > >
          > > revHistoryTable.subscribe('cellClickEvent',function(ev) {
          > > var target = YAHOO.util.Event.getTarget(ev);
          > > var column = revHistoryTable.getColumn(target);
          > > var cell = revHistoryTable.getRecord(target);
          > > var cellData = cell.getData("Ticket");
          > > if (column.key == 'Ticket') {
          > >
          > >
          window.open('http://ts-ws5:8081/Logix/TicketViewresults.aspx?ticketnumber=

          > > <http://ts-ws5:8081/Logix/TicketViewresults.aspx?ticketnumber=>'
          > > + cellData);
          > > } else {
          > > revHistoryTable.onEventShowCellEditor(ev);
          > > }
          > > });
          > > }
          > > ========================================
          > >
          > > Any input on this would be greatly appreciated, this has been haunting
          > > me for the past week.
          > >
          > > Thanks in advance.
          > >
          > >
          >
        • Todd Kloots
          Hmm. Not sure what is going on here the. Can you send me a URL to some functioning code, so that I can take a look? If you don t want to send the URL to the
          Message 4 of 4 , Aug 4, 2008
          • 0 Attachment
            Hmm. Not sure what is going on here the. Can you send me a URL to some
            functioning code, so that I can take a look? If you don't want to send
            the URL to the Y! Group, feel free to contact me directly.

            - Todd

            no3h19c17_x2012x wrote:
            >
            > Thanks for the input Todd. I had attempted that previously by
            > implementing the following, where the searchHistory function is called
            > by the user submitting their search criteria. However, this prevents
            > the datatable from rendering entirely, I think that is because both
            > elements ( context menu and datatable ) are rendered within the same
            > div. Maybe I have missed interpreted your suggestion. What are your
            > thoughts? Thanks in advance.
            >
            > Code:
            > =======
            > function searchHistory()
            > {
            > revHistoryMenu.destroy();
            > drawReviewHistoryTable();
            > }
            > =======
            >
            > --- In ydn-javascript@yahoogroups.com
            > <mailto:ydn-javascript%40yahoogroups.com>, Todd Kloots <kloots@...> wrote:
            > >
            > > Hi. I would try calling the ContextMenu instance's "destroy" method
            > > before the call to "drawReviewHistoryTable". That should fix the
            > problem.
            > >
            > > no3h19c17_x2012x wrote:
            > > >
            > > > Hello,
            > > >
            > > > I've run into an issue when deploying a context menu on a datatable.
            > > >
            > > > Please see the sequence of events noted below:
            > > > ========================================
            > > > 1. User submits search criteria which is passed to php logic in
            > > > another file. This php file returns a query result set as a JSON
            > string.
            > > >
            > > > 2. The resulting JSON string is used to populate the datatable.
            > > >
            > > > 3. When a datatable row is right-clicked a "Delete Review" context
            > > > menu is generated.
            > > >
            > > > 4. Upon clicking the "Delete Review" context menu, the
            > > > deleteReviewLaunch function is called to handle deleting the selected
            > > > record in the DB backend and removing the record from the presently
            > > > rendered datatable.
            > > >
            > > > The above sequence of events works perfectly fine unless, the
            > > > drawReviewHistoryTable function is run more then once. If the
            > > > drawReviewHistoryTable function is run more than once ( i.e. the user
            > > > runs another search ), the datatable and context menu will "re-render"
            > > > fine but the context menu will no longer respond the the subscribed
            > > > click event to launch the deleteReviewLaunch function.
            > > >
            > > > Excerpt of page showing code used to "draw" the datable.
            > > > ========================================
            > > > function drawReviewHistoryTable()
            > > > {
            > > > // Delete Review Function
            > > > deleteReviewLaunch = function(p_sType, p_aArgs, p_myDataTable) {
            > > >
            > > > var task = p_aArgs[1];
            > > > if(task) {
            > > > // Extract the table row element that triggered the
            > > > context menu event.
            > > > var elRow = this.contextEventTarget;
            > > > elRow = p_myDataTable.getTrEl(elRow);
            > > > var deleteReviewRecord = p_myDataTable.getRecord(elRow);
            > > > var deleteReviewID =
            > > > deleteReviewRecord.getData("ReviewID");
            > > > if (confirm('Are you sure?')) {
            > > > alert(deleteReviewID);
            > > > YAHOO.util.Connect.asyncRequest(
            > > > 'GET',
            > > > 'deleteReview.php?ReviewID=' + deleteReviewID,
            > > > {
            > > > success: function (o) {
            > > > if (o.responseText == 'Deleted.') {
            > > > alert("Review Deleted");
            > > > } else {
            > > > alert(o.responseText);
            > > > }
            > > > p_myDataTable.deleteRow(elRow);
            > > > },
            > > > failure: function (o) {
            > > > alert("Error deleting review. Status code:
            > > > " + o.status + " Response text: " + o.statusText );
            > > > },
            > > > scope:this
            > > > }
            > > > )
            > > > }
            > > > }
            > > > };
            > > >
            > > > var jtss_id = document.search_reviews.tss_id.value;
            > > > var jstart_date = document.search_reviews.start_date.value;
            > > > var jend_date = document.search_reviews.end_date.value;
            > > >
            > > > var url="reviewHistoryJSON.php"
            > > > url=url+"?tss_id="+jtss_id
            > > > url=url+"&start_date="+jstart_date
            > > > url=url+"&end_date="+jend_date
            > > > url=url+"?"
            > > >
            > > > var revHistoryDataSource = new YAHOO.util.DataSource(url, {
            > > > responseType: YAHOO.util.DataSource.TYPE_JSON,
            > > > responseSchema: {
            > > > resultsList: 'data',
            > > > fields: [
            > > > 'ReviewID',
            > > > 'Ticket',
            > > > 'ShortDesc',
            > > > 'TicketProblem',
            > > > 'Recommendation',
            > > > 'Reviewer'
            > > > ]
            > > > }
            > > > });
            > > >
            > > > var revHistoryColumns = [
            > > > {key: 'Ticket', label: 'Ticket', sortable:true},
            > > > {key: 'ShortDesc', label: 'ShortDescription', sortable:true,
            > > > resizeable:true},
            > > > {key: 'TicketProblem', label: 'TicketProblem', sortable:true},
            > > > {key: 'Recommendation', label: 'Recommendation', sortable:true,
            > > > resizeable:true},
            > > > {key: 'Reviewer', sortable:true}
            > > > ];
            > > >
            > > > var revHistoryTable = new YAHOO.widget.DataTable('revHistoryDisplay',
            > > > revHistoryColumns, revHistoryDataSource, {draggableColumns:true});
            > > >
            > > > // Enables row within datatable highlighting
            > > > revHistoryTable.subscribe("rowMouseoverEvent",
            > > > revHistoryTable.onEventHighlightRow);
            > > > revHistoryTable.subscribe("rowMouseoutEvent",
            > > > revHistoryTable.onEventUnhighlightRow);
            > > >
            > > > revHistoryMenu = new YAHOO.widget.ContextMenu("mycontextmenu",
            > > > {trigger:revHistoryTable.getTbodyEl()});
            > > > revHistoryMenu.addItem("Delete Review");
            > > > revHistoryMenu.render("revHistoryDisplay");
            > > >
            > > > revHistoryMenu.clickEvent.subscribe(deleteReviewLaunch,
            > revHistoryTable);
            > > >
            > > > revHistoryTable.subscribe('cellClickEvent',function(ev) {
            > > > var target = YAHOO.util.Event.getTarget(ev);
            > > > var column = revHistoryTable.getColumn(target);
            > > > var cell = revHistoryTable.getRecord(target);
            > > > var cellData = cell.getData("Ticket");
            > > > if (column.key == 'Ticket') {
            > > >
            > > >
            > window.open('http://ts-ws5:8081/Logix/TicketViewresults.aspx?ticketnumber=
            > <http://ts-ws5:8081/Logix/TicketViewresults.aspx?ticketnumber=>
            >
            > > > <http://ts-ws5:8081/Logix/TicketViewresults.aspx?ticketnumber=
            > <http://ts-ws5:8081/Logix/TicketViewresults.aspx?ticketnumber=>>'
            > > > + cellData);
            > > > } else {
            > > > revHistoryTable.onEventShowCellEditor(ev);
            > > > }
            > > > });
            > > > }
            > > > ========================================
            > > >
            > > > Any input on this would be greatly appreciated, this has been haunting
            > > > me for the past week.
            > > >
            > > > Thanks in advance.
            > > >
            > > >
            > >
            >
            >
          Your message has been successfully submitted and would be delivered to recipients shortly.