更新标签内的变量而不刷新
Simply, I want to display the number of unread messages in a label inside the menu as follows:
<li><a id="2" style="background-image:url('menu icons/comments.png'); background-repeat: no-repeat; background-position: left; background-position-x: 5px;"
href= "viewMessages.php">Messages<label id="num_msg">(<?php echo $count; ?>)</a></li>
where i get $count
as:
$num_messages = mysql_query("SELECT COUNT(m.message_id) as cnt FROM messages m INNER JOIN member_message_member mmm ON (m.message_id = mmm.message_id)
WHERE mmm.member_id2 = $id AND m.seen = 0") or die(mysql_error());
$Mcount = mysql_fetch_assoc($num_messages);
$count = $Mcount['cnt'];
and then when a user clicks on a message:
$("#sub a").click(function(){
mesg_id = $(this).attr('msg_id');
page = $(this).attr('href')
id = $(this).attr('mID');
$.ajax ({
data: {message_id:mesg_id},
type: 'POST',
url: 'Seen_messages.php',
success: function(response) {
if (response == 1) {
} else {
alert(response);
}
}
});
});
Seen_messages.php:
@mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("mydb") or die(mysql_error());
$message_id = $_POST['message_id'];
mysql_query("UPDATE `messages` SET `messages`.`seen` = TRUE WHERE message_id={$message_id}") or die (mysql_error());
echo "1";
everything is working properly, except that I have to refresh the page to update $count
, So is there anyway to update the variable inside the label without manual refresh?
Make Seen_messages.php
respond with the updated unread count, instead of always 1
, then use that response to update the user interface:
// ...
success: function(response) {
if (isNaN(response)) {
alert('Error!');
} else {
$('#num_msg').text(response);
}
}
How about writing a function to use with setInterval()
to constantly check the server for new messages, and update the <label>
count using jQuery. (BTW, your label is missing a closing tag!).
function get_msg_count(){
$.ajax ({
data: {}, // not really needed
type: 'POST',
url: 'get_msg_count.php', // page to return your msg count
success: function(response) {
// update the label with the count
// response would be the number returned from PHP
$('#num_msg').html(response);
}
}); // End $.ajax
} // End Function
// and on DOM ready
$(function(){
// check for new messages every 3 seconds(3000ms)
setInterval(get_msg_count(), 3000)
});
Then your Server Side script would return the message count, and you would just update the label which holds the count.