YUI Datatable In A Panel Not Registering Events

Question

Hi all,

I have a datatable within a panel dialog. The datatable displays ok...however....no events are being registered, liked sort, row selection etc. Nothing at all. Not a sausage. If the datatable is not inside a panel then row selection, sorting etc. works perfectly fine.

Here is my code. I would be forever grateful if you could point me in the right direction.

YAHOO.util.Event.addListener(window, "load", function(){
function processPostpone(e)
{
   var dom = YAHOO.util.Dom;
   if(dom.get("user_rejected").value==3)
   {
    window.alert(dom.get("user_rejected_impossible").value);  
   }
   else
   {
     var elTarget = YAHOO.util.Event.getTarget(e);    
   var attendance_id = elTarget.id;
   attendance_id = attendance_id.substring(7, 15);
   var handleYes = function() {
    // postpone session
    var callback = {
      success : function(o) 
               {
                if(o.responseText=="true")
                {
                 // succesfully postponed session
                 var callback2 = 
                 {
                   success: function(o) 
                   {
                   try 
                {
                       messages = YAHOO.lang.JSON.parse(o.responseText);
                   }
                   catch (x) 
                   {
                       alert("JSON Parse failed!");
                       return;
                   }
                  if(messages.ResultSet.count > 0)
                  {
                   // there are some other available sessions
                    var columndefs = [
                                         {key:"name", label: "Session", sortable:false, resizeable:false},
                                         {key:"location", label: "Location", sortable:false, resizeable:false},
                                         {key:"start_date", label: "Start Date", sortable:false, resizeable:false}
                                        ];

                    var datasource = new YAHOO.util.DataSource(messages);
                    datasource.responseType = YAHOO.util.DataSource.TYPE_JSON;
                    datasource.responseSchema = {
                               resultsList: "ResultSet.Result",
                               fields: ["name","location","start_date"]
                       };

                        var datatable = new YAHOO.widget.DataTable("possibleSessionsDataTable", columndefs, datasource, {rowSingleSelect:true, zindex:999});
                    datatable.subscribe("rowMouseoverEvent", datatable.onEventHighlightRow);
                    datatable.subscribe("rowMouseoutEvent", datatable.onEventUnhighlightRow);
                    datatable.subscribe("rowClickEvent", datatable.onEventSelectRow);
                    datatable.focus();

              var handleSubmit = function() {
              // test
              alert('You clicked submit');
              }

                 var panel = new YAHOO.widget.Panel("panel2", { width:"600px", visible:false,  modal: false, fixedCenter: true, draggable:false, close:false } );
              panel.setHeader("Other Sessions You May Be Able To Attend");
              panel.setBody(dom.get("other_possible_sessions").innerHTML);
                 panel.setFooter('<div id="panelFooter"></div>');

                 panel.showEvent.subscribe(function() {
                        var button1 = new YAHOO.widget.Button({
                            type: 'button',
                            label: 'Submit',
                            container: 'panelFooter'
                        });                           
                        button1.on("click", handleSubmit);
                 }, panel, true);

              panel.render("container");
              panel.show();
                  }
                   },
                   failure: function(o)
                   {

                   }
                  }
           var conn = YAHOO.util.Connect.asyncRequest("POST", "/ajax/possiblesessions.json?id=" + attendance_id, callback2);
                 }
                 else
                 {
                  window.alert("Sorry, there was an error.");
                 }
                },
                failure : function(o) 
                {
                 window.alert("Sorry, there was an error.");
                }
            }
    var conn = YAHOO.util.Connect.asyncRequest("POST", "/ajax/postponesession.json?id=" + attendance_id, callback);

    var loading = new YAHOO.widget.Panel("wait",  
      { width:"300px", 
        fixedcenter:true, 
        close:false, 
        draggable:true, 
        zindex:4,
        modal:false,
        visible:false
      } 
     );
   this.hide();

   /*loading.setHeader("Rejecting session...");
   loading.setBody('<img src="http://l.yimg.com/a/i/us/per/gr/gp/rel_interstitial_loading.gif" />');
   loading.render(document.body);
   loading.show();*/
   };

   var handleNo = function() {
    this.hide();
   };

   var dialog  =  new YAHOO.widget.SimpleDialog("dialog", 
       { width: "300px",
         fixedcenter: true,
         visible: false,
         draggable: false,
         close: true,
         text: document.getElementById("reject_alert_text").innerHTML,
         modal: false,
         icon: YAHOO.widget.SimpleDialog.ICON_HELP,
         constraintoviewport: true,
         buttons: [ { text:"Yes", handler:handleYes, isDefault:true },
           { text:"No",  handler:handleNo } ]
       } );
   dialog.setHeader("Reject session?");
   // Render the Dialog
   dialog.render(document.body);
   dialog.show();
   } 
}
// create postpone button
var elms = YAHOO.util.Dom.getElementsByClassName("reject");

// loop over all the elements and attach a click event
for(var i=0,j=elms.length;i<j;i++)
{
 var el = document.getElementById(elms[i].id);
 YAHOO.util.Event.addListener(el, "click", processPostpone);
} 

var tabView = new YAHOO.widget.TabView('tabs');

});

I apologise for the longcode snippet.

Thank you in advance.

Answer 1

Although I can't tell the exact problem from the code snippet you have provided I'll take an educated guess and suggest you are probably dealing with scope issues.

In other words it might not be that there are no events being fired but rather the functions attached to them are out of scope, or the functionally in the callbacks is failing because of out of scope variables. (YUI can sometimes suppress errors with events)

Many yui functions take a third and forth argument that let's you specify the scope the callback is executed in. eg.

obj.subscribe("onEvent", this.onEvent, this, true);

The above snippet will set 'this' in onEvent to the current value of this, probably the current object.

I would start by looking at the scope your call back functions are executed under. Try console.log(this); You may find it's not what you where expecting.