How do I refresh page data to display dynamic table data that was altered with an ajax call without reloading the page?
Question
I've got an ajax call that changes, at the moment just the first name for testing purposes, of a contact using a bootstrap modal. On success I want the page data refreshed, but not to actually reload the page. So once the user clicks save changes the modal disappears and the table data with refresh with newly changed name. Here's the code I've got so far:
<?php
$db = new mysqli('127.0.0.1', 'root', '', 'test');
require_once 'Model.php';
require_once 'Contact.php';
$contacts = Contact::find_all();
?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<title>Test</title>
<script>
$(document).ready( function() {
$("button").click(function() {
var clicked = this.id;
$.ajax({
url: 'edit.php',
dataType: 'json',
data: {
action: "display",
id: this.id
},
success: function(data) {
$("#fname").val(data.first_name);
$("#save").click(function() {
$.ajax({
url: 'edit.php',
dataType: 'json',
data: {
action: "save",
id: clicked,
first_name: $("#fname").val()
},
success: function(data) {
console.log(data);
//refresh page here
}
});
});
}
});
});
});
</script>
</head>
<body>
<table class="table table-striped" id="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<?php foreach($contacts as $contact): ?>
<tr>
<td><?php echo $contact->first_name ?></td>
<td><?php echo $contact->last_name ?></td>
<td><?php echo $contact->email ?></td>
<td>
<button type="button" class="btn btn-primary btn-lg" name="" id="<?php echo $contact->id ?>" data-toggle="modal" data-target="#myModal">
Edit Contact
</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<input type="text" name="fname" id="fname">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="save" class="btn btn-primary save" data-dismiss="modal">Save changes</button>
</div>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
As you can probably tell I am very new to AJAX and JS/jQuery.
1 answers
solution1
0 2016-08-14 20:49:55
You need to create the table "on the fly" one data is back from AJAX call - which happens on the callback function specified in success option on $.ajax() call. Right now you simply show the data coming back on a console. You need to clear what is in your (by calling eg $('tbody').html('') ) and then basing on the data that is in "data" parameter create the approriate structure of a table inside... Helpful methods you might want to look for in JQuery docs might be:
.each()
.append()
.html()
Hope the above helps :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.