Run javascript after display template loaded

Question

How can I run some JavaScript after my display template has loaded. I have tried:

AddPostRenderCallback(ctx, function () {     
    jQuery(document).ready(function () {
        alert(jQuery('.ms-srch-hover-subTitle').text());      
    });
})

but that doesn't work. .ms-srch-hover-subTitle is getting added from the display template. so I want the display template to be put on screen and then for the js to run

Can you please explain what you mean by that didn't worked? – Amal Hashim Dec 23 '14 at 14:25 — Amal Hashim, Dec 23 '14 at 14:25
ran before display template was loaded – Dillydallydave Dec 23 '14 at 14:26 — Dillydallydave, Dec 23 '14 at 14:26

score 4 · Accepted Answer · edited Apr 13 '17 at 12:41

4

You are registering on load event. Instead modify as follows

AddPostRenderCallback(ctx, function () {     
    alert(jQuery('.ms-srch-hover-subTitle').text());      
})

Also take a look at this Run any other javascript after the Display Templates have rendered the content

edited Apr 13 '17 at 12:41

Community

1

answered Dec 23 '14 at 14:27

Amal Hashim

28,306
5
31
61

that has the same result – Dillydallydave Dec 23 '14 at 14:29
can you please explain what .ms-srch-hover-subTitle this control does. Is it getting populated from the display template? – Amal Hashim Dec 23 '14 at 14:33
yes it's getting populated from the display template – Dillydallydave Dec 23 '14 at 14:35
Can you please add more code. – Amal Hashim Dec 23 '14 at 14:35
@Dillydallydave I have added a link. Also check that and make sure you are following the correct way. – Amal Hashim Dec 23 '14 at 14:46

score -1 · Answer 2 · edited May 23 '17 at 11:33

SharePoint does provide a few options.

1) Script on Demand: (load a js file then execute my code.)

function stuffThatRequiresSP_JS(){ //your code } SP.SOD.executeFunc("sp.js")

2) Delay until loaded (wait for a js file, then run)

function stuffToRunAfterSP_JS(){ //your code } ExecuteOrDelayUntilScriptLoaded(stuffToRunAfterSP_JS, "sp.js")

3) load after other stuff finishes

function runAfterEverythingElse(){ // your code } _spBodyOnLoadFunctionNames.push("runAfterEverythingElse");

Sources:

executeFunc: http://msdn.microsoft.com/en-us/library/ff409592(v=office.14).aspx

ExecuteOrDelayUntilScriptLoaded: http://msdn.microsoft.com/en-us/library/ff411788(v=office.14).aspx

I found the answer here.

Please read question carefully. Its not about page load. – Amal Hashim Dec 23 '14 at 14:30 — Amal Hashim, Dec 23 '14 at 14:30

Run javascript after display template loaded

2 Answers2

Linked