Sql UPDATE on link click - php

Question

I'm trying to update a one value when a user clicks on a link.
<?php
$data = mysql_query("SELECT * FROM comments a LEFT JOIN pins b ON a.pin_id = b.id INNER JOIN board c on b.board_id = c.id WHERE a.to_id = '$myid' AND a.status = 'unviewed'")
or die(mysql_error()); while($info = mysql_fetch_array( $data ))
{
Print "<li>";
Print "<a href='/board/pins/".$info['board_id']."/".$info['pin_id']."'>";
Print "<img src='".$info['pin_url']."' width='50' align='left'>";
Print "<font size='1'>comment received on ".$info['date']."</font></a>";
Print "Collection: ".$info['board_name']."</li>";
}
?>
The link is the one above.
how can I edit the above code to include an update query "UPDATE comments SET status='viewed' WHERE to_id = '$myid' AND id='$postid'" when the link is clicked?
EDIT:
this is my mark_viewed.php:
<?php
$con=mysqli_connect("XXX","XXX","XXX","XXX");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
// get values sent from address bar
$myid=$_GET['myid'];
$postid=$_GET['postid'];
mysqli_query($con,"UPDATE comments SET status='viewed' WHERE to_id ='$myid' AND id='$postid'");
mysqli_close($con);
?>
And my the send page:
<?php // display of the notifications dropdown menu
$query_select = "SELECT * FROM comments a LEFT JOIN pins b ON a.pin_id = b.id LEFT JOIN board c on b.board_id = c.id WHERE a.to_id = '$myid' AND a.status = 'unviewed' ORDER BY a.date DESC";
$result_select = mysql_query($query_select) or die(mysql_error());
$rows = array();
while($row = mysql_fetch_array($result_select))
$rows[] = $row;
foreach($rows as $row){
$myid = $row['user_id']; // my id
$name = $row['board_name']; // collection name
$boardid = $row['board_id']; // collection id
$postid = $row['pin_id']; // post id
$url = $row['pin_url']; // image url
echo "<li><a href='/board/pins/$boardid/$postid' data-myid='$myid' data- postid='$postid' class='markviewed'>";
echo "<img src='$url' height='50' width='50'>";
echo "New comment in $name.";
echo "</a></li>";
}
?>
I have the JS in the head of the same page but it isn't working. The varibles are fine on this page $myid and $postid but they aren't being sent/received on mark_viewed.php

Answer 1

Try this code (AJAX as suggested in comments). It assumes What it basically does is:
Print relevant ids into html as attributes.
Binds a listener to click event on those links
After pinging http://domain.com/mark_viewed.php (file that does the query updating comments as viewed) it redirects the browser to the desired location (/board/pins/...)
//html part
<?php
$myid = 1234;
$postid = 333;
//echo prepared link with ids in it's data-attributes
echo '<a href="/board/pins/"'.$info['board_id'].'/'.$info['pin_id'].'"
data-myid="' . $myid . '"
data-postid="' . $postid . '"
class="markviewed">mark ids as viewed and go to /board/pins/...</a>';
?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
//bind a listener to "click" event on links with class "markviewed"
$('a.markviewed').click(function(event) {
//prevent default behavior just in case
event.preventDefault();
//get ids from clicked <a>
var myid = $(this).attr('data-myid');
var postid = $(this).attr('data-postid');
//ping the address to mark clicked link as viewed
$.ajax('http://domain.com/mark_viewed.php?myid=' + myid + '&postid=' + postid);
//redirect to the link in the href attribute
window.location.href = $(this).attr('href');
});
});
</script>