Read and Update SharePoint list using jQuery

Question

I have SP2010 list with 2 columns.

1. Title [Text]
2. Count [Numeric]

I want to use jQuery to update the value of column "Count" to +1 where "ID" = "Something" (using item ID here). Can someone help please me with this? Any code snippet will be appreciated.

I am trying this out but it seems that the "Count" is not increasing

<script src="/SiteAssets/Scripts/jquery-1.3.2.min.js"></script>
<script src="/SiteAssets/Scripts/jquery.SPServices-0.6.2.min.js"></script>

<script>

function UpdateCount(itemID)
{

var query = "<Query><Where><Eq><FieldRef Name='ID'/><Value Type='Number'>" + itemID + "</Value></Eq></Where></Query>";
var count;

$().SPServices({
operation: "GetListItems",
async: false,
listName: "CorpDir_Usage",
CAMLQuery: query,
completefunc: function(xData, Status) {
$(xData.responseXML).find("z\\:row").each(function() {
    count = $(this).attr('ows_Count');
});
}
});

$().SPServices({
operation: "UpdateListItems",
async: false,
batchCmd: "Update",
listName: "CorpDir_Usage",
ID: itemID,
valuepairs: [["Count", count++]],
completefunc: function(xData, Status) {

}
});

}</script>


<script type="text/javascript">

    $(document).ready(function(){
        $("#ctl00_m_g_0b30e73d_3ca6_4db1_9760_0e5518e15614_ctl00_btnSimpleSearch").click(function(){
            UpdateCount(1);
        });
    });

</script>

Answer 1

You can use Firebug with Firefox to debug your code. With this addon you can see the Ajax request that is sent to the server, and its response. Like that you'll be able to see if something is wrong and what the server says.

Also I think "count" needs to be parsed as a number.

(Note that you use a very very old version of jQuery and SPServices could not work properly with this very old version ... Also you use an old version of SPServices...)

Otherwise, I think it's better to use async everywhere. I don't use SPServices but I think your code should be more like that:

<script src="/SiteAssets/Scripts/jquery-1.3.2.min.js"></script>
<script src="/SiteAssets/Scripts/jquery.SPServices-0.6.2.min.js"></script>

<script>

function UpdateCount(itemID) {
  var query = "<Query><Where><Eq><FieldRef Name='ID'/><Value Type='Number'>" + itemID + "</Value></Eq></Where></Query>";
  var count;

  $().SPServices({
    operation: "GetListItems",
    listName: "CorpDir_Usage",
    CAMLQuery: query,
    completefunc: function(xData, Status) {
      $(xData.responseXML).find("z\\:row").each(function() {
        count = $(this).attr('ows_Count');
        count = 1*count; // we need to make sure it's parsed as a number
        $().SPServices({
          operation: "UpdateListItems",
          batchCmd: "Update",
          listName: "CorpDir_Usage",
          ID: itemID,
          valuepairs: [["Count", ++count]],
          completefunc: function(xData, Status) { alert("Count updated to "+count) }
        });

      });
    }
  });
}
</script>


<script type="text/javascript">
$(document).ready(function(){
    $("#ctl00_m_g_0b30e73d_3ca6_4db1_9760_0e5518e15614_ctl00_btnSimpleSearch").click(function(){
        UpdateCount(1);
    });
});
</script>

I've created a library that has a different syntax. If you want to give it a try, it's called SharepointPlus and your code will look like that with it:

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="sharepointplus-3.0.5.min.js"></script>

<script>
function UpdateCount(itemID) {
  // find Count
  $SP().list("CorpDir_Usage").get({fields:"Count",where:"ID = "+itemID}, function(data) {
    if (data.length===0) alert("No item with this ID!")
    else {
      var count = data[0].getAttribute("Count")*1; // parse it as a number
      // we update Count
      $SP().list("CorpDir_Usage").update({ID:itemID, Count:++count}, {
        error:function(items) { if (items.length > 0) alert("Error: Count has not been updated!") },
        success:function(items) { if (items.length > 0) alert("Count updated!") }
      });
    }
  })
}
</script>


<script type="text/javascript">
$(document).ready(function(){
    $("#ctl00_m_g_0b30e73d_3ca6_4db1_9760_0e5518e15614_ctl00_btnSimpleSearch").click(function(){
        UpdateCount(1);
    });
});
</script>