Uncaught ReferenceError: Type is not defined in sp.runtime.js

Question

I am trying to use the taxonomy Picker example from Office PnP.

I just want to bind one field to one managed metadata term.

The errors I got are here: http://screencast.com/t/nOaTusUH4V

The code I have is:

<head>
    <meta charset="utf-8" />
    <title>Learning bootstrap</title>    
    <meta name="viewport" content="width=device-width, initial-scale=1">   

    <link href="../Content/bootstrap.min.css" rel="stylesheet" /> 
    <link href="../Content/bootstrap-theme.min.css" rel="stylesheet" />
    <link rel="Stylesheet" type="text/css" href="../Content/taxonomypickercontrol.css" />
    <script src="../Scripts/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.js"></script>

    <script src="../Scripts/app.js" type="text/javascript"></script>
    <script src="../Scripts/taxonomypickercontrol.js" type="text/javascript"></script>
</head>


body>
    <div id="divSPChrome"></div>
    <div class="container">      
        <div class="row">
            <div class="col-md-8">
                <h2>Create project site</h2>
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">Project name</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputEmail3" placeholder="Project name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">Domain</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputPassword3" placeholder="Domain">
                            <div class="ms-core-form-line" style="margin-bottom: 0px;">
                               <input type="hidden" id="taxPickerContinent" />

                            </div>
                        </div>
                    </div>

As you can see I have the hidden field. And my App.js file is:

// variable used for cross site CSOM calls
var context;
// variable to hold index of intialized taxPicker controls
var taxPickerIndex = {};

//Wait for the page to load
$(document).ready(function () {

    //Get the URI decoded SharePoint site url from the SPHostUrl parameter.
    var spHostUrl = decodeURIComponent(getQueryStringParameter('SPHostUrl'));
    var appWebUrl = decodeURIComponent(getQueryStringParameter('SPAppWebUrl'));
    var spLanguage = decodeURIComponent(getQueryStringParameter('SPLanguage'));

    //Build absolute path to the layouts root with the spHostUrl
    var layoutsRoot = spHostUrl + '/_layouts/15/';

    //load all appropriate scripts for the page to function
    $.getScript(layoutsRoot + 'SP.Runtime.js',
        function () {
            $.getScript(layoutsRoot + 'SP.js',
                function () {
                    //Load the SP.UI.Controls.js file to render the App Chrome
                    $.getScript(layoutsRoot + 'SP.UI.Controls.js', renderSPChrome);

                    //load scripts for cross site calls (needed to use the people picker control in an IFrame)
                    $.getScript(layoutsRoot + 'SP.RequestExecutor.js', function () {
                        context = new SP.ClientContext(appWebUrl);
                        var factory = new SP.ProxyWebRequestExecutorFactory(appWebUrl);
                        context.set_webRequestExecutorFactory(factory);
                    });

                    //load scripts for calling taxonomy APIs
                    $.getScript(layoutsRoot + 'init.js',
                        function () {
                            $.getScript(layoutsRoot + 'sp.taxonomy.js',
                                function () {
                                    //bind the taxonomy picker to the default keywords termset
                                    //$('#taxPickerKeywords').taxpicker({ isMulti: true, allowFillIn: true, useKeywords: true }, context);

                                    $('#taxPickerContinent').taxpicker({ isMulti: false, allowFillIn: false, useKeywords: false, termSetId: "51f18389-f28a-4961-a903-ee535f7c620d", levelToShowTerms: 1 }, context, initializeCountryTaxPicker);
                                    taxPickerIndex["#taxPickerContinent"] = 0;
                                });
                        });
                });
        });
});

function initializeCountryTaxPicker() {
    //if (this._selectedTerms.length > 0) {
    //    $('#taxPickerCountry').taxpicker({ isMulti: false, allowFillIn: false, useKeywords: false, termSetId: "0cc96f04-d32c-41e7-995f-0401c1f4fda8", filterTermId: this._selectedTerms[0].Id, levelToShowTerms: 2, useTermSetasRootNode: false }, context, initializeRegionTaxPicker);
    //    taxPickerIndex["#taxPickerCountry"] = 4;
    //}
}

function initializeRegionTaxPicker() {
    //if (this._selectedTerms.length > 0) {
    //    $('#taxPickerRegion').taxpicker({ isMulti: false, allowFillIn: false, useKeywords: false, termSetId: "0cc96f04-d32c-41e7-995f-0401c1f4fda8", filterTermId: this._selectedTerms[0].Id, levelToShowTerms: 3, useTermSetasRootNode: false }, context);
    //    taxPickerIndex["#taxPickerRegion"] = 5;
    //}
}

function getValue(propertyName) {
    if (taxPickerIndex != null) {
        return taxPickerIndex[propertyName];
    }
};

//function to get a parameter value by a specific key
function getQueryStringParameter(urlParameterKey) {
    var params = document.URL.split('?')[1].split('&');
    var strParams = '';
    for (var i = 0; i < params.length; i = i + 1) {
        var singleParam = params[i].split('=');
        if (singleParam[0] == urlParameterKey)
            return singleParam[1];
    }
}

function chromeLoaded() {
    $('body').show();
}

//function callback to render chrome after SP.UI.Controls.js loads
function renderSPChrome() {
    var icon = decodeURIComponent(getQueryStringParameter('SPHostLogoUrl'));

    //Set the chrome options for launching Help, Account, and Contact pages
    var options = {
        'appTitle': document.title,
        'appIconUrl': icon,
        'onCssLoaded': 'chromeLoaded()'
    };

    //Load the Chrome Control in the divSPChrome element of the page
    var chromeNavigation = new SP.UI.Controls.Navigation('divSPChrome', options);
    chromeNavigation.setVisible(true);
}

score 12 · Accepted Answer · answered Oct 22 '14 at 16:44

12

Type is defined in the MicrosoftAjax.js file. You can get access to it by using the following script tag to get it from the aspnet CDN:

<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>

You do not need the ScriptManager.

answered Oct 22 '14 at 16:44

Ryan Shripat

5,574
6
49
77

I add this and now I get openDialog is not defined. When I move the function outside of the $(document).ready(function())}, I get no error – BeerusDev Jun 22 '22 at 17:12

score 2 · Answer 2 · answered Sep 24 '14 at 12:09

2

It's likely due to the order in which you register the scripts. Referenced libraries should be registered before the scripts that use them. It is easiest to check your page in the browser, you'll see the order in which they load.

answered Sep 24 '14 at 12:09

aahoogendoorn

444
6
9

Max · Answer 3 · 2014-09-20T20:44:14.937

1

You load SP.Runtime.js and SP.js twice. Once on the head and on document ready. Try to remove one of them, but the error can be another I see more error before 404.

edited Sep 20 '14 at 20:44

answered Sep 20 '14 at 08:09

Max

6,821
3
43
59

I removed them from the html but that didnt change anything – Luis Valencia Sep 20 '14 at 08:32
Try to add console.log(yourmessage) inside functions to see in witch point raise the error, I think there are some var not initialized. – Max Sep 20 '14 at 20:45

Sander Lesage · Answer 4 · 2014-09-24T11:44:15.837

1

you're missing the scriptmanager. Put it above <div id="divSPChrome"></div>

<asp:ScriptManager ID="ScriptManager" runat="server" EnableCdn="True" />

When your are working in html pages, just try to reference this after loading jquery.

<script src="https://ajax.aspnetcdn.com/ajax/4.0/MicrosoftAjax.js" type="text/javascript"></script>

edited Sep 24 '14 at 11:44

answered Sep 24 '14 at 08:58

Sander Lesage

11
3

1

this is an html page not an aspx page, and there are not asp.net controls on the page, why would I need that? – Luis Valencia Sep 24 '14 at 09:07

Uncaught ReferenceError: Type is not defined in sp.runtime.js

4 Answers4