0

Please I some here...I want to update multiple SharePoint list item using JSOM. First I am retrieving the items using rest api and binding them to an HTML table with checkboxes. The checkboxes have the list item id which I want to use to update the list item...find below my code

`<script type="text/javascript" src="/sites/SiteAssets/jquery-3.2.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {
    getMyTasks();
   approve();
});
function getMyTasks()
{
"use strict";
    var listTitle="hardware%20requisition";
     var row = "";  
     var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listTitle + "')/items";  
     $.ajax  
     ({  
         url: url,  
         type: "GET",  
         headers:  
         {  
             "Accept": "application/json;odata=verbose",  
             "Content-Type": "application/json;odata=verbose",  
         },  
         success: function(data)   
         {  
             var result = data.d.results;  
             $.each(result, function(key, item)  
             {  
                 var l = item.Title;  
                 row = row + '<tr><td><input type="checkbox" value=' + item.Id + '>' + item.Id + '</input></td><td>' + item.Title + '</td><td>' + item.L1_x0020_Approver_x0020_Status + '</td><td>' + item.Memory +  '</td></tr>';  
             })  

             $("#GetItems>tbody").html(row);  
             $("#GetItems").show();  
         },  
         error: function(data)   
         {  
             alert("Failed to get list items.");  
         }  
     });  

    }


  function approve(){


    $("#Approve").click(function(event){
    event.preventDefault();
    var searchIDs = $("#GetItems input:checkbox:checked").map(function(){
      return $(this).val();
    }).get(); 
    alert(searchIDs);


    var clientContext = new SP.ClientContext(_spPageContextInfo.webAbsoluteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle("hardware%20requisition");

for(var i = 1; i<= searchIDs.length; i++){    
    var oListItem = oList.getItemById(i);  
    oListItem.set_item('L1_x0020_Approver_x0020_Status', 'Approved!');  
    oListItem.update();

    clientContext.load(oListItem);
}

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



function onQuerySucceeded() {
    alert('Items Updated');
}
function onQueryFailed(sender, args) {

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

}
    });


  }
</script>
<html>
    <body>
<h2>Get all List Items</h2>  
<button type="button" onclick="GetListItems()">Get Items</button>  
<button type="button" id="Approve">Approve</button>
    <table id="GetItems" style="display:none">  
        <thead>  
            <tr>  
                <td>Id</td>  
                <td>Title</td>  
                <td>Description</td>  
                <td>Quantity</td>  
                <td>Price</td>  
                <td>City</td>  
            </tr>  
        </thead>  
        <tbody>  

        </tbody>  
        </table>  
        </body>
        </html>`
0

Use the code below:

<script type="text/javascript" src="/sites/SiteAssets/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
   getMyTasks();
   approve();
});
function getMyTasks(){
    var listTitle="hardware%20requisition";
    var row = "";  
    var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listTitle + "')/items";  
    $.ajax({  
        url: url,  
        type: "GET",  
        headers:  
        {  
            "Accept": "application/json;odata=verbose",  
            "Content-Type": "application/json;odata=verbose",  
        },  
        success: function(data){  
            var result = data.d.results;  
            $.each(result, function(key, item)  
            {  
                var l = item.Title;  
                row = row + '<tr><td><input type="checkbox" value=' + item.Id + '>' + item.Id + '</input></td><td>' + item.Title + '</td><td>' + item.L1_x0020_Approver_x0020_Status + '</td><td>' + item.Memory +  '</td></tr>';  
            })  
            $("#GetItems>tbody").html(row);  
            $("#GetItems").show();  
        },  
        error: function(data){  
            alert("Failed to get list items.");  
        }  
    });
}
function approve(){
    $("#Approve").click(function(event){
        event.preventDefault();
        var searchIDs = $("#GetItems input:checkbox:checked").map(function(){
          return $(this).val();
        }).get(); 
        var itemArray = [];
        var clientContext = new SP.ClientContext(_spPageContextInfo.webAbsoluteUrl);
        var oList = clientContext.get_web().get_lists().getByTitle("hardware requisition");

        for(var i = 0; i< searchIDs.length; i++){    
            var oListItem = oList.getItemById(searchIDs[i]);  
            oListItem.set_item('L1_x0020_Approver_x0020_Status', 'Approved!');  
            oListItem.update();
            itemArray[i] = oListItem;
            clientContext.load(itemArray[i]);
        }
        clientContext.executeQueryAsync(onQuerySucceeded, onQueryFailed);       
    });
}
function onQuerySucceeded() {
    alert('Items Updated');
}
function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>
<html>
<body>
<h2>Get all List Items</h2>  
<button type="button" onclick="GetListItems()">Get Items</button>  
<button type="button" id="Approve">Approve</button>
<table id="GetItems" style="display:none">  
<thead>  
    <tr>  
        <td>Id</td>  
        <td>Title</td>  
        <td>L1 Approver Status</td>     
        <td>Price</td>  
    </tr>  
</thead>  
<tbody> 
</tbody>  
</table>  
</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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