Here is my code which I've revised so that it properly opens up my modal. I'm still facing issues passing table variables to the modal so that they can be edited according to which row you wish to edit with the click of the edit buttion.
<html>
<head>
<title>Admin View</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body background=http://wallpapercave.com/wp/ItmVuT6.jpg>
<!-- container with table headers / user records / edit function / approve function -->
<div class="container">
<table class="table table-hover table-striped">
<center>
<thead>
<tr style="font-size: 24; color: white;">
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Status</th>
<th colspan="2">Actions</th>
</tr>
</thead>
</center>
<tbody style="background-color: #F0F8FF">
<?php
$i = 1; foreach($users as $u)
{
?>
<tr style="font-size: 20;">
<td width="5%;"> <?php echo $i; ?></td>
<td><?php echo $u->first_name; ?></td>
<td><?php echo $u->last_name; ?></td>
<td><?php echo $u->email; ?></td>
<td><?php echo ($u->approved) ? "Approved" : "Pending"; ?></td>
<!--edit button-->
<td><a href="" data-toggle="modal" data-target="#editModal"><span class='glyphicon glyphicon-edit'></span></a></td>
<!--approve button-->
<td><a href= "/ci/index.php/myform/approve/?user_id=<?php echo $u->id;?>"><span class="glyphicon glyphicon-ok gi-15x" style='color: green'></span></a></td>
</tr>
<?php $i++; } ?>
</tbody>
<table class="table table-hover table-striped">
<center>
<thead>
<tr style="font-size: 24; color: white;">
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Status</th>
<th colspan="2">Actions</th>
</tr>
</thead>
</center>
<tbody style="background-color: #F0F8FF">
<?php
$i = 1; foreach($users as $u) {
?>
<tr style="font-size: 20;">
<td width="5%;"> <?php echo $i++; ?></td>
<td><?php echo $u->first_name; ?></td>
<td><?php echo $u->last_name; ?></td>
<td><?php echo $u->email; ?></td>
<td><?php echo ($u->approved) ? "Approved" : "Pending"; ?></td>
<!--edit button-->
<td><a data-toggle="modal" data-target="#editModal<?php echo $u->id;?>"><span class='glyphicon glyphicon-edit'></span></a></td>
<!--approve button-->
<td><a href= "/ci/index.php/myform/approve/?user_id=<?php echo $u->id;?>"><span class="glyphicon glyphicon-ok gi-15x" style='color: green'></span></a></td>
</tr>
<!--modal-->
<div class='modal fade' id='editModal' tabindex='-1' role='dialog' aria-labelledby='editModalLabel' aria-hidden='true'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal'><span class='glyphicon glyphicon-remove'></span></button>
<h3 class="modal-title" id='modalHeading'>Entry for User ID <?php echo $u->$id; ?></h3>
</div>
<!--modal body-->
<div class='modal-body'>
<form action='' method='post'>
<div class='form-group'>
<label for='First Name'>First Name</label>
<input class='form-control' type='text' name='first_name' value="<?php echo $first_name; ?>"><br/>
</div>
<div class='form-group'>
<label for='Last Name'>Last Name</label>
<input class='form-control' type='text' name='last_name' value="<?php echo $last_name; ?>"/><br/>
</div>
<div class='form-group'>
<label for='Email'>Email</label>
<input class='form-control' type='text' name='email' value="<?php echo $email; ?>"/><br/>
</div>
<div class='form-group'>
<label for='Approved'>Approved</label>
<input class='form-control' type='text' name='email' value="<?php echo $approved; ?>"/><br/>
</div>
</div>
<!--modal footer-->
<div class='modal-footer'>
<button type="button" class="btn btn-primary">Update</button>
</div>
</form>
</div>
</div>
</div>
<?php } ?>
</tbody>
</table>
<!--attempt at ajax function for approve success class
<script>
$('.edit').on("click", function(){
// user id stored when row edit clicked
var userid = $(this).data('id');
$ajax({
url: $(this).attr('href'),
method: 'POST',
success: function (data) {
$('#row_' + userid).addClass('success')
},
error: function (data) {
$('#row_' + userid).addClass('danger')
}
});
});
</script>
-->
</body>
</html>
Please help!
