JavaScript 기능이 실행되지 않음 (콘솔에서 함수가 "함수가 아닙니다"라는 메시지를 반환 함)

Question

JQuery를 사용하여 SharePoint 목록에서 목록 항목 데이터를 추출한 다음 해당 데이터를 사용하여 SharePoint 목록에 데이터를 채우는 SharePoint 2010 용 .aspx 웹 페이지를 만들었습니다. Simile Timeline.

페이지에는 AJAX의 일부 양식을 사용하는 필터가 포함되어 있으며 텍스트 상자에 입력 된 내용을 기반으로 타임 라인에 표시되는 이벤트를 업데이트/필터링합니다 (예제 here 참조). 어떤 이유로 든 SharePoint에서이 모든 기능을 구현할 때 (SharePoint 라이브러리에 .aspx 파일과 다른 필요한 파일을 배치하는 것만으로) 필터를 제외하고 모두 작동합니다. Firebug를 사용하여 콘솔 로그를 확인할 때 오류가 발생했습니다.

"onKeyPress는 기능이 아닙니다."

onKeyPress는 필터를 구현에 포함 된 기능 중 하나입니다,하지만 난 브라우저가 때 onKeyPress를 호출하는 기능을 포함하여 (동일한의 .js 파일에서 다른 기능의 기능 - 많이 표시되지 않는 이유를 전혀 몰라 시작하십시오) 잘 실행하십시오. 문제가 더 이상하게하려면 함수를 실행하기 직전에 중단 점을 넣은 다음 중지 한 후에 중단 점을 유지하면 모든 것이 올바르게 작동합니다.

이것은 타이밍 관련 문제 일 수 있다고 생각합니다. 그러나 나는 window.onload, $(document).ready을 사용하고 있었고 약 1 시간 동안 _spBodyOnLoadFunctionName이라는 SharePoint 특정 기능을 사용하여 코드 동작에 영향을주지 않았습니다. 상황과 가장 관련이있을 것으로 보인다

파일 (아래) listdetails.aspx

<%@ Page Language="C#" MasterPageFile="~masterurl/default.master" inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.WebPartPage.Document" %> 

<asp:Content runat="server" ContentPlaceHolderID="PlaceHolderAdditionalPageHead"> 

    <script> 
     Timeline_ajax_url="timeline/timeline_ajax/simile-ajax-api.js"; 
     Timeline_urlPrefix='timeline/timeline_js/'; 
     Timeline_parameters='bundle=true'; 
    </script> 
    <script src="timeline/timeline_js/timeline-api.js" type="text/javascript"></script> 

    <script src="examples.js" type="text/javascript"></script> 
    <script> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
    <script src="tline.js" type="text/javascript"></script> 
    <script type="text/javascript"> 

     $(document).ready(function() { 
      // Build the URL of the Lists.asmx web service. 
      // This is done by stripping the last two parts (/doclib/page) of the URL. 
      var hrefParts = window.location.href.split('/'); 
      var wsURL = ""; 
      for (i = 0; i < (hrefParts.length - 2); i++) { 
       if (i > 0) 
        wsURL += "/"; 
       wsURL += hrefParts[i]; 
      } 
      wsURL += "/_vti_bin/lists.asmx"; 

      // The SOAP Envelope to send to the Lists.asmx web service. 
      // Tip: this XML can be copied from /_vti_bin/lists.asmx?op=GetListCollection 
      var soapEnv = 
       "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \ 
        <soapenv:Body xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \ 
         <GetListItems> \ 
          <listName>SimileData</listName> \ 
         </GetListItems> \ 
        </soapenv:Body> \ 
       </soapenv:Envelope>"; 

      // Do the web service call async. 
      $.ajax({ 
       url: wsURL, 
       type: "POST", 
       dataType: "xml", 
       data: soapEnv, 
       complete: processResult, 
       contentType: "text/xml; charset=\"utf-8\"" 
      }); 
     }); 

     window.onresize=onResize; 

    </script> 

</asp:Content> 
<asp:Content runat="server" ContentPlaceHolderID="PlaceHolderMain"> 
    <ul id="data"> 
    </ul> 
    <div id="body"> 
     <h1>Simile Timeline Demo</h1> 
     <p>Timeline version <span id='tl_ver'></span>.</p> 
     <script>Timeline.writeVersion('tl_ver')</script> 

     <div id="tl" class="timeline-default" style="height: 300px;"> 
     </div> 
     <div class="footnotes"> 
      <br /> <br /> 
     </div> 

     <div class="controls" id="controls"> 
     </div> 
     <div class="theButton" id="theButton"> 
      <button type="button">Load Timeline</button> 
     </div> 
    </div> 

</asp:Content> 
<asp:Content runat="server" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea"> 
    List Details 
</asp:Content> 
<asp:Content runat="server" ContentPlaceHolderID="PlaceHolderPageTitle"> 
    List Details 
</asp:Content> 

tline.js (아래),

var tl; 
var eventSource = new Timeline.DefaultEventSource(); 

function processResult(xData, status) { 
    var tStart, tEnd, tLate, tEarly, tTitle, tText, tLink; 
    var tInst = true; 
    var evt; 
    $(xData.responseXML).find("z\\:row").each(function() { 
     tTitle = $(this).attr("ows_Title0").split("#")[1]; 
     tStart = Timeline.DateTime.parseGregorianDateTime($(this).attr("ows_Delivery_x0020_Date").split(" ")[0]); 
     tText = $(this).attr("ows_Description_x0020_of_x0020_Chang"); 
     tLink = $(this).attr("ows_ID"); 
     tLink = "some_link_stuff" + tLink + "some_link_stuff"; 

     var evt = new Timeline.DefaultEventSource.Event(tStart, tEnd, tLate, tEarly, tInst, tTitle, tText); 
     evt._start = tStart; 
     evt._end = tStart; 
     evt._earliestEnd = tStart; 
     evt._latestStart = tStart; 
     evt._description = tText; 
     evt._title = tTitle; 
     evt._text = tTitle; 
     evt._link = tLink; 
     eventSource.add(evt); 
    }); 

    onLoad(); 
} 

function onLoad() { 

    var theme = Timeline.ClassicTheme.create(); 
    theme.event.bubble.width = 250; 
    theme.mouseWheel = 'zoom'; 

    var rightNow = new Date(); 
    var theDay = rightNow.getDate(); 
    theDay = theDay.toString(); 
    if(theDay.length < 2){ 
     theDay = "0" + theDay; 
    } 
    var theYear = rightNow.getFullYear(); 
    var theMonth = rightNow.getMonth() + 1; 
    theMonth = theMonth.toString(); 
    if(theMonth.length < 2){ 
     theMonth = "0" + theMonth; 
    } 

    var theDate = theYear + "-" + theMonth + "-" + theDay; 
    var date = Timeline.DateTime.parseGregorianDateTime(theDate); 

    var bandInfos = [ 
     Timeline.createBandInfo({ 
      width:   "80%", 
      intervalUnit: Timeline.DateTime.MONTH, 
      intervalPixels: 600, 
      eventSource: eventSource, 
      zoomIndex:  10, 
      zoomSteps:  new Array(
       {pixelsPerInterval: 280, unit: Timeline.DateTime.HOUR}, 
       {pixelsPerInterval: 140, unit: Timeline.DateTime.HOUR}, 
       {pixelsPerInterval: 70, unit: Timeline.DateTime.HOUR}, 
       {pixelsPerInterval: 35, unit: Timeline.DateTime.HOUR}, 
       {pixelsPerInterval: 400, unit: Timeline.DateTime.DAY}, 
       {pixelsPerInterval: 200, unit: Timeline.DateTime.DAY}, 
       {pixelsPerInterval: 100, unit: Timeline.DateTime.DAY}, 
       {pixelsPerInterval: 50, unit: Timeline.DateTime.DAY}, 
       {pixelsPerInterval: 1000, unit: Timeline.DateTime.MONTH}, 
       {pixelsPerInterval: 800, unit: Timeline.DateTime.MONTH}, 
       {pixelsPerInterval: 600, unit: Timeline.DateTime.MONTH}, 
       {pixelsPerInterval: 400, unit: Timeline.DateTime.MONTH}, 
       {pixelsPerInterval: 200, unit: Timeline.DateTime.MONTH}, 
       {pixelsPerInterval: 100, unit: Timeline.DateTime.MONTH}, 
       {pixelsPerInterval: 50, unit: Timeline.DateTime.MONTH}, 
       {pixelsPerInterval: 400, unit: Timeline.DateTime.YEAR}, 
       {pixelsPerInterval: 200, unit: Timeline.DateTime.YEAR}, 
       {pixelsPerInterval: 100, unit: Timeline.DateTime.YEAR}, 
       {pixelsPerInterval: 50, unit: Timeline.DateTime.YEAR}, 
       {pixelsPerInterval: 400, unit: Timeline.DateTime.DECADE}, 
       {pixelsPerInterval: 200, unit: Timeline.DateTime.DECADE}, 
       {pixelsPerInterval: 100, unit: Timeline.DateTime.DECADE}, 
       {pixelsPerInterval: 50, unit: Timeline.DateTime.DECADE} 
      ), 
      date:   date, 
      theme:   theme 
     }), 
     Timeline.createBandInfo({ 
      width:   "20%", 
      intervalUnit: Timeline.DateTime.MONTH, 
      intervalPixels: 200, 
      eventSource: eventSource, 
      date:   date, 
      overview:  true, 
      theme:   theme 
     }) 
    ]; 
    bandInfos[1].syncWith = 0; 

    bandInfos[1].highlight = true; 

    tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL); 
    // tl.loadXML("https://portal.gtri.gatech.edu/gtri/elsys/joshtest/experiment/elsys.xml", function(xml, url) { eventSource.loadXML(xml, url); }); 

    setupFilterHighlightControls(document.getElementById("controls"), tl, [0,1], theme); 
} 
var resizeTimerID = null; 
function onResize() { 
    if (resizeTimerID == null) { 
     resizeTimerID = window.setTimeout(function() { 
      resizeTimerID = null; 
      tl.layout(); 
     }, 500); 
    } 
} 

및 examples.js (아래)입니다

function centerSimileAjax(date) { 
    tl.getBand(0).setCenterVisibleDate(SimileAjax.DateTime.parseGregorianDateTime(date)); 
} 

function setupFilterHighlightControls(div, timeline, bandIndices, theme) { 
    var table = document.createElement("table"); 
    var tr = table.insertRow(0); 

    var td = tr.insertCell(0); 
    td.innerHTML = "Filter:"; 

    td = tr.insertCell(1); 
    td.innerHTML = "Highlight:"; 

    var handler = function(elmt, evt, target) { 
     onKeyPress(timeline, bandIndices, table); 
    }; 

    tr = table.insertRow(1); 
    tr.style.verticalAlign = "top"; 

    td = tr.insertCell(0); 

    var input = document.createElement("input"); 
    input.type = "text"; 
    SimileAjax.DOM.registerEvent(input, "keypress", handler); 
    td.appendChild(input); 

    for (var i = 0; i < theme.event.highlightColors.length; i++) { 
     td = tr.insertCell(i + 1); 

     input = document.createElement("input"); 
     input.type = "text"; 
     SimileAjax.DOM.registerEvent(input, "keypress", handler); 
     td.appendChild(input); 

     var divColor = document.createElement("div"); 
     divColor.style.height = "0.5em"; 
     divColor.style.background = theme.event.highlightColors[i]; 
     td.appendChild(divColor); 
    } 

    td = tr.insertCell(tr.cells.length); 
    var button = document.createElement("button"); 
    button.innerHTML = "Clear All"; 
    SimileAjax.DOM.registerEvent(button, "click", function() { 
     clearAll(timeline, bandIndices, table); 
    }); 
    td.appendChild(button); 

    div.appendChild(table); 
} 

var timerID = null; 
function onKeyPress(timeline, bandIndices, table) { 
    if (timerID != null) { 
     window.clearTimeout(timerID); 
    } 
    timerID = window.setTimeout(function() { 
     performFiltering(timeline, bandIndices, table); 
    }, 300); 
} 
function cleanString(s) { 
    return s.replace(/^\s+/, '').replace(/\s+$/, ''); 
} 
function performFiltering(timeline, bandIndices, table) { 
    timerID = null; 

    var tr = table.rows[1]; 
    var text = cleanString(tr.cells[0].firstChild.value); 

    var filterMatcher = null; 
    if (text.length > 0) { 
     var regex = new RegExp(text, "i"); 
     filterMatcher = function(evt) { 
      return regex.test(evt.getText()) || regex.test(evt.getDescription()); 
     }; 
    } 

    var regexes = []; 
    var hasHighlights = false; 
    for (var x = 1; x < tr.cells.length - 1; x++) { 
     var input = tr.cells[x].firstChild; 
     var text2 = cleanString(input.value); 
     if (text2.length > 0) { 
      hasHighlights = true; 
      regexes.push(new RegExp(text2, "i")); 
     } else { 
      regexes.push(null); 
     } 
    } 
    var highlightMatcher = hasHighlights ? function(evt) { 
     var text = evt.getText(); 
     var description = evt.getDescription(); 
     for (var x = 0; x < regexes.length; x++) { 
      var regex = regexes[x]; 
      if (regex != null && (regex.test(text) || regex.test(description))) { 
       return x; 
      } 
     } 
     return -1; 
    } : null; 

    for (var i = 0; i < bandIndices.length; i++) { 
     var bandIndex = bandIndices[i]; 
     timeline.getBand(bandIndex).getEventPainter().setFilterMatcher(filterMatcher); 
     timeline.getBand(bandIndex).getEventPainter().setHighlightMatcher(highlightMatcher); 
    } 
    timeline.paint(); 
} 
function clearAll(timeline, bandIndices, table) { 
    var tr = table.rows[1]; 
    for (var x = 0; x < tr.cells.length - 1; x++) { 
     tr.cells[x].firstChild.value = ""; 
    } 

    for (var i = 0; i < bandIndices.length; i++) { 
     var bandIndex = bandIndices[i]; 
     timeline.getBand(bandIndex).getEventPainter().setFilterMatcher(null); 
     timeline.getBand(bandIndex).getEventPainter().setHighlightMatcher(null); 
    } 
    timeline.paint(); 
} 

로딩되지 않는 함수 (onKeyPress)는 examples.js (위)에 있습니다. 모든 도움을 미리 보내 주셔서 감사합니다.

Answer 1

나는 함수의 이름을 바꾸려고했는데 어떻게 든 고쳐 졌으므로 덕분에 dtryan. 그러나 실제로 user1090190이 관찰 한 것처럼 이름이 다른 컨텍스트에서는 중요하지 않기 때문에 이름이 중요한 이유를 이해할 수 없습니다. SharePoint에 넣기 전까지는 코드가 모두 완벽하게 작동하고 그 위에 브라우저 기능이나 SharePoint 기능이 내장 된 동일한 이름의 함수를 검색하면 아무 것도 반환되지 않으므로이 문제의 출처를 모르겠습니다. SharePoint에는 OnKeyPress 및 onkeypress라는 함수가 있으므로 onKeyPress라는 다른 문서화되지 않은 함수가있을 수 있습니다. 이 문제가 발생할 수있는 다른 사람들에게 도움이되기를 바랍니다. 그러나 이름이 왜 작동하지 않는지에 대한 더 나은 설명이 있으면 의견을 말하십시오.

도움 주셔서 감사합니다.