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

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

Expand Messages
  • 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 1 of 4 , Aug 1 9:29 PM
    • 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 2 of 4 , Aug 4 8:30 AM
      • 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.