How to call a JavaScript inline of Item display template?

Question

I am editing an Item Display Template (for a content search web part) on SP2016 enterprise.

In the display template (Item_LargePicture.html), I inserted a JavaScript function to randomly return a image tag (e.g. <img src="/sites/os/PublishingImages/thumbs/01.jpg" alt=""> ). The function named getImageTag().

In the main html part of template I call my JS function like below syntax:

    <span style="display: table-cell;width: 50%">
<article id="_#= containerId =#_" data-displaytemplate="ItemLargePicture">
        &lt;a class=&quot;image fit thumb&quot; href=&quot;_#= linkURL =#_&quot; title=&quot;_#= $htmlEncode(line1) =#_&quot; id=&quot;_#= pictureLinkId =#_&quot;&gt;

            &lt;!--#_
                 document.write(getImageTag());
             _#--&gt;

        &lt;/a&gt;
        &lt;span class=&quot;text-block&quot; id=&quot;_#= dataContainerId =#_&quot;&gt;
            &lt;a href=&quot;_#= linkURL =#_&quot; title=&quot;_#= $htmlEncode(line1) =#_&quot; id=&quot;_#= line1LinkId =#_&quot;&gt;
                &lt;h3 id=&quot;_#= line1Id =#_&quot;&gt; _#= line1 =#_&lt;/h3&gt;
            &lt;/a&gt;
        &lt;/span&gt;

</article></span>

When I load the SharePoint page with display template, all I got is Display Error: The display template had an error. You can correct it by fixing the template or by changing the display template used in either the Web Part properties or Result Types.

I cannot debug with above error. Could you advise the correct syntax?

Answer 1

Try something like this:

getImageTag() {
    ...
jQuery('a.thumb').append('<img src="/sites/os/PublishingImages/thumbs/01.jpg" alt="">');

}
AddPostRenderCallback(ctx, function () {

    getImageTag(); 
})

You can adjust the jQuery selector for parent a element as per your requirements.

OR

getImageTag() {
    ...
return '<img src="/sites/os/PublishingImages/thumbs/01.jpg" alt="">';

}
<!--#_
   AddPostRenderCallback(ctx, function(){
       alert(ctx.Title + "finished rendering!");
   });
_#-->

References:

1. Run javascript after display template loaded
2. Run any other javascript after the Display Templates have rendered the content