Dynamic Component - Javascript Works properly on page, but if inside a page include will error

Here’s my full javascript snippet for rendering the component in case it is useful. It is a bit complex… you can find the line that errors inside the try/catch under the comment: //FAILS ON PAGE INCLUDE ???

var element = arguments[0], component = arguments[2], $xml = skuid.utils.makeXMLDoc, $ = skuid.$;
//window.DynamicReportFinancialInclude__PageGroupingsArr
//window.DynamicReportFinancialInclude__BodyGroupingsArr
component.subscribeToPageEvent("loadPaginatedComponent", function() {
// Remove any preexisting child components
component.unregisterChildComponents();
var pgModel = skuid.model.getModel('DynamicReportFinancialInclude__PageGroupings');
var bgModel = skuid.model.getModel('DynamicReportFinancialInclude__BodyGroupings');
var bcModel = skuid.model.getModel('DynamicReportFinancialInclude__BodyColumns');
var varsModel = skuid.model.getModel('DynamicReportFinancialInclude__Vars');
var varsRow = varsModel.getFirstRow();
var reportModel = skuid.model.getModel('DynamicReportFinancialInclude__Report');
var reportRow = reportModel.getFirstRow();
var reportSubtype = reportModel.getFieldValue(reportRow,'Subtype__c',true);
var reportName = reportModel.getFieldValue(reportRow,'Name__c',true);
//Tabbing value
var tabIndex = 0;
//Construct XML String
// -- Construct our foundation deck --
var curEleArr = [];
var curContextFields = [];
var xml;
//If we have no foundation model rows
if(skuid.model.getModel(window.DynamicReportFinancialInclude__DynamicModels[0].id).data.length == 0){
xml = $($.parseXML('
<p style="text-align: center;"><span style="font-size:20px;">No items to display</span></p>

'));
}
else{
//Foundation Deck Base
curEleArr.push('dynDeckFoundation');
xml = $($.parseXML(''));
//Foundation Deck Components area
$('#'+curEleArr.join('-'),xml).append($('', xml));
curEleArr.push('components');
//Foundation Header Template
$('#'+curEleArr.join('-'),xml).append($('', xml));
curEleArr.push('templateHeader');
//Foundation Header Contents
$('#'+curEleArr.join('-'),xml).append($('', xml));
curEleArr.push('contents');
//Header div
$('#'+curEleArr.join('-'),xml).append(window.htmlEscape('

')); //pop contents curEleArr.pop(); $('#'+curEleArr.join('-'),xml).append($('', xml)); curEleArr.push('conditions'); //pop conditions curEleArr.pop(); //pop template0 curEleArr.pop(); //Set up table of Body Column Headers //

MainColumnText

Column1 Text

//Foundation Body Column Header Template $('#'+curEleArr.join('-'),xml).append($('', xml)); curEleArr.push('templateBCHeader'); $('#'+curEleArr.join('-'),xml).append($('', xml)); curEleArr.push('contents'); //Main column $('#'+curEleArr.join('-'),xml).append(window.htmlEscape('')); //Iterate body columns, create column headers if(bcModel.data.length > 0){ $.each(bcModel.data,function(i,row){ var fieldId = bcModel.getFieldValue(row,'FieldId__c',true); var fieldTypeName = bcModel.getFieldValue(row,'FieldName__c',true); $('#'+curEleArr.join('-'),xml).append(window.htmlEscape('')); }); } //Make sure minimum columns are set. if(bcModel.data.length < window.DynamicReportFinancialInclude__MinBodyColumns){ for(var i=bcModel.data.length;i<window.DynamicReportFinancialInclude__MinBodyColumns;i++){ $('#'+curEleArr.join('-'),xml).append(window.htmlEscape('')); } } //Close Table $('#'+curEleArr.join('-'),xml).append(window.htmlEscape('

'+fieldTypeName+'

')); //pop contents curEleArr.pop(); //pop templateBCHeader curEleArr.pop(); //Revenues / Expenses if(reportSubtype == 'Revenue / Expense'){ //Revenue Template $('#'+curEleArr.join('-'),xml).append($('', xml)); curEleArr.push('templateRevenues'); $('#'+curEleArr.join('-'),xml).append($('', xml)); curEleArr.push('contents'); //Main column $('#'+curEleArr.join('-'),xml).append(window.htmlEscape('')); //Iterate body columns if(bcModel.data.length > 0){ $.each(bcModel.data,function(i,row){ var fieldId = bcModel.getFieldValue(row,'FieldId__c',true); var fieldTypeName = bcModel.getFieldValue(row,'FieldName__c',true); $('#'+curEleArr.join('-'),xml).append(window.htmlEscape('')); }); } //Make sure minimum columns are set. if(bcModel.data.length < window.DynamicReportFinancialInclude__MinBodyColumns){ for(var i=bcModel.data.length;i<window.DynamicReportFinancialInclude__MinBodyColumns;i++){ $('#'+curEleArr.join('-'),xml).append(window.htmlEscape('')); } } //Close Table $('#'+curEleArr.join('-'),xml).append(window.htmlEscape('

Revenues

')); //pop contents curEleArr.pop(); //pop revenue template curEleArr.pop(); //Revenue Body Groupings //Iterate body groupings and set up decks/subdecks for each body grouping //console.log('curEleArr Before:'); //console.log(curEleArr); tabIndex = 0; if(bgModel.data.length > 0){ console.log('1'); $.each(bgModel.data,function(i,row){ //Increment our tabIndex tabIndex++; var fieldId = bgModel.getFieldValue(row,'FieldId__c',true); var fieldName = fieldId+'Name'; var fieldShort = fieldId+'Short'; var fieldTypeName = bgModel.getFieldValue(row,'FieldName__c',true); //console.log('curContextFields:'); //console.log(curContextFields); console.log('1.1 | Create Subdeck: '+window.DynamicReportFinancialInclude__DynamicModels[i+1].id); //Subdeck $('#'+curEleArr.join('-'),xml).append($('', xml)); curEleArr.push('revDeck'+tabIndex); console.log('1.2'); //Subdeck Styles area $('#'+curEleArr.join('-'),xml).append($('', xml)); curEleArr.push('styles'); $('#'+curEleArr.join('-'),xml).append($('', xml)); curEleArr.push('styleitem'); $('#'+curEleArr.join('-'),xml).append($('', xml)); curEleArr.push('styles'); $('#'+curEleArr.join('-'),xml).append(''); $('#'+curEleArr.join('-'),xml).append(''); $('#'+curEleArr.join('-'),xml).append(''); $('#'+curEleArr.join('-'),xml).append(''); //pop deck styles curEleArr.pop(); //pop deck styleitem curEleArr.pop(); //pop deck styles curEleArr.pop(); console.log('1.3'); //Subdeck conditions area $('#'+curEleArr.join('-'),xml).append($('', xml)); curEleArr.push('conditions'); //Set Revenue Condition console.log('1.3.1'); $('#'+curEleArr.join('-'),xml).append(''); //Iterate current context fields and create a condition for each console.log('1.3.2'); for(var j=0;j<curContextFields.length;j++){ console.log('1.3.2.1'); var field = curContextFields[j]; console.log('1.3.2.2 | Field: '+field); console.log('curEleArr join: '+curEleArr.join('-')); try{ //FAILS ON PAGE INCLUDE ????? $('#'+curEleArr.join('-'),xml).append(''); }catch(err){ console.log(err.message); } console.log('1.3.2.3'); } console.log('1.3.3'); //pop conditions curEleArr.pop(); console.log('1.4: AddConditions'); //Subdeck Components area $('#'+curEleArr.join('-'),xml).append($('', xml)); curEleArr.push('components'); console.log('1.5'); //Body Grouping Field Template $('#'+curEleArr.join('-'),xml).append($('', xml)); curEleArr.push('templateBG'+tabIndex); $('#'+curEleArr.join('-'),xml).append($('', xml)); curEleArr.push('contents'); //Main column $('#'+curEleArr.join('-'),xml).append(window.htmlEscape('')); //Iterate body columns if(bcModel.data.length > 0){ $.each(bcModel.data,function(j,row2){ var bcId = bcModel.getFieldValue(row2,'FieldId__c',true); var bcTypeName = bcModel.getFieldValue(row2,'FieldName__c',true); //If this is not the last grouping, don't display totals if(i<bgModel.data.length-1){ $('#'+curEleArr.join('-'),xml).append(window.htmlEscape('')); } else{ //display amount $('#'+curEleArr.join('-'),xml).append(window.htmlEscape('')); } }); } //Make sure minimum columns are set. if(bcModel.data.length < window.DynamicReportFinancialInclude__MinBodyColumns){ for(var j=bcModel.data.length;j<window.DynamicReportFinancialInclude__MinBodyColumns;j++){ $('#'+curEleArr.join('-'),xml).append(window.htmlEscape('')); } } //Close Table $('#'+curEleArr.join('-'),xml).append(window.htmlEscape('

'+fieldTypeName+': {{'+fieldName+'}} {{'+fieldShort+'}}

{{'+bcId+'}}

')); //pop contents curEleArr.pop(); //pop template curEleArr.pop(); console.log('1.6'); //Push the field id to our current context fields curContextFields.push(fieldId); }); console.log('2'); //Need to pop all our created subdecks and components and context fields for(var j=0;j<bgModel.data.length;j++){ //pop components curEleArr.pop(); //pop subdeck curEleArr.pop(); curContextFields.pop(); } //console.log('curContextFields after popping:'); //console.log(curContextFields); //Set tabIndex back to 0; tabIndex = 0; console.log('3'); //console.log('curEleArr After:'); //console.log(curEleArr); } //Revenue Totals Row $('#'+curEleArr.join('-'),xml).append($('', xml)); curEleArr.push('templateRevenueTotals'); $('#'+curEleArr.join('-'),xml).append($('', xml)); curEleArr.push('contents'); //Main column $('#'+curEleArr.join('-'),xml).append(window.htmlEscape('')); //Iterate body columns if(bcModel.data.length > 0){ $.each(bcModel.data,function(i,row){ var fieldId = bcModel.getFieldValue(row,'FieldId__c',true); var fieldTypeName = bcModel.getFieldValue(row,'FieldName__c',true); $('#'+curEleArr.join('-'),xml).append(window.htmlEscape('')); }); } //Make sure minimum columns are set if(bcModel.data.length < window.DynamicReportFinancialInclude__MinBodyColumns){ for(var i=bcModel.data.length;i<window.DynamicReportFinancialInclude__MinBodyColumns;i++){ $('#'+curEleArr.join('-'),xml).append(window.htmlEscape('')); } } //Close Table $('#'+curEleArr.join('-'),xml).append(window.htmlEscape('

Total Revenues

{{REV'+fieldId+'}}

')); //pop contents curEleArr.pop(); //pop revenue totals template curEleArr.pop(); //Expense Template $('#'+curEleArr.join('-'),xml).append($('', xml)); curEleArr.push('Expenses'); $('#'+curEleArr.join('-'),xml).append($('', xml)); curEleArr.push('contents'); //Main column $('#'+curEleArr.join('-'),xml).append(window.htmlEscape('')); //Iterate body columns, create column headers if(bcModel.data.length > 0){ $.each(bcModel.data,function(i,row){ var fieldId = bcModel.getFieldValue(row,'FieldId__c',true); var fieldTyp

Expenses

I was able to get past that error by enclosing the string with $(‘String’,xml) like so:

$('#'+curEleArr.join('-'),xml).append($('',xml));

However I'm also getting the same error message at this line:

$('#'+curEleArr.join('-'),xml).append($('', xml));

Failed to set the 'innerHTML' property on 'Element': The provided markup is invalid XML, and therefore cannot be inserted into an XML document.

and I already have the string I’m appending enacased in $(‘String’,xml)

Not sure what to do for this one. Again this only causes a problem on the page when it’s a page include, not when it’s a standalone page.

I was able to work around this.

For the following:

$(‘#’+curEleArr.join(‘-’),xml).append($(‘’, xml));

removing allowhtml=“true” seems to let this work when the page is in a page include.

I have no clue why this is the case. I have other templates in the file being declared with allowhtml=“true” that work just fine.

This line works:

$(‘#’+curEleArr.join(‘-’),xml).append($(‘’, xml));