0

I am trying to update to update list when user clicks on "Edit" button but below code doesn't seem to be working..

<h1 align="center">DemoList</h1>
<table id="maintable">
<tr>
<td>Title</td>
<td>
<input type="text" id="TitleId"/>
</td>
<td>Manager</td>
<td>
<input type="text" id="ManagerId"/>
</td>
<td>Department</td>
<td>
<input type="text" id="DepartmentId"/>
</td>
</tr>
</table>
<button onclick="editList()">Edit</button>


<script type="text/javascript" src="https://dept-dev.int.ally.com/sites/EA/Style%20Library/Scripts/Jquery/jquery.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 type="text/javascript" src="/_layouts/15/sp.init.js"></script>
<script language="ecmascript" type="text/ecmascript">  
var collListItem;  
$(document).ready(function () {
try
{
    getSetListItem();
}
catch(e)
{
    alert("error occured at ready method" + e.message);
}
}); 


function getSetListItem() {  

   var  qString = window.location.href.split("?ID=")[1];
   var clientContext = new SP.ClientContext.get_current();  
   var oList = clientContext.get_web().get_lists().getByTitle('DemoList');  
   var camlQuery = new SP.CamlQuery();  
   camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'ID\'/><Value Type=\'Numeric\'>'+ qString +'</Value></Eq></Where> </Query></View>');  
   collListItem = oList.getItems(camlQuery);  
   clientContext.load(collListItem);  
   clientContext.executeQueryAsync(Function.createDelegate(this, OnLoadSuccess),  
   Function.createDelegate(this, OnLoadFailed));  
}  

function OnLoadSuccess(sender, args) {  
   var listItemEnumerator = collListItem.getEnumerator();  
   while (listItemEnumerator.moveNext()) {  
      var oListItem = listItemEnumerator.get_current();  
      $("#DepartmentId").val(oListItem.get_item("Department"))+$("#TitleId").val(oListItem.get_item("Title"));

document.getElementById('ManagerId').value = oListItem.get_item("Manager").get_lookupValue();

}
} 
function OnLoadFailed(sender, args) {  
   alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());  
   }  

   function editList()
   {
       var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle('DemoList');
     var camlQuery = new SP.CamlQuery();  
   camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'ID\'/><Value Type=\'Numeric\'>'+ qString +'</Value></Eq></Where> </Query></View>');  
   collListItem = oList.getItems(camlQuery);  
     oListItem.set_item('Title', 'My Updated Title');

    oListItem.update();

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

function onQuerySucceeded() {

    alert('Item updated!');
}

function onQueryFailed(sender, args) {

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



</script>  
  • Can you please let me know what error you are getting ? – Rohit Waghela May 4 '16 at 6:44
  • function editList() not giving desired o/p....and caml query in editlist not returning any value – user52560 May 4 '16 at 7:00
0

Please Update "editList" function as follows and let me know if it is working -

function editList()
{   
    var qString = window.location.href.split("?ID=")[1];
    var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle('DemoList');
    var oListItem =  oList.getItemById(ItemId); //ItemId will be ID of an item you are updating.
    oListItem.set_item('Title', 'My Updated Title');
    oListItem.update();
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
  • nope..its not working – user52560 May 4 '16 at 7:55
0

There are multiple issues with your code. Below are the issue and updated code

  1. You are querying the same list item on load as well as on edit button click. You can improve this by storing the list item and use it on edit
  2. On EditList function you are trying to use undefined object oListItem

I have updated your code as below

<h1 align="center">DemoList</h1>
<table id="maintable">
    <tr>
        <td>Title</td>
        <td><input type="text" id="TitleId"/></td>
        <td>Manager</td>
        <td><input type="text" id="ManagerId"/></td>
        <td>Department</td>
        <td><input type="text" id="DepartmentId"/></td>
    </tr>
</table>

<button onclick="editList()">Edit</button>


<script type="text/javascript" src="https://dept-dev.int.ally.com/sites/EA/Style%20Library/Scripts/Jquery/jquery.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 type="text/javascript" src="/_layouts/15/sp.init.js"></script>
<script language="ecmascript" type="text/ecmascript">  
    var collListItem;  
    var oListItem;
    $(document).ready(function () {
        try {
            getSetListItem();
        }
        catch(e) {
            alert("error occured at ready method" + e.message);
        }
    }); 

    function getSetListItem() {  
       var  qString = window.location.href.split("?ID=")[1];
       var clientContext = new SP.ClientContext.get_current();  
       var oList = clientContext.get_web().get_lists().getByTitle('DemoList');  
       var camlQuery = new SP.CamlQuery();  
       camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'ID\'/><Value Type=\'Numeric\'>'+ qString +'</Value></Eq></Where> </Query></View>');  
       collListItem = oList.getItems(camlQuery);  
       clientContext.load(collListItem);  
       clientContext.executeQueryAsync(Function.createDelegate(this, OnLoadSuccess),  
       Function.createDelegate(this, OnLoadFailed));  
    }  

    function OnLoadSuccess(sender, args) {  
        var listItemEnumerator = collListItem.getEnumerator();  
        while (listItemEnumerator.moveNext()) {  
          oListItem = listItemEnumerator.get_current();  
          $("#TitleId").val(oListItem.get_item("Title"));
          $("#DepartmentId").val(oListItem.get_item("Department"));
          $("#ManagerId").val(oListItem.get_item("Manager").get_lookupValue());
          break;
        }
    } 

    function OnLoadFailed(sender, args) {  
        alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());  
    }  

    function editList() {
        var clientContext = new SP.ClientContext.get_current();
        var oList = clientContext.get_web().get_lists().getByTitle('DemoList');
        oListItem.set_item('Title', 'My Updated Title');
        oListItem.update();
        clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
    }

    function onQuerySucceeded() {
        alert('Item updated!');
    }

    function onQueryFailed(sender, args) {
        alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
    }
</script> 
  • no o/p coming..in debugger...control doesnt reach olistitem.update(); – user52560 May 4 '16 at 8:06
  • You mean the editList function is not getting executed? – Amal Hashim May 4 '16 at 8:18
  • no it didnt got executed – user52560 May 4 '16 at 8:57
  • Replace <button onclick="editList()">Edit</button> with <input type='button' onclick='editList();' value='Edit'/> – Amal Hashim May 4 '16 at 8:59
  • now its showing : oListItem is undefined – user52560 May 4 '16 at 9:35

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.