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

Questions
1

I have a pretty complex page set up which may be difficult to illustrate here, part of the page is creating dynamic components.

If I run my page standalone everything works properly; the components get created without any issues. However if I run my page in a page include it errors at a specific line of my javascript to create the XML for the component:

$('#'+curEleArr.join('-'),xml).append(''); ``` The error here is: Failed to set the 'innerHTML' property on 'Element': The provided markup is invalid XML, and therefore cannot be inserted into an XML document.

Note: This works fine on the standalone page, but if the page is inside a page include it fails. Also note: I have similar code above this that does not throw an error, why does the error get thrown here specifically?

I've already checked the ID (curEleArr.join) and that looks fine as well as the value of 'field' that also looks fine. I'm really perplexed as to why this is throwing this error and more specifically why it only occurs when the page is a page include, not when I run the page standalone.

Any ideas here?

Thanks!
2

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('
'));
//If our report has a name, display it
if(reportName !== undefined && reportName !== null && reportName != 'null'){
$('#'+curEleArr.join('-'),xml).append(window.htmlEscape(''+reportName+'
'));
}
//If we have page groupings, display this grouping's name
if(pgModel.data.length > 0){
$.each(pgModel.data,function(i,row){
var fieldId = pgModel.getFieldValue(row,'FieldId__c',true);
var fieldName = fieldId+'Name';
var fieldShort = fieldId+'Short';
var fieldTypeName = pgModel.getFieldValue(row,'FieldName__c',true);
$('#'+curEleArr.join('-'),xml).append(window.htmlEscape(fieldTypeName+': {{{'+fieldName+'}}} {{{'+fieldShort+'}}}
'));
//Push the page grouping to our current context fields
curContextFields.push(fieldId);
});
}
else{
}
$('#'+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
3

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.

4

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));

5

Another update to this line of odd issues with XML and dynamic components.

I’ve discovered that an XML string formatted with this syntax: is potentially problematic and causes “invalid XML” errors, but only if the component is on a page that is inside a page include on another page. The way to resolve this is simply by using the xml syntax:

In short, XML with the syntax:

is unstable on page includes potentially creating “invalid xml” errors
whereas:

seems to work properly on page includes