I wrote this code:
<div class="container">
<div class="row">
<div class="col-md-3">
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
Message options
</h5>
</div>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
<table class="table">
<tr>
<td>
<a href="?messages=inbox"><i class="fa fa-inbox"></i> Inbox</a>
</td>
</tr>
<tr>
<td>
<a href="?messages=read"><i class="fa fa-envelope"></i> Read</a>
</td>
</tr>
<tr>
<td>
<a href="?messages=trash"><i class="fa fa-trash"></i> Trash</a>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<div class="card">
<div class="card-header">
Messages
</div>
<div class="card-block">
<table class="table mx-auto" id="table">
<thead>
<tr>
<th>Number</th>
<th>Subject</th>
<th>Time added</th>
<th>More</th>
</tr>
</thead>
</div>
<?php
if((isset($_GET['messages']) && $_GET['messages'] == 'inbox') || !isset($_GET['messages'])) {
$id = $_SESSION['id'];
$messages = $database->getDataAsArray("SELECT * FROM messages WHERE userId = $id AND messageDeleted = 0");
}
elseif(isset($_GET['messages']) && $_GET['messages'] == 'read' ){
$id = $_SESSION['id'];
$messages = $database->getDataAsArray("SELECT * FROM messages WHERE userId = $id AND messageRead = 1");
}
elseif (isset($_GET['messages']) && $_GET['messages'] == 'trash'){
$id = $_SESSION['id'];
$messages = $database->getDataAsArray("SELECT * FROM messages WHERE userId = $id AND messageDeleted = 1");
}
if(!$messages){
echo '<tr>
<td colspan="3" style="text-align: center">No new messages in the inbox</td>
</tr>';
}
elseif(!isset($_GET['messages']) || $_GET['messages'] == 'inbox'){
foreach ($messages as $message){
$number = $message['id'];
$subject = $message['subject'];
$time_added = $message['time_added'];
if($message['messageRead'] == 0){
echo "<tr class='table-active'><td>$number</td><td>$subject</td><td>$time_added</td></tr>";
}
else{
echo "<tr><td>$number</td><td>$subject</td><td>$time_added</td><td><div class='dropdown'>
<button class='btn btn-secondary btn-sm ' type='button' id='dropdownMenu2' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
<i class='fa fa-ellipsis-v'></i>
</button>
<div class='dropdown-menu dropdown-menu-left' aria-labelledby='dropdownMenu2'>
<a class='dropdown-item' href='#'>Preview</a>
<a class='dropdown-item' href='#'>Mark as read</a>
<a class='dropdown-item' href='#'>Mark as unread</a>
</div>
</div>
</td></tr>";
}
}
}
else{
foreach ($messages as $message){
$number = $message['id'];
$subject = $message['subject']; // needs to become subject new row in database
$time_added = $message['time_added'];
echo "<tr><td>$number</td><td>$subject</td><td>$time_added</td>
<td><div class='dropdown'>
<button class='btn btn-secondary btn-sm ' type='button' id='dropdownMenu2' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
<i class='fa fa-ellipsis-v'></i>
</button>
<div class='dropdown-menu dropdown-menu-left' aria-labelledby='dropdownMenu2'>
<button class='dropdown-item' data-toggle='modal' data-number='$number' data-target='#exampleModalLong'>Preview</button>
<a class='dropdown-item' href='#'>Mark as read</a>
<a class='dropdown-item' href='#'>Mark as unread</a>
</div>
</div>
</td></tr>";
}
}
?>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
$('#exampleModalLong').on('show.bs.modal', function(e) {
var number = $(e.relatedTarget).data('number');
$.ajax({
type: 'POST',
url: 'retrieveData.php',
data: {
'id': number
},
success: function(data){
console.log(data);
},
error: function(error){
alert(error);
}
});
});
</script>
I want to retrieve the data by Id of the message and show a preview on click of the modal. But somehow when I click on my 3 dot menu (which launches the modal) the console won't log the data from retrieveData.php
retrieveData.php
if(isset($_POST['id'])){
$id = $_POST['id'];
$data = $database->getDataAsArray("SELECT * FROM messages WHERE id=$id");
echo $data;
return $data;
}
getDataAsArray function (completly unsafe I know I need to use a prepared statment):
public function getDataAsArray($myQuery){
$this->connection = mysqli_connect($this->host, $this->dbUsername, $this->dbPassword, 'portal');
$query = mysqli_query($this->connection, $myQuery);
$results = array();
while($line = mysqli_fetch_array($query)){
$results[] = $line;
}
return $results;
}
Could anyone please help me to fix my Ajax function (I think the error is there) so I can display the data of a message in my modal?
