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.

  • hmm, I have not tried but I remember the display template file consist JS. Can you put your code in the template file? – Mark L Aug 4 '16 at 1:09
  • Did that, and trying window.load or sort of thing, still load too early. SetTimeout(func,0) would work. But would like to know if there is actually a way SharePoint has provided through JSOM class. – Alan Aug 4 '16 at 5:28

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



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()">

function loadTemplate() {
    console.info("Image INSIDE" , this.parentNode.id , "loaded");

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: http://viewmaster365.com/#/How

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.