Queue + Page Include console error: cannot read property 'registerEditor' of undefined

I have a detail page using a queue component, which is trying to load a page include. The page I’m including contains an inline resource which is resulting in an error in the console. (see attached screenshot) as well as preventing the page include from loading. The included page and snippet works fine on its own as a detail page, but as a page include its not working.

Does a page include in a queue component not have the full functionality of a normal detail page? ie should it be read only?

Is there another way to make this snippet work inside the page include component?

here is the inline resource which is running fine in my Quote page, except for when I use that page as a page include component:

skuid.$(function(){ 
var FleetQuote = skuid.model.getModel(‘FQuote’), 
FleetQuoteSectors = skuid.model.getModel(‘FSectors’); 

var listener = new skuid.ui.Editor(); 
listener.handleSave = function() { 
if (!FleetQuote.hasChanged) { 
FleetQuoteSectors.updateData(); 

}; 
listener.registerModel(FleetQuote); 
}); 

skuid.$(function(){ 

var FleetQuoteSectors = skuid.model.getModel(‘FSectors’), 
FleetQuote = skuid.model.getModel(‘FQuote’); 

var listener = new skuid.ui.Editor(); 
listener.handleSave = function() { 
if (!FleetQuoteSectors.hasChanged) { 
FleetQuote.updateData(); 

}; 
listener.registerModel(FleetQuoteSectors); 
}); 


The trick with JavaScript run in included Pages is that the jQuery document.ready() handler (e.g. the skuid.$(function(){ }); construct you’re using here) does not work, because the main document is already ready when your Page Include is loaded, and hence your JavaScript will be run immediately — before the Page Include’s document is ready, and before Skuid has finished setting up the Models in the included Skuid page.

So, what to do?

Register on a different event.

You’ll need to replace the skuid.$(function(){}); construct with skuid.$(document.body).one(‘pageload’,function(){}), like this:


skuid.$(document.body).one(‘pageload’,function(){ 
var FleetQuote = skuid.model.getModel(‘FQuote’), 
FleetQuoteSectors = skuid.model.getModel(‘FSectors’); 
var listener = new skuid.ui.Editor(); 
listener.handleSave = function() { 
if (!FleetQuote.hasChanged) { 
FleetQuoteSectors.updateData(); 

}; 
listener.registerModel(FleetQuote); 
}); 

skuid.$(document.body).one(‘pageload’,function(){ 
var FleetQuoteSectors = skuid.model.getModel(‘FSectors’), 
FleetQuote = skuid.model.getModel(‘FQuote’); 
var listener = new skuid.ui.Editor(); 
listener.handleSave = function() { 
if (!FleetQuoteSectors.hasChanged) { 
FleetQuote.updateData(); 

}; 
listener.registerModel(FleetQuoteSectors); 
}); 

works perfectly. Thanks Zach.

as an extension of this, is it possible to update the queue model (and display template), after fields in the page include are updated?

ie have a listener which listens for changes in the page include models, and updates the model in the parent page, which the queue is based on?