Update External local Json file with values updated from front end datatable?

I have a written a code which get value from a local json file and displays it in a table format. I have made the table editable using html5 editable tag .

Now i want when someone updates the cell in the datatable i ant to update the external local json file. without using any server side technology i can use jquery js anything without server side implementation is that possible .

here is my code so far

<!DOCTYPE html>
<html>
<head>
    <title>Display JSON File Data in Datatables | Example</title>
    <!-- link datatables css -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
</head>
<body>
    <table id="empTable" class="display" width="100%" cellspacing="0" contenteditable = "true">
        <thead>
            <tr>
                <th>Name</th>
                <th>Designation</th>
                <th>Office</th>
                <th>Extension</th>
                <th>Joining Date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Designation</th>
                <th>Office</th>
                <th>Extension</th>
                <th>Joining Date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

    <!-- load jquery -->
    <script   src="https://code.jquery.com/jquery-1.10.2.js"   ></script>
    <!-- load datatables js library -->
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {
        $('#empTable').dataTable({
            "ajax": "empdata.json",
            "columns": [
                {"data": "name"},
                {"data": "designation"},
                {"data": "office"},
                {"data": "extension"},
                {"data": "joining_date"},
                {"data": "salary"}
            ]
        });   
    });
    </script>
</body>
</html>

JavaScript
​x
 
<!DOCTYPE html>
<html>
<head>
    <title>Display JSON File Data in Datatables | Example</title>
    <!-- link datatables css -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
</head>
<body>
    <table id="empTable" class="display" width="100%" cellspacing="0" contenteditable = "true">
        <thead>
            <tr>
                <th>Name</th>
                <th>Designation</th>
                <th>Office</th>
                <th>Extension</th>
                <th>Joining Date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Designation</th>
                <th>Office</th>
                <th>Extension</th>
                <th>Joining Date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>
​
    <!-- load jquery -->
    <script   src="https://code.jquery.com/jquery-1.10.2.js"   ></script>
    <!-- load datatables js library -->
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
​
    <script type="text/javascript">
    $(document).ready(function() {
        $('#empTable').dataTable({
            "ajax": "empdata.json",
            "columns": [
                {"data": "name"},
                {"data": "designation"},
                {"data": "office"},
                {"data": "extension"},
                {"data": "joining_date"},
                {"data": "salary"}
            ]
        });   
    });
    </script>
</body>
</html>
​

Answer

There is no way for a web browser to write arbitrary data to a web server, and you wouldn’t like it if it was possible (you’d last about 5 minutes before your site was overwritten with something unpleasant).

You need server side technology to edit the content on the server (and you almost certainly would want it to include authentication/authorization checks).

Advertisement

Answer