I'm trying to code a website. On the inbox page I have a list of messages received via PHP and MySQL and styled by CSS. What I'm trying to do is to open a bootstrap modal when you click on each message. Now I'm trying to use JQuery to change the MySQLi using ajax and save the fact that the message has been read, and at the same time to use a bootstrap modal to open the message and let the user read the contents. But when I try to use JQuery and ajax to do so, it just keep doing nothing. Here is the code of the page...
inbox page
if ($row['readed'] == 0) {
$action = '<a href="setasread.php?id='.$row["id"].'" data-toggle="modal" data-target="#myModal'.$row["id"].'" title="View" class="viewmarkajax"><i class="fa fa-eye" aria-hidden="true"></i></a> | <a href="setasread.php?id='.$row["id"].'" title="Mark as read"><i class="fa fa-envelope-o"></i></a>';
$message_read_color = 'class="warning"';
}
else {
$action = '<a href="" data-toggle="modal" data-target="#myModal' . $row["id"] . '" title="View"><i class="fa fa-eye" aria-hidden="true"></i></a>' .
' | ' .
'<a href="setasunread.php?id=' . $row["id"] . '" title="Mark as unread"><i class="fa fa-envelope-open-o" aria-hidden="true"></i></a>';
$message_read_color = 'class="success"';
}
echo '<tr ' . $message_read_color . '>\n';
echo ' <td>' . $row["sender_name"] . '</td>\n';
echo ' <td><a href="" data-toggle="modal" data-target="#myModal' . $row["id"] . '">' . $row["subject"] . '</a></td>\n';
echo ' <td>' . $row["date"] . '</td>\n';
echo ' <td>' . $rowtype . '</td>\n';
echo ' <td>' . $action . '</td>\n';
echo '</tr>\n\n';
$message_content = $row["message"];
echo '<div class="modal fade" id="myModal' . $row["id"] . '" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">\n';
echo ' <div class="modal-dialog" role="document">\n';
echo ' <div class="modal-content">\n';
echo ' <div class="modal-header">\n';
echo ' <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>\n\n';
echo ' <h4 class="modal-title" id="myModalLabel">Subject: ' . $row["subject"] . '</h4>\n';
echo ' </div>\n\n';
echo ' <div class="modal-body">\n';
echo ' From: ' . $row["sender_name"] . '<br>\n';
echo ' Date Recieved: ' . $row["date"] . '<br><br>\n';
echo ' ' . $message_content . '\n';
echo ' </div>\n\n';
echo ' <div class="modal-footer">\n';
echo ' <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>\n';
echo ' </div>\n';
echo ' </div>\n';
echo ' </div>\n';
echo '</div>\n';
}
setasread.php
require 'include/functions.php';
require 'include/usercnfg.php';
if ( isset( $_GET['id'] ) && !empty( $_GET['id'] ) ) {
$messageid = $_GET['id'];
$fquery = "SELECT `readed` FROM `messages` WHERE `id`=".$messageid;
$fquery_run = mysqli_query( $conn, $fquery );
$userdetails = mysqli_fetch_row( $fquery_run );
if ( $userdetails[0] == 0 ) {
$query = "UPDATE `messages` SET `readed`=1 WHERE `id`=" . $messageid;
$query_run = mysqli_query( $conn, $query );
$myredirection = "index.php?action=inbox";
header( 'Location: ' . $myredirection );
}
else {
echo "Already read.";
}
}
else {
echo "No id specified.";
}
jquery code
$( document ).ready(function() {
$('.viewmarkajax').click(function() {
$.get($(this).attr('href'), function() {});
return false;
});
});
So as you can see I am trying to use bootstrap modal and define my own JQuery as well. But apparently I can not do so. Can anyone tell me a way to do it?