I am making a table in HTML which takes user input and saves it to an Ajax server. When the page is refreshed, the newly-inputed text is still there. When someone on a different computer / phone, etc. views the table on my website, however, the changes that someone else had made on their device are not viewable. In other words, is there a way to allow users to dynamically edit content in a table on a website, and then make that information viewable by every person that visits the website after?
I have minimal experience in JS, so more detailed explanations would be helpful! Thanks so much! The code in HTML and CSS is attached below:
td, table tr, th {
border: 1px solid Black;
border-collapse: collapse;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="WorkLog.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<meta charset="UTF-8">
<title>Work Log</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<h1>Work Log Template</h1>
<table id=WorkLog contenteditable=true>
<tr>
<th>Item</th>
<th>Estimated Length</th>
<th>Comments / Brief Summary (optional)</th>
<th>Actions</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="button" class="BtnPlus" value="+" /><input type="button" class="BtnMinus" value="-" /></td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function () {
function addRow() {
var html = '<tr>' +
'<td>new item</td>' +
'<td></td>' +
'<td></td>' +
'<td><input type="button" class="BtnPlus" value="+" /><input type="button" class="BtnMinus" value="-" /></td>' +
'</tr>'
$(html).appendTo($("#WorkLog"))
};
$("#WorkLog").on("click", ".BtnPlus", addRow);
});
</script>
<script>
function deleteRow() {
var par = $(this).closest('TR');
par.remove();
};
$("#WorkLog").on("click", ".BtnMinus", deleteRow);
</script>
<script>
$(document).ready(function(){
$("#WorkLog").blur(function() {
localStorage.setItem('WorkLogsData', this.innerHTML);
});
if ( localStorage.getItem('WorkLogsData') ) {
$("#WorkLog").html(localStorage.getItem('WorkLogsData'));
}
});
</script>
</body>
</html>1 Answer 1
this not AJAX
you are saving the data in the client's browser via localstorage which all it does is save the data entered by the user on your local machine
to make it globally accessible you need to save the data on a DB on your server via AJAX
I would suggest you read these first:
localStoragebelongs to a browser. If you want other users to see data then you have to save that data on a server side (in a DB or text file) and serve to over people.