Jquery SetInterval Not Working Correctly in Chrome and IE but is fine in FireFox

Question

I have jquery/javascript below that works fine in FireFox but doesn't really work well in Chrome and IE

<script type="text/javascript">
        (function($) {
         $(document).ready(function() {
             setInterval(function() {
                $.ajax({
                    type: 'GET',
                    url: "/items/xml/?page={{ pageNo }}",
                    dataType: 'html',
                    success: function(html, textStatus) {
                        $('table.items').replaceWith(html);
                    },
                    error: function(xhr, textStatus, errorThrown) {
                        if (xhr.status != 0)
                        {
                        $('table.items').replaceWith("<p />An error occurred: " + ( errorThrown ? errorThrown : xhr.status ));
                        }
                    }
                });
             }, 1000);
             });
         })(jQuery);
    </script>

I updated jquery version. It is v1.10.2 like I seen suggested on another question. Sadly this didn't work. Chrome will work the most of the time but there is times where it doesn't work at all same with IE and it is really slow.

Does it have do with my code or it's problem in Chrome and IE? since FireFox is fine.

EDIT:

I should been clear the code is refreshing to update the page to see the changes could been made in the Database. Ie a new item has been added and this code it make sure it's seen as soon as it's refreshes without making someone having press F5 or reloading the page. I mean it just stays saying it's loading information to page in chrome but most of time displays no information about items on the page or really slow in doing so. Same with IE. Again no problem in FireFox.

Answer 1

Updated answer:

You've updated to say that the problem is you don't see the updated information.

You're using HTTP GET, which means that the browser is welcome to cache the result of the call if it likes, unless you specify appropriate cache control headers in the response. Some browsers cache XHR results, others don't.

Your best bet is to make the GET return appropriate headers. However, you can also force the GET to bypass cache, using jQuery's cache: false flag on the ajax call.

---

Original answer:

You haven't said what it is that "doesn't work," but if it's that you're seeing updates happening at odd intervals, that's not surprising.

Your code will start an ajax request roughly once a second (!). That ajax request will complete some time later. How much later will depend entirely on the user's network connection. So things will very, very quickly become chaotic, with potentially multiple outstanding requests, multiple responses coming in one right after another, etc.

I would recommend only initiating the next request when the current one completes, like this:

(function ($) {
    $(document).ready(function () {
        function doRequest() {
            $.ajax({
                type: 'GET',
                url: "/items/xml/?page={{ pageNo }}",
                dataType: 'html',
                success: function (html, textStatus) {
                    $('table.items').replaceWith(html);
                },
                error: function (xhr, textStatus, errorThrown) {
                    if (xhr.status != 0) {
                        $('table.items').replaceWith("<p />An error occurred: " + (errorThrown ? errorThrown : xhr.status));
                    }
                },
                complete: scheduleRequest // <=== Schedule the next on completion
            });
        }

        function scheduleRequest() {
            setTimeout(doRequest, 1000);
        }

        scheduleRequest();
    });
})(jQuery);

I'd also suggest that once a second is too frequently to be firing off network events like this unless absolutely necessary.