'use strict';
var listName = "MyList";
var UpdateItemID = 0;
var createGo = true;
$(document).ready(function () {
Read();
});
$(document).on("click", ".renameDeleteAnItem", function () {
var btnType = $(this).attr("value");
if (btnType == "Edit") {
UpdateItemID = $(this).attr("Id");
$("#txtTitle").val($(this).closest('tr').find('.itemTitle').text());
//
$("#txtName").val($(this).closest('tr').find('.itemName').text());
}
else if (btnType == "Delete") {
var url =
_spPageContextInfo.webAbsoluteUrl;
var itemId = $(this).attr("Id");
Delete(itemId);
}
});
function Create() {
var url =
_spPageContextInfo.siteAbsoluteUrl;
var title = $('#txtTitle').val();
createListItemWithDetails(listName, url, title, function () {
//Updating available items
Read();
}, function () {
//
alert("Ooops, an error occured. Please try again");
});
}
function Read() {
var url =
_spPageContextInfo.siteAbsoluteUrl;
getListItems(listName, url, function (data) {
var items = data.d.results;
// Add all the new
items
var listItemsdata = '<div> <table
border="1">';
listItemsdata += '<tr style="background-color: #87b586"> <th>Title </th>
<th>Actions</th> </tr>'
for (var i = 0; i < items.length;
i++) {
listItemsdata += '<tr><td>
<lable class="itemTitle">' + items[i].Title +
'</label></td><td>'
+ '<input
type="button" Id="' + items[i].ID + '" value="Edit"
class="renameDeleteAnItem" /> <input type="button"
Id="' + items[i].ID + '" value="Delete"
class="renameDeleteAnItem" /> </td> </tr>';
}
listItemsdata += '</table></div>';
$("#divShowItems").empty()
$("#divShowItems").append(listItemsdata);
}, function (data) {
alert("Ooops, an error occured. Please try again");
});
}
// occurs when a user clicks the update
button
function Update() {
var url =
_spPageContextInfo.siteAbsoluteUrl;
var itemId = UpdateItemID;
var title = $('#txtTitle').val();
updateListItem(itemId, listName, url, title, function () {
alert("Item updated, refreshing avilable items");
$('#txtTitle').val('');
Read();
}, function () {
alert("Ooops, an error occured. Please try again");
});
}
// occurs when a user clicks the delete
button
function Delete(itemId) {
var url =
_spPageContextInfo.siteAbsoluteUrl;
//var itemId =
$('#DeleteItems').val();
deleteListItem(itemId, listName, url, function () {
alert("Item deleted, refreshing avilable items");
Read();
}, function () {
alert("Ooops, an error occured. Please try again");
});
}
// Delete Operation
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);
});
}
// Update Operation
function updateListItem(itemId, listName, siteUrl, title, success,
failure) {
var itemType =
GetItemTypeForListName(listName);
var item = {
"__metadata": { "type": itemType },
"Title": title
};
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);
});
}
// READ SPECIFIC ITEM operation
// itemId: The id of the item to get
function getListItemWithId(itemId, listName, siteurl, success,
failure) {
var url = siteurl + "/_api/web/lists/getbytitle('" + listName + "')/items?$filter=Id
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);
}
});
}
// READ operation
function getListItems(listName, siteurl, success, failure) {
$.ajax({
url: siteurl + "/_api/web/lists/getbytitle('" + listName + "')/items",
method: "GET",
headers: { "Accept":
"application/json;
odata=verbose"
},
success: function (data) {
success(data);
},
error: function (data) {
failure(data);
}
});
}
// CREATE Operation
function createListItemWithDetails(listName, siteUrl, title,
success, failure) {
var itemType =
GetItemTypeForListName(listName);
var item = {
"__metadata": { "type": itemType },
"Title": title
};
$.ajax({
url: siteUrl + "/_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) {
debugger;
alert("Error creating:
"+
data.responseText);
failure(data);
}
});
}
function GetItemTypeForListName(name) {
return "SP.Data." +
name.charAt(0).toUpperCase() + name.slice(1) + "ListItem";
}
<div>
<table>
<tr>
<td>
<label>Title:</label>
</td>
<td>
<input type="text" id="txtTitle" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" id="Create_Submit" value="Create" onclick="Create();" />
<input type="button" id="UpdateSubmit" value="Update" onclick="Update();" />
<input type="button" id="DeleteSubmit" value="Delete" onclick="Delete();" />
</td>
</tr>
</table>
<div id="divShowItems"></div>
</div>
