1
  1. I create a Slider By Search result Web part specified with my custom Display templates.
  2. I want to run some other javascript code in the my custom Control Display Templates have rendered the content
  3. 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>
  • 1
    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 '15 at 19:55
3

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

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 '15 at 12:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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