Keeping a jQuery .getJSON() connection open and waiting while in body of a page?

I'm writing a basic push messaging system. A small change has caused it to stop workingly properly. Let me explain. In my original version, I was able to put the code in the of a document something like this:

<head>
  ...text/javascript">
  $(document).ready(function(){
    $(document).ajaxStop(check4Updates);
    check4Updates();
  });

  function check4Updates(){
    $.getJSON('%PATH%', callback);
  };
...
</head>

This worked nicely and would keep the connection open even if the server return null (which it would after say a 2 minute timeout). It would just keep calling the getJSON function over and over indefinitely. Happy Panda.

Now, I must put the code segment in between tags. Access to the $(document).ready() function pretty much won't work.

<body>
...
check4Updates();
$("body").ajaxStop(check4Updates);
...
</body>

This works... for a while. Shortly thereafter, it will stop calling check4Updates and get into an infinite loop and use 100% processor time.

I'm trying to get it so that check4Updates is repeatedly called until the page is closed. If anyone has any insights as to why my simple change is no longer functioning as expected, PLEASE let me know. Thank you for taking the time to read and help me out.

Best Regards, Van Nguyen

Solution

Yeah, you're not going to want to use that loop, you're pretty much DOSing yourself not to mention locking the client.

Simple enough, create a polling plugin:

Source: http://web.archive.org/web/20081227121015/http://buntin.org:80/2008/sep/23/jquery-polling-plugin/

Usage:

$("#chat").poll({
    url: "/chat/ajax/1/messages/",
    interval: 3000,
    type: "GET",
    success: function(data){
        $("#chat").append(data);
    }
});

The code to back it up:

(function($) {
    $.fn.poll = function(options){
        var $this = $(this);
        // extend our default options with those provided
        var opts = $.extend({}, $.fn.poll.defaults, options);
        setInterval(update, opts.interval);

        // method used to update element html
        function update(){
            $.ajax({
                type: opts.type,
                url: opts.url,
                success: opts.success
            });
        };
    };

    // default options
    $.fn.poll.defaults = {
        type: "POST",
        url: ".",
        success: '',
        interval: 2000
    };
})(jQuery);