main page wait for page include to load

Questions
1

Is there an event I can listen for or condition I can check from a primary page to know when a page include has finished loading?

I have a tabset where each tab contains a page include, and I am trying to run some code on the tabshow event, which needs to jQuery the contents of the page include of the active tab ( I want to make some modifications to the UI based on whether the tab contains a wizard). But the code in the ‘tabshow’ event is obviously running before the page include is finished loading. What’s the best way to get the ‘tabshow’ code to wait for the page include to load?

Here’s an excerpt of what we’ve got so far:

<br>// Set tabshow function<br>$(tabSet).on('tabshow',function(event, data){<br> console.log(event);<br> console.log(data);<br> &nbsp; &nbsp;// Save record into log for previous tab.<br> TimeOut = event.timestamp;<br> &nbsp; &nbsp;saveProcessLog();<br> &nbsp; &nbsp;// Start log entry for the new tab.<br> &nbsp; &nbsp;TabName = data.tab.context.text;<br> &nbsp; &nbsp;TimeIn = event.timestamp;<br> &nbsp; &nbsp;<b>// Check if current tab contains wizard and disable/enable buttons accordingly.</b><br><b> &nbsp; &nbsp;console.log('Wizard exists before timeout: ' + !!$(data.panel).find('.nx-wizard').length);</b><br><b> &nbsp; &nbsp;setTimeout(checkPanelForWizard(data.panel), 1000);</b><br><b> &nbsp; &nbsp;/// 1000 is not long enough. Is there a way to wait for pageinclude load?</b><br>});<br>

2

Skuid fires a ‘pageload’ event on the page include’s dom element. This event will bubble up all the way to your main window.  So you can attach a listener on any dom element that is a parent of the page include and listed for the event.

I use jQuery’s “one” function instead of “on” because “one” will unregister the event handler once it’s been fired once.

I would try this instead of your setTimeout…


data.panel.one('pageload',function(){ console.log('page loaded!'); });<br>
3

Nice.

So, if the panel is loaded, I need to check for a wizard. If it’s not loaded, I need to wait for it to load to check for the wizard. Does something like this make sense, or is there a better way?

if ($(data.panel).find('.nx-include-panel').attr('data-rendered') === "true"){<br> checkPanelForWizard(data.panel);<br>} else {<br> data.panel.one('pageload',function(){<br> console.log('page loaded!');<br> checkPanelForWizard(data.panel);<br> });<br>}
4

I don’t think we have any supported APIs that will tell you if a page include component has been already loaded. If using .attr(‘data-rendered’) is working for you, then you should be alright. I can’t guarantee that it will always be there in a future release of Skuid, but I can’t see a reason why it wouldn’t.

One nitpick is that you don’t need to wrap data.panel in the jQuery constructor since it’s already a jQuery object.

5

Thanks, Ben.

Turns out the data-rendered attribute is “true” even if the page include isn’t rendered. So I’m going with this:

if (data.panel.find('.nx-include-panel')<b>.children().length)</b> {<br>&nbsp; &nbsp;&nbsp; checkPanelForWizard(data.panel);<br> &nbsp; &nbsp;} else {<br> &nbsp; &nbsp; data.panel.one('pageload',function(){<br> &nbsp; &nbsp; console.log('include page loaded');<br> &nbsp; &nbsp; checkPanelForWizard(data.panel);<br> });<br> &nbsp; &nbsp;}