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?

1 Answer 1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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