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

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){
    ...