I am trying to do an update and display the data when I submit a new value. I want when I click submit, the new data is added to the database and automatically updated and displayed without having to reload the page. But I don't know how to write it Here is my jQuery code to get the data
Get.js
$(document).ready(function () {
// FETCHING DATA FROM JSON FILE
$.get('get', function (data) {
var student = '';
// ITERATING THROUGH OBJECTS
$.each(data, function (key, value) {
//CONSTRUCTION OF ROWS HAVING
// DATA FROM JSON OBJECT
student += '<tr>';
student += '<td>' + value.id + '</td>';
student += '<td>' + value.name + '</td>';
student += '</tr>';
});
//INSERTING ROWS INTO TABLE
$('#table').append(student);
});
});
This is the code to send the data
post.js
$('#submit').click(function () {
var id = $('#id').val();
var name = $('#name').val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'id=' + id + '&name=' + name;
if (id == '' || name == '') {
alert('Please Fill All Fields');
} else {
// AJAX Code To Submit Form.
$.ajax({
type: 'POST',
url: 'save',
data: dataString,
cache: false,
success: function (result) {
alert(result);
},
});
}
return false;
});
and html
<table id="table">
<!-- HEADING FORMATION -->
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</table>
<div id="form">
<h3>Fill Your Information !</h3>
<div>
<label>Name :</label>
<input id="id" type="text" />
<label>Email :</label>
<input id="name" type="text" />
<input id="submit" type="button" value="Submit" />
</div>
</div>
The above 2 codes work well for successfully retrieving and sending data. However, I want the get function to automatically refresh and display when submitting data without having to reload the page.