2014-09-19 6 views
4

Office PnP의 분류 피커 예제를 사용하려고합니다.잡히지 않은 ReferenceError : 유형이 sp.runtime.js에 정의되지 않았습니다.

하나의 필드를 하나의 관리되는 메타 데이터 용어에 바인딩하기 만하면됩니다. 내가 가진

오류는 여기에 있습니다 : 내가 가지고있는 http://screencast.com/t/nOaTusUH4V

코드는 다음과 같습니다

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

당신은 내가 숨겨진 필드가 볼 수 있듯이. 그리고 내 App.js 파일은 다음과 같습니다

// 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); 
} 

답변

7

Type은 MicrosoftAjax.js 파일에 정의되어 있습니다. 당신은 ASPNET CDN에서 그것을 얻기 위해 다음 script 태그를 사용하여에 액세스 할 수 있습니다 :

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

당신은 스크립트 관리자가 필요하지 않습니다.

1

당신은 두 번 SP.Runtime.jsSP.js을로드합니다. 머리와 문서 준비가 끝나면 그 중 하나를 제거하려고 시도하지만 다른 오류가 404 이전에 더 많이 표시 될 수 있습니다.

+0

나는 html에서 그들을 제거했지만 아무 것도 변경되지 않았습니다 –

+0

마녀 포인트에서 볼 수있는 기능 안에 console.log (yourmessage)를 추가하려고하면 오류가 발생합니다. 초기화되지 않은 var가 있다고 생각합니다. – Max

1

scriptmanager가 누락되었습니다. 단지로드 JQuery와 후이를 참조하려고 <div id="divSPChrome"></div>

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

당신의 HTML 페이지에서 작업 위를 넣습니다.

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

이것은 aspx 페이지가 아닌 html 페이지이며 asp.net 컨트롤이 페이지에 없기 때문에 왜 필요합니까? –

1

스크립트를 등록한 순서 때문일 가능성이 큽니다. 참조 된 라이브러리는이를 사용하는 스크립트보다 먼저 등록해야합니다. 브라우저에서 페이지를 확인하는 것이 가장 쉽습니다.로드하는 순서가 표시됩니다.