Help with ContentPane - AMD

[bobcarr]

Re-doing our web application to use the AMD style, I have one function which throws a type error on its first call.  On subsequent calls, the content pane appears in the dialog box.  Prior to implementing AMD (and setting "asynch:true"), the function always returned a content pane without error.

The type error showing the variable 'lscapp.cp' as undefined is thrown from the last statement in the function shown below.

I am thinking that dojo/Deferred might resolve this, but even after reading related posts here and at the Dojo site, I'm not sure how to get the appropriate return value passed to the calling function.

function getTextContent(graphic) {     require (["dojox/xml/DomParser",        "dojox/xml/parser",        "dojo/date/locale",        "dijit/layout/ContentPane",        "dijit/layout/TabContainer"],     function (DomParser,parser,locale,       ContentPane,TabContainer) {                  if(dijit.byId('wscontpane')){            dijit.byId('wscontpane').destroy();        }        var partners = graphic.attributes.KNOWN_PARTNERS;        var estCompDate;        var estCost;              if (!graphic.attributes.ESTIMATED_COMPLETION_DATE == '') {             estCompDate = new Date(graphic.attributes.ESTIMATED_COMPLETION_DATE);            estCompDate = locale.format(estCompDate, {               selector: 'date',               datePattern: 'MMMM d, y'             });         }         else {             estCompDate = '';         }             if (!graphic.attributes.ESSENTIAL_PROJECT_EST_COST == '') {              estCost = '$' + dojo.number.format(graphic.attributes.ESSENTIAL_PROJECT_EST_COST)         }         else {            estCost = '';         }                  var jsdom = DomParser.parse(partners);         //console.debug(jsdom);              var docNode = jsdom.documentElement;          partners = "";         if (docNode) {             var nodestoprocess = docNode.childNodes;             for (var i = 0; i < nodestoprocess.length; i++) {                 partners += parser.textContent(docNode.childNodes.childNodes[0]) +                 "<br/>" ;            }         }              lscapp.cp = new ContentPane({          id: 'wscontpane',          isContainer:true,          content:'<b>' + graphic.attributes.FOREST_NAME + '</b><br />' +             '<b>' + graphic.attributes.WATERSHED_NAME + '<hr>'},          dojo.create('div'));         var tc = new TabContainer({            id:'wsTabCont',            style: 'width:350px;height:264px;line-height:150%;' +            'font-family: Verdana,Arial,Helvetica,sans-serif;'},             dojo.create('div'));                      var pane1 = new ContentPane({            title:'Abstract',            id:'wstab1',            content:'<b>Watershed Code: </b>' + graphic.attributes.WATERSHED_CODE + '<br />' +               '<b>Total Acres: </b>' + dojo.number.format(graphic.attributes.TOTAL_WATERSHED_AREA_ACRES,               {places:0}) + '<br />' +               '<b>Forest Service Ownership: </b>' + graphic.attributes.FS_OWNERSHIP_PERCENT + '%<br />' +               '<b>Condition - Forest Service Area: </b>' +                graphic.attributes.WATERSHED_CONDITION_FS_AREA + '<br />' +              '<b>Year Identified: </b>' + graphic.attributes.YEAR_PRIORITY_IDENTIFIED + '<br />' +              '<b>Estimated Completion Date: </b>' + estCompDate + '<br />' +              '<b>Estimated Cost: </b>' + estCost                   });       dojo.addClass(pane1.domNode, "wstab");       var pane2 = new ContentPane({         title:'Conditions',         id:'wstab2',         content:'<b>Aquatic Habitat: </b>' + graphic.attributes.AQUATIC_HABITAT_CONDITION + '<br />' +             '<b>Aquatic Biota: </b>' + graphic.attributes.AQUATIC_BIOTA_CONDITION  + '<br />' +             '<b>Water Quality: </b>' + graphic.attributes.WATER_QUALITY_CONDITION + '<br />' +             '<b>Water Quantity: </b>' + graphic.attributes.WATER_QUANTITY_CONDITION + '<br />' +             '<b>Wetland Vegetation: </b>' +              graphic.attributes.RIPARIAN_WETLAND_VEG_CONDITION + '<br />' +             '<b>Forest Cover: </b>' + graphic.attributes.FOREST_COVER_CONDITION + '<br />' +             '<b>Forest Health: </b>' + graphic.attributes.FOREST_HEALTH_CONDITION + '<br />' +             '<b>Soil: </b>' + graphic.attributes.SOIL_CONDITION + '<br />' +             '<b>Roads and Trails: </b>' + graphic.attributes.ROADS_AND_TRAILS_CONDITION         });     dojo.addClass(pane2.domNode, "wstab");      var pane3 = new ContentPane({        title:'Justification',        id:'wstab3',        style:'line-height:125%; margin:10px',        content: graphic.attributes.SELECTION_NARRATIVE       });     dojo.addClass(pane3.domNode, "wstab");      var pane4 = new ContentPane({        title:'Partners',        id:'wstab4',        content: partners       });      dojo.addClass(pane4.domNode, "wstab");     tc.addChild(pane1);     tc.addChild(pane2);     tc.addChild(pane3);     tc.addChild(pane4);     tc.startup();     lscapp.cp.addChild(tc);     lscapp.cp.startup();             });       return lscapp.cp.domNode;

}

[VinayBansal]

Move return inside the function, see last line of code

function getTextContent(graphic) {
    require (["dojox/xml/DomParser",
       "dojox/xml/parser",
       "dojo/date/locale",
       "dijit/layout/ContentPane",
       "dijit/layout/TabContainer"], 
   function (DomParser,parser,locale,
      ContentPane,TabContainer) { 
        
       if(dijit.byId('wscontpane')){
           dijit.byId('wscontpane').destroy();
       }
       var partners = graphic.attributes.KNOWN_PARTNERS;
       var estCompDate;
       var estCost;
     
       if (!graphic.attributes.ESTIMATED_COMPLETION_DATE == '') { 
           estCompDate = new Date(graphic.attributes.ESTIMATED_COMPLETION_DATE);
           estCompDate = locale.format(estCompDate, {
              selector: 'date',
              datePattern: 'MMMM d, y' 
           });
        }
        else {
            estCompDate = '';
        }
   
        if (!graphic.attributes.ESSENTIAL_PROJECT_EST_COST == '') { 
            estCost = '$' + dojo.number.format(graphic.attributes.ESSENTIAL_PROJECT_EST_COST)
        }
        else {
           estCost = '';
        }
   
    
        var jsdom = DomParser.parse(partners);
        //console.debug(jsdom);
    
        var docNode = jsdom.documentElement; 
        partners = "";
        if (docNode) {
            var nodestoprocess = docNode.childNodes;
            for (var i = 0; i < nodestoprocess.length; i++) {
                partners += parser.textContent(docNode.childNodes.childNodes[0]) +
                "<br/>" ;
           }
        }
     
       lscapp.cp = new ContentPane({
         id: 'wscontpane',
         isContainer:true,
         content:'<b>' + graphic.attributes.FOREST_NAME + '</b><br />' +
            '<b>' + graphic.attributes.WATERSHED_NAME + '<hr>'},
         dojo.create('div'));

       var tc = new TabContainer({
           id:'wsTabCont',
           style: 'width:350px;height:264px;line-height:150%;' +
           'font-family: Verdana,Arial,Helvetica,sans-serif;'},
            dojo.create('div'));
        
    
       var pane1 = new ContentPane({
           title:'Abstract',
           id:'wstab1',
           content:'<b>Watershed Code: </b>' + graphic.attributes.WATERSHED_CODE + '<br />' +
              '<b>Total Acres: </b>' + dojo.number.format(graphic.attributes.TOTAL_WATERSHED_AREA_ACRES,
              {places:0}) + '<br />' +
              '<b>Forest Service Ownership: </b>' + graphic.attributes.FS_OWNERSHIP_PERCENT + '%<br />' +
              '<b>Condition - Forest Service Area: </b>' + 
              graphic.attributes.WATERSHED_CONDITION_FS_AREA + '<br />' +
             '<b>Year Identified: </b>' + graphic.attributes.YEAR_PRIORITY_IDENTIFIED + '<br />' +
             '<b>Estimated Completion Date: </b>' + estCompDate + '<br />' +
             '<b>Estimated Cost: </b>' + estCost 
          
      });
      dojo.addClass(pane1.domNode, "wstab");
      var pane2 = new ContentPane({
        title:'Conditions',
        id:'wstab2',
        content:'<b>Aquatic Habitat: </b>' + graphic.attributes.AQUATIC_HABITAT_CONDITION + '<br />' +
            '<b>Aquatic Biota: </b>' + graphic.attributes.AQUATIC_BIOTA_CONDITION  + '<br />' +
            '<b>Water Quality: </b>' + graphic.attributes.WATER_QUALITY_CONDITION + '<br />' +
            '<b>Water Quantity: </b>' + graphic.attributes.WATER_QUANTITY_CONDITION + '<br />' +
            '<b>Wetland Vegetation: </b>' + 
            graphic.attributes.RIPARIAN_WETLAND_VEG_CONDITION + '<br />' +
            '<b>Forest Cover: </b>' + graphic.attributes.FOREST_COVER_CONDITION + '<br />' +
            '<b>Forest Health: </b>' + graphic.attributes.FOREST_HEALTH_CONDITION + '<br />' +
            '<b>Soil: </b>' + graphic.attributes.SOIL_CONDITION + '<br />' +
            '<b>Roads and Trails: </b>' + graphic.attributes.ROADS_AND_TRAILS_CONDITION
        });
    dojo.addClass(pane2.domNode, "wstab");

    var pane3 = new ContentPane({
       title:'Justification',
       id:'wstab3',
       style:'line-height:125%; margin:10px',
       content: graphic.attributes.SELECTION_NARRATIVE  
    });
    dojo.addClass(pane3.domNode, "wstab");

    var pane4 = new ContentPane({
       title:'Partners',
       id:'wstab4',
       content: partners  
    }); 
    dojo.addClass(pane4.domNode, "wstab");
    tc.addChild(pane1);
    tc.addChild(pane2);
    tc.addChild(pane3);
    tc.addChild(pane4);
    tc.startup();
    lscapp.cp.addChild(tc);
    lscapp.cp.startup();
    
    return lscapp.cp.domNode; //Move return inside the function
   
   });   
  
}

[bobcarr · Accepted solution]

Thank you for taking the time to review the code and suggest a fix.  Moving the return call inside the inner function did not resolve the issue. 

Using a callback function and placing its call within the inner function has resolved the error and the dialog box now shows the content pane and tab container as it did prior to AMD implementation.  Shown below are the changes made to the code.

To use the callback, I modified the call to the getTextContent function.

Old call to function

var content = getTextContent(evt.graphic); wsDialog.setContent(content);  dojo.style(wsDialog.domNode, "opacity", 1.0);  dijit.popup.open({     popup: wsDialog,     x:evt.pageX,     y:evt.pageY }); 

New call to function

getTextContent(evt.graphic,function() {     wsDialog.setContent(lscapp.cp.domNode);      dojo.style(wsDialog.domNode, "opacity", 1.0);      dijit.popup.open({         popup: wsDialog,         x:evt.pageX,         y:evt.pageY     });  });

Then modified the getTextContent Function

function getTextContent(graphic,callback) {     require (["dojox/xml/DomParser",        "dojox/xml/parser",        "dojo/date/locale",        "dijit/layout/ContentPane",        "dijit/layout/TabContainer"],     function (DomParser,parser,locale,       ContentPane,TabContainer) {               ...      /* content pane and tab container building     code removed */     ...          lscapp.cp.startup();     callback();              });   }