Problem Updating List Item using Ecmascript

Question

I'm trying to update an item with a specific ID in my sharepoint list. Everything works until it gets to the set_item or targetListItem.update() part. Can someone tell me where I'm going wrong please? I'm using the alerts to gauge where it is not working. I'm still really new to ecmascript and the COM. Thanks in advance!

<script>

var itemId = 1; 
var PacketNum;
var targetListItem;

function OnLoadList() {
  // Connect to list by Title
   var clientContext = new SP.ClientContext(); 
   var targetList = clientContext.get_web().get_lists().getByTitle('Exchange of Notice Packet Number Creator');
   targetListItem = targetList.getItemById(itemId);
   clientContext.load(targetListItem, 'Packet');
   clientContext.executeQueryAsync(Function.createDelegate(this, this.IncrementPacket), Function.createDelegate(this, this.onQueryFailed));
}

function IncrementPacket() {
    PacketNum = targetListItem.get_item('Packet');
    alert('Retrieved Item Value is: ' + PacketNum);
    PacketNum = PacketNum + 1;
    targetListItem.set_item('Packet', PacketNum);
    targetListItem.update();
    alert('New Item Value is: ' + PacketNum);
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded() {
     alert('Success!');
}

function onQueryFailed(sender, args) {
   alert('Request failed. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
}

</script>

Answer 1

The error occurs since clientContext is declared as a local variable in function OnLoadList and apparently it is not accessible in IncrementPacket callback function.

"Quick" fix:

In function IncrementPacket replace the line:

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

with:

var ctx = targetListItem.get_context(); //get client context
ctx.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

---

Some recommendations

Avoid global variables

Wrap your code in a scoping function and use variables local to that scoping function, and make your other functions closures within it

(function() { // Begin scoping function
    var clientContext; // Global to your code, invisible outside the scoping function
    function loadListItems(listTitle) {
        // ...
    }
})();    

Usage of Function.createDelegate

In most cases, there is no need to wrap handlers using Function.createDelegate, instead you could write:

ctx.executeQueryAsync(succeeded,failed);

or

ctx.executeQueryAsync(function(){
    //...
  },
  function(sender,args){
    //Error handling goes here
  }
);