javascript window.setInterval not working on latest Firefox and IE9

Question

i recently created a custom ping box(chat) for personal needs. When i coded it and tested in Firefox 3.6.13, it worked fine. However the functionality related to window.setInterval doesnt seem to work fine in IE9 or Firefox 6.

Below is the code for javascript.

    <script>

     function loadNewPosts(){
        var id = $(".altbgcolor:first").attr("id");

        $.get('/updateping.php', { updateid: id ,  }, function(data){
                                $(".newslist").prepend(data);
                            }, 'html');
     }

     window.setInterval(loadNewPosts, 1000*3)   


     $(document).ready(function() { 
    // bind form using ajaxForm 

             $("#pingForm").validate({


                submitHandler: function(form) {  
                $('#pingForm').ajaxSubmit({ 
                        // target identifies the element(s) to update with the server response 
                        target: '#pingResult', 

                        // success identifies the function to invoke when the server response 
                        // has been received; here we apply a fade-in effect to the new content 
                        success: function() { 

                            $('#msg').val('');
                            $('#pingResult').fadeIn('slow'); 
                            $('#pingResult').fadeOut(2000); 
                        } 
                    });
                }
            }); 

        })


 </script> 

Below is the HTML

      <ul class="newslist" style="width:630px;">

        <li class="altbgcolor" id=64>
    <div>   
        <div class="newsthumb" style="width:50; height:50; "center center no-repeat;"><img src="images/personal/sunny.jpg" /></div>



        <div class="newstext" style="margin:0px;">


        <h1 style="color:#081C28;"><img width="11" height="9" src="/content/icon_topic_newest.gif">how r u?</h1>

        </div>
        <br /><br />
        <div style="font-size: 0.6em; color:#666666;">  
            <span style="text-decoration:none; color:none; padding:5px;"><i> from: <a href="" style="text-decoration: none;color:#105289 ;" onmouseover="this.style.textDecoration = 'underline'" onmouseout="this.style.textDecoration = 'none'">Sunny</a></i></span>                          
            <span style="text-decoration:none; color:none; padding:5px; "><i> posted: <a href="" style="text-decoration: none;color:#105289 ;" onmouseover="this.style.textDecoration = 'underline'" onmouseout="this.style.textDecoration = 'none'">October 29, 2011, 9:58 am</a></i></span>                           
        </div>  

        <div class="clear"></div>
     </div>


    </li>
        </ul>

I tried to debug the problem using Firebug, but though it does seem that window.setInterval is able to call the .php file with required parameters every 3secs, however it doesnt show the o/p of the php file.

Code of php (updateping.php)

        <?

        require_once('includes/connection.php');
        require_once('includes/functions.php');

        if(isset($_GET['updateid']))
        {
            $updateid=$_GET['updateid'];
            $sql="SELECT * FROM ping WHERE id > $updateid ORDER BY id DESC";

            $res=mysql_query($sql,$connection);

            if(@mysql_num_rows($res))
            {
                while($data=mysql_fetch_array($res))
                        //while($data=mysql_fetch_array($result))
                        {
                                echo '<li class="altbgcolor" id='.$data['id'].'>
                                    <div>   
                                        <div class="newsthumb" style="width:50; height:50; center center no-repeat;"><img src="'.$data['img'].'"  /></div>



                                        <div class="newstext" style="margin:0px;">


                                        <h1 style="color:#081C28;"><img width="11" height="9" src="/content/icon_topic_newest.gif">'.stripslashes($data['msg']).'</h1>

                                        </div>
                                        <br /><br />
                                        <div style="font-size: 0.6em; color:#666666;">  
                                            <span style="text-decoration:none; color:none; padding:5px;"><i> from: <a href="" style="text-decoration: none;color:#105289 ;" onmouseover="this.style.textDecoration = \'underline\'" onmouseout="this.style.textDecoration = \'none\'">'.$data['name'].'</a></i></span>                          
                                            <span style="text-decoration:none; color:none; padding:5px; "><i> posted: <a href="" style="text-decoration: none;color:#105289 ;" onmouseover="this.style.textDecoration = \'underline\'" onmouseout="this.style.textDecoration = \'none\'">'.$data['entry_date'].'</a></i></span>                         
                                        </div>  
                                        <div class="clear"></div>
                                     </div>


                                    </li>'; 


                        }


            }

        }




        ?>

I am in a fix here and dont understand what could be the problem. That chatbox works fine on FF 3.6.13

Please help me someone!!!!!!!!!!!

UPDATE: I tried the IE9 'F12' developer debugger and found that every 3 secs thought the php file is called the return result type 304-Not modified. :((

I went to 'Cache' options on the debugger menu and checked the option 'Always Refresh from server' and bammmm!!!! it worked now.

Any idea how to tweak this in actual IE and Firefox settings. The problem seems to be related to caching only.

Answer 1

Since you're already using jQuery, you can try this:

$(document).ready(function() {
  $.ajaxSetup({ cache: false });
});

As per the jQuery .ajax doco jQuery will then append a timestamp to your request automatically so that the browser won't try to use the cache for subsequent requests.

Or you can try to fix the caching issue server-side with settings in the Cache Control section of the HTTP response header, but I don't know how to do that in PHP.

Answer 2

Either add a timestamp to your get request, or use post instead.

$.get('/updateping.php', { updateid: id , time: new Date().valueOf() }, function(data){
    ...

Or

$.post('/updateping.php', { updateid: id }, function(data){
    ...