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

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

Expand Messages
  • 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 1 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.