Question

Sorry if I didn’t show you the whole code, because I am not sure how to implement it. I looked at facebook message notification box, if any new recent messages coming, on the top right of the message icon, a red number will be located there and overlay the message box, and when you click the number, it just disappear and the new messages are shown to you, I want to know how to implement that, and when more new messages coming the number indicating how many messages will appear again, did they use ajax auto refresh div to achieve that? So suppose I have the following message box:

     <style>
    #messsge{width:100px;height:50px;border: 1px soild #000000;}
    #number{color:#ff0000;position:abosolute; z-index:999;top:-40px;left:-90px;}
    </style>
    <a href="#"><div id="message"></div></a><span id="number">3</span>
  <script>
   $("#message").click(function (e) { 
     e.preventDefault();
     $("#number").hide();
        });
     var auto_refresh = setInterval(function (){
  $('#number').load('number.php').fadeIn("slow");
   }, 1000);//not exactly sure how to refresh the number, I assume probably don't need to retrieve it from another php file.


  </script>

I am not sure if I did the right thing, could any body help me with that, thanks a lot!

Answer 1

you may try something like

in your number.php

//get the userid or some id from which you can specify the user from which the request is coming 
//e.g. $id=$_SESSION['CurrentUserID']
//apply some logic to determine if the user has new messages if he has some new msgs
$hasNewMsg="yes";
//calculate the number of messages 
$newMsgs=5;
echo json_encode(new array("hasMsg"=>$hasNewMsg,"newMsgs"=>$newMsgs));

//and if no new msgs
echo json_encode(new array("hasMsg"=>"no"));

on the client side

<style>
    #messsge{width:100px;height:50px;border: 1px soild #000000;}
    #number{color:#ff0000;position:abosolute; z-index:999;top:-40px;left:-90px;}
    </style>
    <a href="#"><div id="message"></div></a><span id="number">3</span>

javascript/jquery

$(function(){
$("#message").click(function (e) { 
     e.preventDefault();
     $("#number").hide();
        });

var auto_refresh = setInterval(function (){

$.ajax({
type:"POST",
dataType:"json",
success:function(data){
if(data.hasMsg=="yes"){
$("#number").text(data.newMsgs).fadeIn('slow');
}
else//do nothing    
},
error:function(jxhr){
console.log(jxhr.responseText);
}   
});    
});    
});

Desclaimer: i am not familiar with php so …