Javascript: Div Only display once

Question

Hello. 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 doesnt 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 wont work.

Heres 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 incase 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 thats all. hope you can help me out

Answer 1

Hello,

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);
     });
}

Answer 2

The problem doesn't seem to be a bug in the code you posted. I think the variable $_SESSION['user_message'] changed at some point (i.e. deleted or set to null, false or zero). You are setting its value at some point after all, otherwise it wouldn't result in isset() returning true in the first place.

It's probably much easier to debug this problem by checking the actual communication between your browser and your server, i.e. using FireBug or just adding an alert(data) right in the beginning of the JS callback.

If you don't get any alerts when the message isn't shown, the problem is with your JS (i.e. the AJAX call doesn't fire, doesn't return or the code around it is never reached). If you get an alert with something other than 1, the problem is in the server response (if you have display_errors enabled, it will probably be some error message if it's really broken).

I hope you are aware that your .msg div is automatically fading out because of the callback in your AJAX handler, whether .message2 has faded out yet or not. Unhiding .message2 won't bring it back as long as .msg is hidden (though that won't explain why the div doesn't re-appear on another page loaded by clicking a link, entering an URL or forcing a reload). This might be a problem if you're loading all the content via AJAX and don't have any "real" URLs, though.

Answer 3

Finally i found out the error myself, and it was the timeout() function, inside the checksession(); .. It works like a charm now :)

I just needed to remove this:

setTimeout(function() {
    $('.msg').fadeOut('slow');
        }, 5000);

I dont know how to fix this, but i will ask in another question because i find this answered now! But thanks henchman and Alan, for taking your time to try to answer me