Run any other javascript in a Control Display Templates

Question

I create a Slider By Search result Web part specified with my custom Display templates.
I want to run some other javascript code in the my custom Control Display Templates have rendered the content
I then register my custom javascript file in the first div after body tag

<!--#_ 
  if (!$isNull(ctx.ClientControl) &&
      !$isNull(ctx.ClientControl.shouldRenderControl) &&
      !ctx.ClientControl.shouldRenderControl())
      {   
          return "";
      }

  ctx.ListDataJSONGroupsKey = "ResultTables";
  ctx["CurrentItems"] = ctx.ListData.ResultTables[0].ResultRows;
  var siteURL = SP.PageContextInfo.get_siteAbsoluteUrl();

  ***AddPostRenderCallback(ctx, function () {     
      $('.flicker-example').flicker();
  });***

_#-->

but in the first visit, scrip can't run and I visited this error:

undefined is not a function (OnPostRender: )

َAfter Clicking F5 my custom JavaScript is runned and also after clicking ctrl+F5 Search Result Webpart display the following error:

undefined is not a function (OnPostRender: )

Control Display Template is:

    <html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
    <title>Control_bgImages</title>

    <!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:MasterPageDescription msdt:dt="string"></mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106601</mso:ContentTypeId>
<mso:TargetControlType msdt:dt="string">;#SearchResults;#</mso:TargetControlType>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">http://eportal.qom.ir/le/_catalogs/masterpage/Display Templates/Search/Control_bgImages.html, تبدیل موفق.</mso:HtmlDesignStatusAndPreview>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body>
    <script>
        $includeScript(this.url, "~sitecollection/style library/bgimages/js/jquery-v1.10.2.min.js");
        $includeScript(this.url, "~sitecollection/style library/bgimages/js/modernizr-custom-v2.7.1.min.js");       
        $includeScript(this.url, "~sitecollection/style library/bgimages/js/jquery-finger-v0.1.0.min.js");      


        $includeScript(this.url, "~sitecollection/style library/bgimages/js/flickerplate.min.js");
        $includeCSS(this.url, "~sitecollection/style library/bgimages/css/flickerplate.css"); 
    </script>
<div id="imageSliderControl">    
    <!--#_ 
    if (!$isNull(ctx.ClientControl) &&
        !$isNull(ctx.ClientControl.shouldRenderControl) &&
        !ctx.ClientControl.shouldRenderControl())
        {   
            return "";
        }

    ctx.ListDataJSONGroupsKey = "ResultTables";
    ctx["CurrentItems"] = ctx.ListData.ResultTables[0].ResultRows;
    var siteURL = SP.PageContextInfo.get_siteAbsoluteUrl();

    AddPostRenderCallback(ctx, function () {     
        $('.flicker-example').flicker();
    });

_#-->

    <div class="image-slider">
    <div class="flicker-example" data-block-text="false">

        <ul>

            _#= ctx.RenderItems(ctx) =#_

        </ul>

    </div>


    </div>
</div>  
</body>
</html>

and Item Display Template is:

<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
    <!--Title-->
    <title>Item_bgImages</title>
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:MasterPageDescription msdt:dt="string">Displays a result tailored for a picture.</mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106603</mso:ContentTypeId>
<mso:TargetControlType msdt:dt="string">;#SearchResults;#</mso:TargetControlType>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:ManagedPropertyMapping msdt:dt="string">'Title':'Title','Path':'Path','Description':'Description','EditorOWSUSER':'EditorOWSUSER','LastModifiedTime':'LastModifiedTime','CollapsingStatus':'CollapsingStatus','DocId':'DocId','HitHighlightedSummary':'HitHighlightedSummary','HitHighlightedProperties':'HitHighlightedProperties','FileExtension':'FileExtension','ViewsLifeTime':'ViewsLifeTime','ParentLink':'ParentLink','FileType':'FileType','IsContainer':'IsContainer','SecondaryFileExtension':'SecondaryFileExtension','DisplayAuthor':'DisplayAuthor','PictureHeight':'PictureHeight','PictureWidth':'PictureWidth','ImageDateCreated':'ImageDateCreated','PictureThumbnailURL':'PictureThumbnailURL','PictureURL':'PictureURL'</mso:ManagedPropertyMapping>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">http://eportal.qom.ir/le/_catalogs/masterpage/Display Templates/Search/Item_bgImages.html, تبدیل موفق.</mso:HtmlDesignStatusAndPreview>
</mso:CustomDocumentProperties>
</xml><![endif]-->

</head>
<body>
<div id="Item_bgImages">    
    <!--#_
        var siteURL = SP.PageContextInfo.get_siteServerRelativeUrl();
        var linkURL = $getItemValue(ctx, "Path");
        linkURL.overrideValueRenderer($urlHtmlEncode);
        var title = $getItemValue(ctx, "Title");
        var description = $getItemValue(ctx, "Description");
        var pictureURL = $getItemValue(ctx, "PictureURL");
    _#-->

            <li data-background="_#= pictureURL =#_">
                <div class="flick-title">_#= title =#_</div>
                <div class="flick-sub-text">_#= description =#_</div>
            </li>
        </div>  


</body>
</html>

Can you post all your code? It sounds like it is loading after the template renders, so first run doesn't work. When you re-load, the script is cached and is available so it works. — Jesus Shelby, Jan 8, 2015 at 19:55

Elio Struyf · Accepted Answer · 2015-01-09 11:05:48Z

You are including four scripts to be used in combination with your display template. I think that your problem is related to the fact that a script is not yet loaded.

It can happen that a script fails to load, or that it has not yet been loaded. $inlcudeScript does not ensures that your scripts are loaded at the moment you want to execute your code.

My approach when you need to rely on the scripts to be available is by using the RegisterSod function instead of $includeScript.

So your control display template needs to be changes to like this:

<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
    <title>Control_bgImages</title>

    <!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:MasterPageDescription msdt:dt="string"></mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106601</mso:ContentTypeId>
<mso:TargetControlType msdt:dt="string">;#SearchResults;#</mso:TargetControlType>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">http://eportal.qom.ir/le/_catalogs/masterpage/Display Templates/Search/Control_bgImages.html, تبدیل موفق.</mso:HtmlDesignStatusAndPreview>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body>
    <script>
        $includeCSS(this.url, "~sitecollection/style library/bgimages/css/flickerplate.css"); 
    </script>
<div id="imageSliderControl">    
    <!--#_ 
    RegisterSod('jquery-v1.10.2.min.js', Srch.U.replaceUrlTokens("~sitecollection/style library/bgimages/js/jquery-v1.10.2.min.js"));
    RegisterSod('modernizr-custom-v2.7.1.min.js', Srch.U.replaceUrlTokens("~sitecollection/style library/bgimages/js/modernizr-custom-v2.7.1.min.js"));
    RegisterSod('jquery-finger-v0.1.0.min.js', Srch.U.replaceUrlTokens("~sitecollection/style library/bgimages/js/jquery-finger-v0.1.0.min.js"));
    RegisterSod('flickerplate.min.js', Srch.U.replaceUrlTokens("~sitecollection/style library/bgimages/js/flickerplate.min.js"));


    if (!$isNull(ctx.ClientControl) &&
        !$isNull(ctx.ClientControl.shouldRenderControl) &&
        !ctx.ClientControl.shouldRenderControl())
        {   
            return "";
        }

    ctx.ListDataJSONGroupsKey = "ResultTables";
    ctx["CurrentItems"] = ctx.ListData.ResultTables[0].ResultRows;
    var siteURL = SP.PageContextInfo.get_siteAbsoluteUrl();

    AddPostRenderCallback(ctx, function () {
        EnsureScriptFunc("jquery-v1.10.2.min.js", null, function() {
            EnsureScriptFunc("modernizr-custom-v2.7.1.min.js", null, function() {
                EnsureScriptFunc("jquery-finger-v0.1.0.min.js", null, function() {
                    EnsureScriptFunc("flickerplate.min.js", null, function() {
                        $('.flicker-example').flicker();
                    });
                });
            });
        }); 
    });

_#-->

    <div class="image-slider">
    <div class="flicker-example" data-block-text="false">

        <ul>

            _#= ctx.RenderItems(ctx) =#_

        </ul>

    </div>


    </div>
</div>  
</body>
</html>

A-Dastani · Accepted Answer · 2015-01-09 12:27:06Z

your control display template needs to be changes to like this:

<!--#_ 
    if (!$isNull(ctx.ClientControl) &&
        !$isNull(ctx.ClientControl.shouldRenderControl) &&
        !ctx.ClientControl.shouldRenderControl())
        {   
            return "";
        }

    ctx.ListDataJSONGroupsKey = "ResultTables";
    ctx["CurrentItems"] = ctx.ListData.ResultTables[0].ResultRows;
    var siteURL = SP.PageContextInfo.get_siteAbsoluteUrl();

ctx.OnPostRender = function() { $.getScript(siteURL + "/style library/bgimages/js/flickerplate.min.js", function(){
          $('.flicker-example').flicker();

      });
  };

_#-->

But it can also happen that the jQuery script is not yet loaded. Best it to switch to RegisterSod and EnsureScriptFunc. — Elio Struyf, Jan 9, 2015 at 12:30

Stack Exchange Network

Run any other javascript in a Control Display Templates

2 Answers 2

Your Answer

Not the answer you're looking for? Browse other questions tagged
sharepoint-designer
search-results
display-template
or ask your own question.

Hot Network Questions

Run any other javascript in a Control Display Templates

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged sharepoint-designersearch-resultsdisplay-template or ask your own question.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
sharepoint-designer
search-results
display-template
or ask your own question.