I am trying to figure out a good way to have some piece of content (usually data that takes a while from the DB or something) be loaded after the rest of the page is finished loading via JSF2 and the native ajax framework. For example...if I have a lot of accounts which take a long time to load I want to go ahead and load the navigation, menu, etc. first and let the accounts/data part of the page load after the rest of the page is finished while a spinner/progress bar sits in its place until it is done.
The only I have gotten this to work so far is by creating another JSF page called "content_snippet.xhtml" or something and putting that code in there and then using jquery's document.ready to then do a jquery #divid.load("content_snippet.faces") into a div I create on the page as a placeholder.
The problem with this approach is that if there are commandlinks or other things a form is needed for in my content_snippet.xhtml and then they won't work once they're loaded in as DOM content because JSF will complain and say "commandLinks are disabled because they must be nested inside a form".
Does anyone else know of a more elegant way to handle this scenario that preferably meets the some or all of the following requirements?
1) Doesn't require me to create new pages (i.e urls) for every piece of content I want to load asynchronously after page load.
2) Allows all links and other things that requires forms to still function as normal within the original pageView and lifecycle.
3) Doesn't screw up the navigation by "tricking" JSF into thinking it's on "content_snippet.faces" instead of the original page "parent.faces".
4) Doesn't need extra homegrown-jquery code to accomplish it.
Any help would be greatly appreciated!
thanks in advance!