vendredi 9 janvier 2015

Filled Under:

Run any other javascript in a Control Display Templates

Posted By: Unknown on 05:32



  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://ift.tt/1xYYpLt 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://ift.tt/1xYYpLt 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>




0 commentaires:

Enregistrer un commentaire

Inscription à : Publier les commentaires (Atom)