CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Lauren P
Lauren P

Reputation: 1

Saving to Ajax Server

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>

Upvotes: 0

Views: 193

Answers (1)

ahhmarr
ahhmarr

Reputation: 2320

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:

Upvotes: 1

Related Questions