0

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

            <a class="image fit thumb" href="_#= linkURL =#_" title="_#= $htmlEncode(line1) =#_" id="_#= pictureLinkId =#_">
                
                <!--#_
                     document.write(getImageTag());
                 _#-->

            </a>
            <span class="text-block" id="_#= dataContainerId =#_">
                <a href="_#= linkURL =#_" title="_#= $htmlEncode(line1) =#_" id="_#= line1LinkId =#_">
                    <h3 id="_#= line1Id =#_"> _#= line1 =#_</h3>
                </a>
            </span>
</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?

Improve this question

1 Answer 1

Reset to default
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
Improve this answer
1
  • Hi @Mark L, did you try this? Is it working for you? Commented May 28, 2021 at 3:17

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.