-->

SharePoint Client Object Model using JQuery and SPServices


Add, Select, Update and Delete List items using JQuery.

JQuery using  SPServices:

<script src="/_LAYOUTS/MyJS/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="/_LAYOUTS/MyJS/jquery.SPServices-2014.01.min.js" type="text/javascript">

</script><script language="javascript" type="text/javascript">

$(document).ready(function() {
    $("#createitem").click(function() {

var valtitle = $("#txtTitle").val();
var valcol = $("#txtcol123").val();

CreateNewItem(valtitle, valcol);
               

    });

$("#updateItem").click(function() {

var valtitle = $("#txtTitle").val();
var valcol = $("#txtcol123").val();
                var itemID = $("#txtID").val();

                UpdateItem(itemID, valtitle, valcol);

    });

$("#getItem").click(function() {

var itemID = $("#txtID").val();

                GetSingleItem(itemID);

    });

});

Create New List Item:


function CreateNewItem(valtitle, valcol) {
    $().SPServices({
        operation: "UpdateListItems",
        async: false,
        batchCmd: "New",
        listName: "list123",
        valuepairs: [["Title", valtitle], ["_x0063_ol123", valcol]],
        completefunc: function(xData, Status) {
          alert("Item Created!");
        }
    });
}

Update List Item:

function UpdateItem(itemID, valtitle, valcol)

    {
        $().SPServices({
            operation: "UpdateListItems",
            async: false,
            listName: "list123",
            ID: itemID,
            valuepairs: [["Title", valtitle], ["_x0063_ol123", valcol]],
            completefunc: function(xData, status){
               alert("Item Created!");
               }
        });
    }

Get List Item:

function GetSingleItem(itemID)

    {
        $().SPServices({
            operation: 'GetListItems',
        async: false,
        //debug: true,
        listName: 'list123',
        CAMLViewFields: '<ViewFields><FieldRef Name="Title" /><FieldRef Name="_x0063_ol123" /></ViewFields>',
        CAMLQuery: '<Query><Where><Eq><FieldRef Name="ID"/><Value Type="Counter">' + itemID + '</Value></Eq></Where></Query>',
        completefunc: function(xData, Status) {

            $(xData.responseXML).SPFilterNode("z:row").each(function() {
                $("#txtTitle").val($(this).attr("ows_Title"));
                $("#txtcol123").val($(this).attr("ows_col123"));
            });
        }        });
    }
</script>

HTML :

ID:<br/>
<input name="txtID" id="txtID" type="text"/> <br/>
Title:<br/>
<input name="txtTitle" id="txtTitle" type="text"/> <br/>
Col 123:<br/>
<input name="txtcol123" id="txtcol123" type="text"/> <br/>
<input id="createitem" type="button" value="Create Item"/>
<input id="updateItem" type="button" value="Update Item"/>
<input id="getItem" type="button" value="Get Single Item"/>

0 comments: