Using the sharepoint javascript library (sp.js)

Question

I created a form with HTML and JS for which the ultimate aim is to store data in a SharePoint list when the Submit button is clicked.

For some reason, the code does not work when I embed it inside an SharePoint page. I cannot see any errors in the developer's console.

When I run the code outside of SP it gets to the alert('In submitData'); but obviously does not work since it is not on SP. When I embed the code in an SP page, that alert is not shown.

Code:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head> 

<style>
    html
    {
        font-family: Calibri;
    }

    .tbl
    {
        border: 1px black solid;

    }

    .tbl table
    {
        text-align: center;

    }

    .tbl th
    {
        border: 1px black solid;
        background-color: lightgray;

    }

    .tbl td
    {
        border: 1px black solid;

    }

</style>

<script type="text/javascript">

// A $( document ).ready() block.
$( document ).ready(function() {
    n =  new Date();
    y = n.getFullYear();
    m = n.getMonth() + 1;
    d = n.getDate();
    <!-- document.getElementById("date").innerHTML = m + "/" + d + "/" + y;  -->    

    for (i = 0; i < 5; i++)     
        document.getElementsByClassName("date")[i].innerHTML = m + "/" + d + "/" + y;   
});

</script>

<script type="text/javascript">

function createListItem(check, description, dpsp1, cmdc1, cmdc2, cmas1, sqn41, sqn42, cmws1, cmws2, issues, correctiveaction) {

    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('WeeklyReport');

    var itemCreateInfo = new SP.ListItemCreationInformation();
    this.oListItem = oList.addItem(itemCreateInfo);

    oListItem.set_item('Check', check);
    oListItem.set_item('Check Description', description);   
    oListItem.set_item('DPSP1', dpsp1); 
    oListItem.set_item('CDMDC1', cmdc1);
    oListItem.set_item('CDMDC2', cmdc2);
    oListItem.set_item('CMAS1', cmas1);
    oListItem.set_item('SQN41', sqn41); 
    oListItem.set_item('SQN42', sqn42);
    oListItem.set_item('CMWS1', cmws1);
    oListItem.set_item('CMWS2', cmws2);
    oListItem.set_item('Issues', issues);
    oListItem.set_item('Corrective Action', correctiveaction);

    oListItem.update();

    clientContext.load(oListItem);

    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded() {

    alert('Item created: ' + oListItem.get_id());
}

function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

function submitData()
{

    alert('In submitData');

    /*GET SYSTEM CLOCK VALUES FOR SERVER*/
    var DPSP1_Clock = document.getElementById("getDPSP1Clock").value;
    var CMDC1_Clock = document.getElementById("getCMDC1Clock").value;
    var CMDC2_Clock = document.getElementById("getCMDC2Clock").value;
    var CMAS1_Clock = document.getElementById("getCMAS1Clock").value;
    var SQN41_Clock = document.getElementById("getSQN41Clock").value;
    var SQN42_Clock = document.getElementById("getSQN42Clock").value;
    var CMWS1_Clock = document.getElementById("getCMWS1Clock").value;
    var CMWS2_Clock = document.getElementById("getCMWS2Clock").value;
    var Issues_Clock = document.getElementById("getClockIssues").value;
    var CA_Clock = document.getElementById("getClockCorrectiveActions").value;
    createListItem("System Clock",
                   "System Clock Verification of the correct Time",
                   DPSP1_Clock,
                   CMDC1_Clock,
                   CMDC2_Clock,
                   CMAS1_Clock,
                   SQN42_Clock,
                   SQN41_Clock,
                   CMWS1_Clock,
                   CMWS2_Clock,
                   Issues_Clock,
                   CA_Clock);

    /*GET BACKUP VALUES FOR SERVER*/
    var DPSP1_Backup = document.getElementById("getDPSP1Backup").value;
    var CMDC1_Backup = document.getElementById("getCMDC1Backup").value;
    var CMDC2_Backup = document.getElementById("getCMDC2Backup").value;
    var CMAS1_Backup = document.getElementById("getCMAS1Backup").value;
    var SQN41_Backup = document.getElementById("getSQN41Backup").value;
    var SQN42_Backup = document.getElementById("getSQN42Backup").value;
    var CMWS1_Backup = document.getElementById("getCMWS1Backup").value;
    var CMWS2_Backup = document.getElementById("getCMWS2Backup").value;
    var Issues_Backup = document.getElementById("getBackupIssues").value;
    var CA_Backup = document.getElementById("getBackupCorrectiveActions").value;
    createListItem("Backups",
                   "Confirm status of DPM backups",
                   DPSP1_Backup,
                   CMDC1_Backup,
                   CMDC2_Backup,
                   CMAS1_Backup,
                   SQN42_Backup,
                   SQN41_Backup,
                   CMWS1_Backup,
                   CMWS2_Backup,
                   Issues_Backup,
                   CA_Backup);

    /*GET ULS LOGS VALUES FOR SERVER*/
    var DPSP1_Logs = document.getElementById("getDPSP1Logs").value;
    var CMDC1_Logs = document.getElementById("getCMDC1Logs").value;
    var CMDC2_Logs = document.getElementById("getCMDC2Logs").value;
    var CMAS1_Logs = document.getElementById("getCMAS1Logs").value;
    var SQN41_Logs = document.getElementById("getSQN41Logs").value;
    var SQN42_Logs = document.getElementById("getSQN42Logs").value;
    var CMWS1_Logs = document.getElementById("getCMWS1Logs").value;
    var CMWS2_Logs = document.getElementById("getCMWS2Logs").value;
    var Issues_Logs = document.getElementById("getLogsIssues").value;
    var CA_Logs = document.getElementById("getLogsCorrectiveActions").value;
    createListItem("ULS Logs",
               "Check for high level errors",
               DPSP1_Logs,
               CMDC1_Logs,
               CMDC2_Logs,
               CMAS1_Logs,
               SQN42_Logs,
               SQN41_Logs,
               CMWS1_Logs,
               CMWS2_Logs,
               Issues_Logs,
               CA_Logs);

    /*GET SQL CLUSTER STATUS VALUES FOR SERVER*/
    var DPSP1_SQL = document.getElementById("getDPSP1SQL").value;
    var CMDC1_SQL = document.getElementById("getCMDC1SQL").value;
    var CMDC2_SQL = document.getElementById("getCMDC2SQL").value;
    var CMAS1_SQL = document.getElementById("getCMAS1SQL").value;
    var SQN41_SQL = document.getElementById("getSQN41SQL").value;
    var SQN42_SQL = document.getElementById("getSQN42SQL").value;
    var CMWS1_SQL = document.getElementById("getCMWS1SQL").value;
    var CMWS2_SQL = document.getElementById("getCMWS2SQL").value;
    var Issues_SQL = document.getElementById("getSQLIssues").value;
    var CA_SQL = document.getElementById("getSQLCorrectiveActions").value;
    createListItem("SQL Cluster Status",
           "Look for errors in the SQL Fail over cluster Manager",
           DPSP1_SQL,
           CMDC1_SQL,
           CMDC2_SQL,
           CMAS1_SQL,
           SQN42_SQL,
           SQN41_SQL,
           CMWS1_SQL,
           CMWS2_SQL,
           Issues_SQL,
           CA_SQL);


    /*GET HEALTH ANALYZER STATUS VALUES FOR SERVER*/
    var DPSP1_Health = document.getElementById("getDPSP1Health").value;
    var CMDC1_Health = document.getElementById("getCMDC1Health").value;
    var CMDC2_Health = document.getElementById("getCMDC2Health").value;
    var CMAS1_Health = document.getElementById("getCMAS1Health").value;
    var SQN41_Health = document.getElementById("getSQN41Health").value;
    var SQN42_Health = document.getElementById("getSQN42Health").value;
    var CMWS1_Health = document.getElementById("getCMWS1Health").value;
    var CMWS2_Health = document.getElementById("getCMWS2Health").value;
    var Issues_Health = document.getElementById("getHealthIssues").value;
    var CA_Health = document.getElementById("getHealthCorrectiveActions").value;
    createListItem("Sharepoint Health Analyzer",
                   "Check the Health Analyser in the Central Admin",
                   DPSP1_Health,
                   CMDC1_Health,
                   CMDC2_Health,
                   CMAS1_Health,
                   SQN42_Health,
                   SQN41_Health,
                   CMWS1_Health,
                   CMWS2_Health,
                   Issues_Health,
                   CA_Health);

    alert('Added successfully');

}

</script>

<table class="tbl">
    <tr>
        <th colspan="13">Weekly Health Check: Collaboration</th>
    </tr>

    <tr>
        <th>Date</th>
        <th>Check</th>
        <th>Check Description</th>
        <th>DPSP1</th>
        <th>CMDC1</th>
        <th>CMDC2</th>
        <th>CMAS1</th>
        <th>SQN41</th>
        <th>SQN42</th>
        <th>CMWS1</th>
        <th>CMWS2</th>
        <th>Issues</th>
        <th>Corrective Action</th>
    </tr>

    <tr>
        <td><p class="date"></p></td>
        <td>System Clock</td>
        <td>System Clock Verification of the correct Time</td>
        <td> 
            <select id="getDPSP1Clock">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select> 
        </td>

        <td>
            <select id="getCMDC1Clock">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select> 
        </td>

        <td>
            <select id="getCMDC2Clock">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select> 
        </td>

        <td>
            <select  id="getCMAS1Clock">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select> 

        </td>

        <td>
            <select  id="getSQN41Clock">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select>       
        </td>

        <td>
            <select  id="getSQN42Clock">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select>       
        </td>

        <td>
            <select  id="getCMWS1Clock">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select>       
        </td>

        <td>
            <select  id="getCMWS2Clock">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select>       
        </td>


        <td>
             <textarea rows="4" cols="30"  id="getClockIssues">
             </textarea>    
        </td>

        <td>
             <textarea rows="4" cols="30"  id="getClockCorrectiveActions">
             </textarea>
        </td>
    </tr>

    <tr>
        <td><p class="date"></p></td>
        <td>Backups</td>
        <td>Confirm status of DPM backups</td>
        <td> 
            <select  id="getDPSP1Backup">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select> 
        </td>

        <td>
            <select id="getCMDC1Backup">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select> 
        </td>

        <td>
            <select id="getCMDC2Backup">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select> 
        </td>

        <td>
            <select id="getCMAS1Backup">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select> 

        </td>

        <td>
            <select id="getSQN41Backup">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select>       
        </td>

        <td>
            <select id="getSQN42Backup">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select>       
        </td>

        <td>
            <select id="getCMWS1Backup">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select>       
        </td>

        <td>
            <select id="getCMWS2Backup">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select>       
        </td>


        <td>
             <textarea rows="4" cols="30" id="getBackupIssues">
             </textarea>    
        </td>

        <td>
             <textarea rows="4" cols="30" id="getBackupCorrectiveActions">
             </textarea>
        </td>
    </tr>

    <tr>
        <td><p class="date"></p></td>
        <td>ULS Logs</td>
        <td>Check for high level errors</td>
        <td> 
            <select id="getDPSP1Logs">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select> 
        </td>

        <td>
            <select id="getCMDC1Logs">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select> 
        </td>

        <td>
            <select id="getCMDC2Logs">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select> 
        </td>

        <td>
            <select id="getCMAS1Logs">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select> 

        </td>

        <td>
            <select id="getDSQN41Logs">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select>       
        </td>

        <td>
            <select  id="getSQN42Logs">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select>       
        </td>

        <td>
            <select id="getCMWS1Logs">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select>       
        </td>

        <td>
            <select id="getCMWS2Logs">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select>       
        </td>


        <td>
             <textarea rows="4" cols="30" id="getLogsIssues">
             </textarea>
        </td>

        <td>
             <textarea rows="4" cols="30" id="getLogsCorrectiveAction">
             </textarea>
        </td>
    </tr>

    <tr>
        <td><p class="date"></p></td>
        <td>SQL Cluster Status</td>
        <td>Look for errors in the SQL Fail over cluster Manager</td>

        <td> 
            <select id="getDPSP1SQL">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select> 
        </td>

        <td>
            <select id="getCMDC1SQL">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select> 
        </td>

        <td>
            <select id="getCMDC2SQL">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select> 
        </td>

        <td>
            <select id="getCMAS1SQL">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select> 

        </td>

        <td>
            <select id="getSQN41SQL">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select>       
        </td>

        <td>
            <select  id="getSQN42SQL">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select>       
        </td>

        <td>
            <select id="getCMWS1SQL">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select>       
        </td>

        <td>
            <select id="getCMWS2SQL">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select>       
        </td>


        <td>
             <textarea rows="4" cols="30" id="getSQLIssues">
             </textarea>
        </td>

        <td>
             <textarea rows="4" cols="30" id="getSQLCorrectiveActions">
             </textarea>
        </td>
    </tr>

    <tr>
        <td><p class="date"></p></td>
        <td>Sharepoint Health Analyzer</td>
        <td>Check the Health Analyser in the Central Admin</td>
        <td> 
            <select id="getDPSP1Health">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select> 
        </td>

        <td>
            <select id="getCMDC1Health">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select> 
        </td>

        <td>
            <select id="getCMDC2Health">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select> 
        </td>

        <td>
            <select id="getCMAS1Health">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select> 

        </td>

        <td>
            <select id="getSQN41Health">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select>       
        </td>

        <td>
            <select id="getSQN42Health">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select>       
        </td>

        <td>
            <select id="getCMWS1Health">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select>       
        </td>

        <td>
            <select id="getCMWS2Health">
              <option value="Pass">Pass</option>
              <option value="Fail">Fail</option>
              <option value="N/A">N/A</option>
            </select>       
        </td>       

        <td>
             <textarea rows="4" cols="30" id="getHealthIssues">
             </textarea>    
        </td>

        <td>
             <textarea rows="4" cols="30"id="getHealthCorrectiveActions">
             </textarea>
        </td>
    </tr>

    <tr>
        <td colspan='13'><button id ="submitBtn"type="button" style="float: right" onclick="submitData();"> Submit</button></td>
    </tr>
</table>

List:

Any idea what I am doing wrong?

Mohamed El-Qassas MVP · Accepted Answer · 2017-05-12 11:49:33Z

In case you need to run it withing ShrePoint you need to use ExecuteOrDelayUntilScriptLoaded method that used to delay a function call unless a particular script (SP) is loaded.

To use ExecuteOrDelayUntilScriptLoaded do the following :

<script type="text/javascript">
      function yourfunction(){

                             }
     ExecuteOrDelayUntilScriptLoaded(yourfunction,"SP.js");
</script>

In case you need to run it outside Sharepoint try to reference the following

<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js">
</script>
<script type="text/javascript" src="_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="_layouts/15/sp.js"></script>
<script type="text/javascript">
      // Type your code here.
</script>

Alternative way to load SP scripts files

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
<script>


   $(document).ready(function(){
        var scriptbase = "http://Qassas/" + "/_layouts/15/";
    //Do not change the order, scripts should load by order.  
     $.getScript(scriptbase + "init.js",
            function () {
                $.getScript(scriptbase + "SP.Runtime.js",
                   function () {
                $.getScript(scriptbase + "SP.js", execOperation);
              });
          });
           });
// **add your code**
</script>

I updated the code and added ExecuteOrDelayUntilScriptLoaded(yourfunction,"SP.js"); (do i need to do this for all functions?) I also added reference to sp.js with no success. pastebin.com/09A58yi8 — Brian, May 12, 2017 at 12:10
Hi, I provided a pastebin link with the full code (pastebin.com/09A58yi8) — Brian, May 12, 2017 at 12:16
please in your code where you set siteUrl ? also are you will embed the above code in script editor or independent HTML file? meanwhile, i will provide you code that will add list item with one column in a simple list and you should update it with your columns okay ? — Mohamed El-Qassas MVP, May 12, 2017 at 12:48

Stack Exchange Network

Using the sharepoint javascript library (sp.js)

1 Answer 1

Your Answer

Not the answer you're looking for? Browse other questions tagged
list
javascript
sharepoint-foundation
sp.js
or ask your own question.

Hot Network Questions

Using the sharepoint javascript library (sp.js)

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged listjavascriptsharepoint-foundationsp.js or ask your own question.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
list
javascript
sharepoint-foundation
sp.js
or ask your own question.