使用 JavaScript 更新 SharePoint 2013 列表有效但不完全答案

【问题标题】：Updating a SharePoint 2013 list with JavaScript, works but not quite使用 JavaScript 更新 SharePoint 2013 列表有效但不完全
【发布时间】：2019-01-21 05:43:33
【问题描述】：

我正在使用脚本编辑器 Web 部件通过 JavaScript 将数据插入到 SharePoint 2013 列表中。当我在脚本编辑器中使用以下代码时，每次页面加载时都会得到我想要的结果：

<script>
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {});
    var context = SP.ClientContext.get_current();
    var list = context.get_web().get_lists().getByTitle('my_list');
    var itemInfo = new SP.ListItemCreationInformation();

    this.oListItem = list.addItem(itemInfo);

    oListItem.set_item('Title', 'My title testing');
    oListItem.update();
    context.load(oListItem);
</script>

页面加载后，我在 my_list 中获取了新项目，其中 My title testing 在 Title 列中。

但是，我希望在用户单击按钮时发生这种情况。所以我创建了一个带有 onclick 属性的按钮，该属性指向我已将上述代码放入的函数，但它不起作用 - 没有任何反应。这是我放置按钮并将脚本包装在函数中后脚本编辑器的内容：

<html>
    <button type="button" onclick="addToList()">Submit</button>
</html>

<script>
    function addToList() {
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {});
    var context = SP.ClientContext.get_current();
    var list = context.get_web().get_lists().getByTitle('my_list');
    var itemInfo = new SP.ListItemCreationInformation();

    this.oListItem = list.addItem(itemInfo);

    oListItem.set_item('Title', 'My title testing');
    oListItem.update();
    context.load(oListItem);
   }
</script>

我不知道我做错了什么......

非常感谢！

【问题讨论】：

查看控制台中是否出现任何 javascript 错误。也许该函数无法访问某些变量。
不，一切似乎都井井有条...如果代码超出了 onclick 函数，则该代码可以工作。也许这与 this.oListItem 有关？我想不通。
尝试在每个调试命令后加上cosole.log，以查看执行停止的位置。
仍然没有，没有错误。我什至在两种情况下都记录了 oItemList，无论是否单击按钮，它都是同一个对象。我会继续挖掘

标签： javascript sharepoint-2013

【解决方案1】：

尝试将函数放在按钮之前：

<script>
    function addToList() {
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {});
        var context = SP.ClientContext.get_current();
        var list = context.get_web().get_lists().getByTitle('my_list');
        var itemInfo = new SP.ListItemCreationInformation();

        this.oListItem = list.addItem(itemInfo);

        oListItem.set_item('Title', 'My title testing');
        oListItem.update();
        context.load(oListItem);
    }
</script>

<html>
    <button type="button" onclick="addToList()">Submit</button>
</html>

如果这不起作用，或者您不喜欢它，请尝试从脚本内部附加侦听器，如下所示：

<html>
    <button id="myButton" type="button">Submit</button>
</html>

<script>
    function addToList() {
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {});
        var context = SP.ClientContext.get_current();
        var list = context.get_web().get_lists().getByTitle('my_list');
        var itemInfo = new SP.ListItemCreationInformation();

        this.oListItem = list.addItem(itemInfo);

        oListItem.set_item('Title', 'My title testing');
        oListItem.update();
        context.load(oListItem);
    }

   document.getElementById("myButton").addEventListener("click", addToList);
</script>

请参阅工作 jsfiddle here。

【讨论】：

感谢您的回答，但它不起作用。问题是该函数在单击时被调用（如果我在函数中添加控制台日志，我会在单击按钮时看到它），但插入列表不起作用...
不报警，但是我加了一个console.log('函数被调用');当我单击按钮时，我会在控制台中看到它。所以该函数被调用，但它不起作用。

【解决方案2】：

要使用 JSOM 将项目添加到列表，我们可以使用下面的代码。

<script type="text/javascript">
function addToList() {
    ExecuteOrDelayUntilScriptLoaded(function(){
        var context = new SP.ClientContext.get_current();
        var list = context.get_web().get_lists().getByTitle('my_list');
        var itemInfo = new SP.ListItemCreationInformation();
        this.oListItem = list.addItem(itemInfo);
        oListItem.set_item('Title', 'My title testing');
        oListItem.update();
        context.load(oListItem);
        context.executeQueryAsync(onQuerySucceeded, onQueryFailed);
    }, "sp.js");
}
function onQuerySucceeded() {
    console.log('Item created: ' + oListItem.get_id());
    window.location.href=window.location.href;
}
function onQueryFailed(sender, args) {
    console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>
<input type="button" onclick="addToList()" value="Submit"/>

【讨论】：

感谢您的回复。当我这样做时，当我单击按钮时，我在控制台中得到“'addToList'未定义”。如果我把它放在没有该功能的页面上，代码就可以工作，即让它在页面加载时执行。它在函数内部不起作用。
我修改了上面的代码，看看在你的环境下是否可以使用。
谢谢，但还是一样。
我将代码放入列表视图中的内容编辑器 Web 部件中以检查它是否有效。