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.
