How to save inputs on my table in SharePoint? - sharepoint

Question

I have made a table on one SharePoint page , and would like others to edit on that table. however, whenever they add the edits, and I refresh my page, the inputs are gone. I used contenteditable for this. What could be an efficient way to do this? I don't need to save the previous input that were on the table.

Answer 1

The data on the page that has not been saved to the database or not hard-coded will disappear after refresh.
You could create a SharePoint List to save the contents users edited and use Rest API to get item and create new item.
Sample code:
<style>
.output {
font: 1rem 'Fira Sans', sans-serif;
}
blockquote {
background: #eee;
border-radius: 5px;
margin: 16px 0;
}
blockquote p {
padding: 15px;
}
cite {
margin: 16px 32px;
}
blockquote p::before {
content: '\201C';
}
blockquote p::after {
content: '\201D';
}
[contenteditable='true'] {
caret-color: red;
}
</style>
<blockquote contenteditable="true">
<p id="content">Edit this content to add your own quote</p>
<input type="button" value="finish edit" id="submit1" />
</blockquote>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function () {
getListData();
$("#submit1").click(function(){
CreateListItemWithDetails('Contents',$("#content").text())
})
});
function getListData() {
var fullUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Contents')/items";
$.ajax({
url: fullUrl,
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
},
success: onQuerySucceeded,
error: function onQueryFailed() {
alert('Error!');
}
});
}
function onQuerySucceeded(data) {
if(data.d.results.length>0){
var index=data.d.results.length - 1;
$("#content").text(data.d.results[index].Title)
}
}
function CreateListItemWithDetails(listName, newItemTitle) {
var itemType = GetItemTypeForListName(listName);
var item = {
"__metadata": { "type": itemType },
"Title": newItemTitle
};
$.ajax({
url: _spPageContextInfo.siteAbsoluteUrl + "/_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) {
console.log("success");
},
error: function (data) {
console.log("fail");
}
});
}
// Get List Item Type metadata
function GetItemTypeForListName(name) {
return "SP.Data." + name.charAt(0).toUpperCase() + name.split(" ").join("").slice(1) + "ListItem";
}
</script>
I just use p element to give an example and you need to change the list title to yours. The edited content will only be saved to SharePoint after clicking the finish edit button .