Display div only once

Question

So I want to do look a like stackoverflow with the message at the top.

Now I have all configured and such, but I got one problem.. The message only displays 1st time, second time it doesn't appear.

I know why, something about every id must be unique or something in a div.. And then I've used rand(1, 300); (php) and it still won't work.

Here's my codes:

function checkSession(){
    $.ajax({url: "session.php", success: function(data){
         if( data == 1){
            var postFilen = 'msg.php';
            $.post(postFilen, function(data){
            $(".msg").html(data).find(".message2").fadeIn("slow")
            setTimeout(function(checkSession) {
    $('.msg').fadeOut('slow');
}, 10000);
            });  
         }else{ 
             $('.message2').hide();
         }
    }});
// setInterval('checkSession()',1000);
}

index.php:

<div class="msg" id="msg" ></div>

msg.php:

<div class="message2" id="message2" onclick="closeNotice2()" style="display: none">
Yo, <b><? echo $pusername; ?></b> - <? echo $_SESSION["user_message"]; ?> 
<a class="close-notify" onclick="closeNotice2()">X</a>
</div> 

CloseNotice2() - (just in case if you want to see that too):

function closeNotice2() {
    $(".message2").fadeOut("slow");
} 

session.php:

if(isset($_SESSION['user_message'])) {
echo 1; 
}

CSS:

.message2 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 105; /* Anything higher than 1 will do */
    background-color: #034678; 
    font-family: Arial,Helvetica,sans-serif;
    font-size: 100%;
    text-align: center;
    font-weight: bold;
    border-bottom: 2px solid #FFF;
  height: 26 px;
  width: 100%;
}
.message2 span {
    text-align: center;
    width: 95%;
    float:left;
}

I think that's all. Hope you can help me out.

Answer 1

you are querying session.php, and if the session variable was not set, the message will appear. if the session variable has been set, the message won't appear.

presumably your session variable 'user_message' will be set somewhere after the first page call, so that the message will not be shown again. i couldn't find such code.

your javascript is finding the message div-container by className "msg"/"message2" - this behavior is not altered when changing the id of that div with randomized numbers. what do you want to achieve using these random numbers? would you want the msg-container to show more than only once?

edit:

first, try to use the following code. is the message now showing every time?

function checkSession(){
     var postFilen = 'msg.php';
     $.post(postFilen, function(data){
          $(".msg").html(data).find(".message2").fadeIn("slow")
          setTimeout(function(checkSession) {
          $('.msg').fadeOut('slow');
          }, 10000);
     });
}