How do I wait for the DOM to load within a Skuid Page Include?

  • 3
  • Question
  • Updated 5 years ago
  • Answered
I need to adjust the DOM via jQuery during a page load. With normal page loads, I can easily do this using an Inline javascript with code such as:

(function(skuid){
var $ = skuid.$;
$(function(){
$('#StatusPicklistFrame').hide();
});
})(skuid);

However, when the page is loaded via a Page Include - this script triggers before the DOM has been fully populated with the dynamically loaded content. The script does run as the page is loading (meaning, it waits until the Page Include begins) - but runs before I can find the objects in the DOM.

In my case I'm trying to hide a Field Editor frame, which does not have any customer field renderer attached to it. I did try hooking to a field renderer on a field within the Field Editor, but I don't appear to have access to the parent objects in the DOM.

Is there a different way for me to receive a Page Include complete event so I can adjust the DOM prior to the content being visible to the user?

Thanks,

- Chris
Photo of Chris

Chris

  • 1,632 Points 1k badge 2x thumb

Posted 5 years ago

  • 3
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
Hi Chris,

Skuid throws a "pageload" event to the document body whenever the page is ready. This happens when page includes are finished loading as well. You can use the code below instead of jQuery.ready.




$(document.body).one('pageload',function() {
// My code here.
});

Photo of Chris

Chris

  • 1,632 Points 1k badge 2x thumb
That does it - thanks!

(for others who may read this... add the line 'var $ = skuid.$;' at the top of this snippet to define the jQuery interface on $)

- Chris