How to execute a JQuery selector after dom objects are rendered complete in a search display template

Question

I want to run a JQuery selector after all divs in Search Display Template (e.g. Item_Person.html) finished rendering.

My funcs always seems run straight after master page is rendered, but it still too early because all doms in search display template haven't rendered yet.

using setTimeout(func,1000) can make it work, but it is quite a cheat.

Answer 1

SharePoint provides a hook for this called AddPostRenderCallback. All you need to do is define it in your template.

https://blogs.technet.microsoft.com/sharepoint_quick_reads/2013/08/01/sharepoint-2013-customize-display-template-for-content-by-search-web-part-cswp-part-2/

Answer 2

You are on the right path thinking about window.onload

But you want an onload event on content inside your Display Template

Available elements you can set on onload event on:
body, frame, iframe, img, input type="image", link, script, style
source: http://www.w3schools.com/jsref/event_onload.asp

So your DisplayTemplate could use:

<div id='myDisplayTemplate'>
    <img src="_layouts/images/blank.gif" onload="loadedTemplate()">
</div>

<script>
function loadTemplate() {
    console.info("Image INSIDE" , this.parentNode.id , "loaded");
}
</script>

You are not displaying an image.. you only want the onload event

You could even do without an image src and use the onerror event, but that approach might have edge-cases with problems

This trick is also used when you put HTML/JS in a Calculated Column,
see docs: https://www.365csi.nl/vm365com/#/How