Unable to get property 'get_current' of undefined or null reference in JSLink

Question

I have a custom list to which I want to apply the JSLink in NewForm.

My code is :

(function () {

    // load jQuery
    var newscript = document.createElement('script');
    newscript.type = 'text/javascript';
    newscript.async = true;
    newscript.src = '~site/Style Library/JS/jquery-1.11.0.min.js';
    (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(newscript); 

    var SPJSScript = document.createElement('script');
    SPJSScript.type = 'text/javascript';
    SPJSScript.async = true;
    SPJSScript.src = '~site/_layouts/15/sp.js'; 
    (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(SPJSScript); 

    var OverrideCtx = {};
    OverrideCtx.Templates = {};
    OverrideCtx.Templates.Fields = {
        "Responsible": {
            "NewForm": renderResponsible
            }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(OverrideCtx);

})();

function renderResponsible(ctx)
{
    getResponsibleArray();
    return "<b>hello</b>";
}
function getResponsibleArray()
{
    alert(_spPageContextInfo.siteAbsoluteUrl);
    var clientContext = SP.ClientContext.get_current();
    website = clientContext.get_web();  
    clientContext.load(website);
    clientContext.executeQueryAsync(onRequestSucceeded, onRequestFailed);   
    function onRequestSucceeded() {
        alert(website.get_url());
    }
    function onRequestFailed(sender, args) {
        alert('Error: ' + args.get_message());
    }
}

This code returns Unable to get property 'get_current' of undefined or null reference error when I debug the JS.

What should I do to get the web to query further in the list and libraries?

Answer 1

After searching over internet I found the solution.

I just needed to execute my function after the SP.JS gets loaded.

So I added one line.ExecuteOrDelayUntilScriptLoaded(getResponsibleArray, "sp.js"); in my code.

So my new code is :

$(document).ready(function () 
{
    ExecuteOrDelayUntilScriptLoaded(getResponsibleArray, "sp.js");
});

(function () {      

    var OverrideCtx = {};
    OverrideCtx.Templates = {};
    OverrideCtx.Templates.Fields = {
        "Responsible": {
            "NewForm": renderResponsible
            }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(OverrideCtx);

})();

function renderResponsible(ctx)
{   
    return "<b>hello</b>";
}
function getResponsibleArray()
{   
    var clientContext = SP.ClientContext.get_current();
    website = clientContext.get_web();  
    clientContext.load(website);
    clientContext.executeQueryAsync(onRequestSucceeded, onRequestFailed);   
    function onRequestSucceeded() {
        alert(website.get_url());
    }
    function onRequestFailed(sender, args) {
        alert('Error: ' + args.get_message());
    }
}  

I have given the path of JQuery in the JSLink text box in the xslt list view web part to make my code simple. It's working fine in my case.

Hope this helps to others,

Thanks.

Answer 2

The SP.ClientContext object is defined in the Sp.js script.
These lines add the basic sp library of SP:

<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.requestexecutor.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.ui.dialog.js"></script>

Answer 3

This works for me when I am using WorkflowServices. It should work in your case as well:

ExecuteOrDelayUntilScriptLoaded(function () {
    ExecuteOrDelayUntilScriptLoaded(function () {
        SP.SOD.registerSod('SP.ClientContext', SP.Utilities.Utility.getLayoutsPageUrl('sp.js'));
        SP.SOD.registerSod('SP.WorkflowServices.WorkflowServicesManager', SP.Utilities.Utility.getLayoutsPageUrl('SP.WorkflowServices.js'));
        SP.SOD.loadMultiple(['SP.ClientContext', 'SP.WorkflowServices.WorkflowServicesManager'], function () {
            var context = SP.ClientContext.get_current();
            var web = context.get_web();
            var servicesManager = SP.WorkflowServices.WorkflowServicesManager.newObject(context, web);
            var instanceService = servicesManager.getWorkflowInstanceService();
        });
    }, "sp.js");
}, "sp.runtime.js");