onDone call to soon before DOM loaded

[bayucandra]

Hi, i have problem with onDone callback which i were though it should be like jQuery $(document).ready(). However seem to me onDone callback sometimes call to soon before new loaded DOM is ready ( rendered to page ). So when i call for example jQuery $('.new-loaded-element') some times it is not found, i must put some setInterval() check untill new element is appear. It is feel hacky and we can't make general function to call after the new DOM loaded by SPF is ready.

Hopefully SPF can have callback which called when the new DOM is really loaded to the document. Is that possible?

[rviscomi]

Per the docs:

Fired after response processing is done. Use to finalize UI feedback (i.e. complete a progress bar) and initialize event listeners after content is updated.

So I'd expect querying the DOM for content updated by SPF to succeed.

Do you happen to also be loading JS that modifies the DOM in any way? For example, you use SPF to load scripts that generate content client-side.

[bayucandra]

@rviscomi , Thank you for your response. I even tried with just $('.new-element-loaded') inside onDone callback. I even not have new script loaded via SPF. It is often give 0 of length at the jQuery result. It is strange if it supposed to be called when DOM is ready ( based on documentation you mentioned ). In fact i often got missed the new DOM when i need to parse by jQuery to it. As i said i have to make setInterval to ensure that my script will catch the new loaded DOM.

Is there any other possibility causing this issue beside when we load new client side script by SPF ?

[VarinderS]

Would you be able to post a little bit of markup along with the script tags containing javascript containing the call to onDone

I have a feeling that it could be a ordering issue.

It would help us understand the issue a bit more clearly if you could maybe post a fiddle that reproduces the bug?

cheers :)

[bayucandra]

@VarinderS i am working in a big project and continue from previous developer. Let me take a while to reproduce it in small part. If you believe i should not got this issue perhaps it is conflict with other libraries, i will check it when trying to reproduce it in small part.

Actually it is looks a simple code to me of SPF usage in my project. It is just something like :

spf.load( url, {
    onDone: ()=>{
        let el = $('.new-element');//Here '.new-element' doesn't appear until di `setTimeout` in some millisecond
    }
});

But again, please give me time to reproduce in small part. For additional information, i am using SPF version : 2.4.0

[VarinderS]

sure thing, question: how does that markup look like from the url? just curious to see where in the markup does the element with class .new-element exists