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

Re: [ydn-javascript] Issue deploying context menu on datatable during "re-render"

Expand Messages
  • Todd Kloots
    Hi. I would try calling the ContextMenu instance s destroy method before the call to drawReviewHistoryTable . That should fix the problem.
    Message 1 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 2 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 3 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.