HTML Controls Code:
<table>
<tr>
<td>Employee ID</td>
<td>
<input type="text" id="txtId" /></td>
</tr>
<tr>
<td>Employee Name</td>
<td>
<input type="text" id="txtName" /></td>
</tr>
<tr>
<td colspan="2">
<input type="button" id="btnAdd" onclick="Add()" value="Add" />
<input type="button" id="btnGetEmployees" onclick="View()" value="View" />
<input type="button" id="btnUpdate" onclick="Update()" value="Update" />
<input type="button" id="btnDelete" onclick="Delete()" value="Delete" />
</td>
</tr>
</table>JavaScript Code (REST Service Code):// Add item ----------------
function Add() {
var listName = 'EmpList';
var url = _spPageContextInfo.siteAbsoluteUrl;
var title = $('#txtName').val();
var id = $('#txtId').val();
createListItemWithDetails(listName, url, title, id, function () {
alert("Item has been created. Updating available items");
$("#eData").empty();
View();
}, function (sender,args) {
alert("Ooops, an error occured. Please try again");
});
}
// Add Item -----------------
function createListItemWithDetails(listName, siteUrl, title, id, success, failure) {
var itemType = GetItemTypeForListName(listName);
var item = {
"__metadata": { "type": itemType },
"Title": title, "EmpId": id
};
$.ajax({
url: siteUrl + "/sales/_api/web/lists/getbytitle('" + listName + "')/items",
type: "POST",
contentType: "application/json;odata=verbose",
data: JSON.stringify(item),
headers: {
"Accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: function (data) {
success(data);
},
error: function (data) {
failure(data);
}
});
}
// Common method ----------------
function GetItemTypeForListName(name) {
return "SP.Data." + name.charAt(0).toUpperCase() + name.slice(1) + "ListItem";
}
// Delete item --------------------
function Delete() {
var listName = 'EmpList';
var url = _spPageContextInfo.siteAbsoluteUrl;
var itemId = $('#txtId').val();
deleteListItem(itemId, listName, url, function () {
alert("Item deleted, refreshing avilable items");
$("#eData").empty();
View();
}, function () {
alert("Ooops, an error occured. Please try again");
});
}
// Delete item --------------------
function deleteListItem(itemId, listName, siteUrl, success, failure) {
getListItemWithId(itemId, listName, siteUrl, function (data) {
$.ajax({
url: data.__metadata.uri,
type: "POST",
headers: {
"Accept": "application/json;odata=verbose",
"X-Http-Method": "DELETE",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"If-Match": data.__metadata.etag
},
success: function (data) {
success(data);
},
error: function (data) {
failure(data);
}
});
},
function (data) {
failure(data);
});
}
// Get required item to delete and update ---------------
function getListItemWithId(itemId, listName, siteurl, success, failure) {
var url = siteurl + "/sales/_api/web/lists/getbytitle('" + listName + "')/items?$filter=EmpId eq " + itemId;
$.ajax({
url: url,
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
if (data.d.results.length == 1) {
success(data.d.results[0]);
}
else {
failure("Multiple results obtained for the specified Id value");
}
},
error: function (data) {
failure(data);
}
});
}
// View item ---------------
function View() {
// var itemId = $('#txtId').val();
var url = _spPageContextInfo.siteAbsoluteUrl + "/sales/_api/web/lists/getbytitle('EmpList')/items";
$.ajax({
url: url,
method: "GET",
contentType: "application/json;odata=verbose",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
$("#eData").empty();
if (data.d.results.length >= 1) {
var r = data.d.results;
for (var i = 0; i < r.length; i++) {
$("#eData").append("<li>" + r[i].EmpId + " - " + r[i].Title + "</li>");
}
}
else {
alert("Zero records...");
// failure("Multiple results obtained for the specified Id value");
}
},
error: function (data) {
// failure(data);
alert("Error occoured...");
}
});
}
function Update() {
var listName = 'EmpList';
var url = _spPageContextInfo.siteAbsoluteUrl;
var itemId = $('#txtId').val();
var name = $('#txtName').val();
updateListItem(itemId, listName, url, name, function () {
alert("Item updated, refreshing avilable items");
$("#eData").empty();
View();
}, function () {
alert("Ooops, an error occured. Please try again");
});
}
function updateListItem(itemId, listName, siteUrl, name, success, failure) {
var itemType = GetItemTypeForListName(listName);
var item = {
"__metadata": { "type": itemType },
"Title": name
};
getListItemWithId(itemId, listName, siteUrl, function (data) {
$.ajax({
url: data.__metadata.uri,
type: "POST",
contentType: "application/json;odata=verbose",
data: JSON.stringify(item),
headers: {
"Accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "MERGE",
"If-Match": data.__metadata.etag
},
success: function (data) {
success(data);
},
error: function (data) {
failure(data);
}
});
}, function (data) {
failure(data);
});
}