Post to SharePoint List HTML/js Web Form

Question

I am beating my head against a wall. I've looked at many examples and cannot get this to work.

I am trying to use a simple HTML page with a javascript base (no C#/ASPX, not a Visual Studio solution or SharePoint Designer solution.) to add an item to a SharePoint list. My problem seems to be in getting the 'SP.Runtime.js' & 'SP.js' files to load in my javascript . I say that because in the example I am using (Here), when I get the line containing 'SP.Data.WorkflowTasksItem', the debugger throws an SP not defined error.

My research says that I need to include SP javascript files from the SharePoint site. I added this code below to pull in the two js files from the Sharepoint server, but it begins to execute the first getScript and then stops without any error message or anything logged into the console.

Here is my javascript:

//  js/index.js
$(document).ready(function() {
    $('#request_form').bootstrapValidator({
        submitHandler: function(validator, form, submitButton) {
            //Call CreateListItem function once sp.js is loaded
            ExecuteOrDelayUntilScriptLoaded(createListItem, "sp.js");
        }
    }
}

Here is my html head

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
    <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css'>
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css'>
    <link rel="stylesheet" href="css/style.css">

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.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='js/index.js'></script>
</head>

With the new code, I am getting a reference error:

Uncaught ReferenceError: ExecuteOrDelayUntilScriptLoaded is not defined

Anit K Anit K · Accepted Answer · 2017-03-14T07:24:37

You can refer SP.JS and SP.RUNTIME.JS in section of your HTML file.

<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>

In javascript code, you can use ExecuteOrDelayUntilScriptLoaded() function to call createListItem.

Like below snippet:

//Function to create List Item
function createListItem() {
alert('List Item Created');
}

//Call CreateListItem function once sp.js is loaded
ExecuteOrDelayUntilScriptLoaded(createListItem, "sp.js");

Post to SharePoint List HTML/js Web Form

1 Answers