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

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?