JavaScript函数没有运行（控制台返回函数“不是函数”）

Question

我为SharePoint 2010创建了一个.aspx网页，该网页使用JQuery从SharePoint列表中提取列表项数据，然后使用该数据填充Simile Timeline。

该页面包含一个过滤器，我相信它使用某种形式的AJAX，根据文本框中输入的内容更新/过滤时间轴上显示的事件（参见示例here）。出于某种原因，当我在SharePoint上实现所有这些（通过简单地将.aspx文件和其他必要文件放在SharePoint库中）时，除了过滤器之外，一切都有效。当我检查控制台日志（使用Firebug）时，给出的错误是

  

“onKeyPress不是一个函数”。

onKeyPress是实现过滤器所涉及的功能之一，但我不知道为什么浏览器没有看到这个函数 - 来自同一个.js文件的大量其他函数（包括调用onKeyPress的函数）开始）运行得很好。更让人感到奇怪的是，如果我在函数运行之前设置了一个断点，然后在停止后允许它继续，那么一切正常。

这让我相信它可能是一个与时间相关的问题，但我一直在修补window.onload, $(document).ready和一个名为_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。我希望这可以帮助其他可能遇到此问题的人，但如果有人对该名称无法解释的原因有更好的解释，请发表评论。

感谢您的帮助。