jquery slider in display template works only every second/third time

Question

I've added PGWslider to a Display Template in SharePoint 2013. And it renders nicely - most of the times.

Every second or third time I refresh, F12 from IE tells me that "the object does not support the property or method 'pgwSlider". Some times it is SharePoint itself that presents me with the error after the "something went wrong" message: The object does not support the proprety or method 'pgwSlider' (OnPostRender: )

I load the jQuery library in my master page and have checked if it loads (it does).

Here is my code:

    ctx.OnPostRender = [];
    ctx.OnPostRender.push(function(){
    $(function (){
        $('.pgwSlider').pgwSlider({
            transitionEffect: 'fading',
            selectionMode: 'mouseOver'
        });
    });
});

This is my script references in the same (Control) file:

    $includeLanguageScript(this.url, "~sitecollection/_catalogs/masterpage/Spil-branding/js/jquery-2.0.3.min.js");
    $includeLanguageScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Language Files/{Locale}/CustomStrings.js");
    $includeLanguageScript(this.url, "~sitecollection/Style Library/Spil/js/PgwSlider-master/pgwslider.js");
    $includeCSS(this.url, "~sitecollection/Style Library/Spil/js/PgwSlider-master/pgwslider.css");

I had troubles earlier when the jQuery was only referenced in the Display Template, but that was solved when I started referencing it in the master page. That error was like this: "The property 'fn' cannot be referenced, as it is null or undefined" (error message is in Danish, so it is my translation).

That may have been caused by the pgwslider.js actually loading before the jQuery library despite the order in my template...

Answer 1

The reason is that the functions $includeScript and $includeLanguageScript will load the JavaScript files asynchronously. So that means that the files you want to reference will load randomly and so you could end up with errors like you are exeriencing.

The best way to solve this is not to work with the $include functions, but use RegisterSod, RegisterSodDep and EnsureScriptFunc functions. By using these functions you can specify the order how they need to be loaded and when they need to get executed.

In your example it would look like this:

RegisterSod('jquery-2.0.3.min.js', Srch.U.replaceUrlTokens("~sitecollection/_catalogs/masterpage/Spil-branding/js/jquery-2.0.3.min.js"));
RegisterSod('pgwslider.js', Srch.U.replaceUrlTokens("~sitecollection/Style Library/Spil/js/PgwSlider-master/pgwslider.js"));

RegisterSodDep('pgwslider.js', 'jquery-2.0.3.min.js');

AddPostRenderCallback(ctx, function () {
    EnsureScriptFunc("pgwslider.js", null, function() {
        Script3("Template");
    });
});

Here is a blog post with more information about the problem: Correctly including scripts into your display templates

Note: you can leave the $includeCSS in your template.