Version Conflict while updating list items in SharePoint using ECMAScript/JSOM/CSOM

I thought I'd post this for my own records so I have somewhere to refer back to it. I've also posted it because there was very little help regarding the problem on the Internet and the workarounds proposed weren't that nice. Many ranged from hacks that involved forcing the page to reload itself or having to use CAML instead.

Anyway here is the scenario, the text book piece of code below is used to update a list item in SharePoint using JavaScript. Everything works fine, however if someone else updates a record on another machine after you and then you update the same record on your machine you'll get the "Version Conflict" error.

   1:  function updateListItem(id, statusField, valueToChangeTo, listName, newparentId, parentField) {

   2:            

   3:            var ctx = SP.ClientContext.get_current();

   4:   

   5:            var list = ctx

   6:                      .get_web()

   7:                      .get_lists()

   8:                      .getByTitle(listName);

   9:   

  10:              var item = list.getItemById(id);

  11:                 

  12:             item.refreshLoad();

  13:           

  14:             item.set_item(statusField, valueToChangeTo);

  15:             item.set_item(parentField, newparentId);

  16:   

  17:             item.update();

  18:            

  19:            ctx.executeQueryAsync(function () {

  20:                console.log("New value: ", item.get_item(statusField));

  21:            })

  22:        };

So what went wrong? Well basically the object that you're accessing is a cached object, you retrieved on the first time you saved the item. Since someone else changed the object before you this time your cached object is going to cause a version conflict as SharePoint as a newer version of the item.

How do I solve the problem? You need to load the object again and then update it.

   1:  function updateListItem(id, statusField, valueToChangeTo, listName, newparentId, parentField) {

   2:   

   3:            var ctx = SP.ClientContext.get_current();

   4:   

   5:            var list = ctx

   6:                      .get_web()

   7:                      .get_lists()

   8:                      .getByTitle(listName);

   9:   

  10:            var item = list.getItemById(id);

  11:   

  12:            ctx.load(item)

  13:   

  14:            ctx.executeQueryAsync(function () {

  15:   

  16:                updateListitemAfterData(item, statusField, valueToChangeTo, parentField, newparentId);

  17:            })

  18:        }

  19:   

  20:        function updateListitemAfterData(item, statusField, valueToChangeTo, parentField, newparentId) {

  21:            var ctx = SP.ClientContext.get_current();

  22:            item.set_item(statusField, valueToChangeTo);

  23:            item.set_item(parentField, newparentId);

  24:            item.update();

  25:   

  26:            ctx.executeQueryAsync(function () {

  27:   

  28:                console.log("New value: ", item.get_item(statusField));

  29:            })

  30:   

  31:   

  32:        }

So in the code above I call updateListItem with my values. This then goes and loads the list item fresh from SharePoint and waits using an async call. Once it gets this async call it callsupdateListItemAfterData to do the actual saving for us. Please note in the above example you may want to pass the context or to declare it globally instead to be more efficient.  

So far the above solution appears to be working for me, with no version conflicts