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: