This code is still very new, but it seems to work acceptably for me in Firefox and Opera. Basically, it uses Ajax to update the contents of your chatterbox every 10 seconds. Also, postbacks using the "talk" button are sent through Ajax. It's similar in effect to the sidebar or one of the fullpage clients, except it works in-place and looks just like the vanilla CB. However, there are some caveats. Suggestions/demands for improvement are welcome: Change Log: 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.
+min.js"></script>
<script>

    // Configuration Options --------------------------
    var refreshDelay = 10;   // seconds between refreshes
    var inactiveDelay = 600; // inactive seconds before stop
    var fixedHeight = false; // force fixed height CB
    var CBHeight = '300px';  // fixed height to use
    //--------------------------------------------------

    var dateObj = new Date();
    var CBTimeout;
    var lastPresence;
    var CBUpdating = true;

    $(document).ready(function() {
        $("body").bind("focus resize scroll click mouseover keypress",
+function(){
            var nowObj = new Date();
            lastPresence = nowObj.getTime();
            $('#cb_timeout_warning').remove();
            if (!CBUpdating) {
               CBUpdating = true;
               updatecb();
            }
        });
        CBTimeout = setTimeout("updatecb()", 1000 * refreshDelay);
        lastPresence = dateObj.getTime();
        talkbind();
        CBwrap();
    });
    
    function send_talk(message,dont_clear) {
            $('#cb_timeout_warning').remove();
            dateObj = new Date();
            lastPresence = dateObj.getTime();
            clearTimeout(CBTimeout);
            var dataObj = {
                node_id: 431883,
                op: 'message',
                message: message,
            };
            getCheckboxes(dataObj);
            $.ajax({
            url: 'http://'+window.location.hostname+'/?',
                type: 'post',
                data: dataObj,
                success: function(data) {
                    if(!dont_clear)
                        $('`[name=message`]').val('');
                    updatecb();
                },
                error: function(x,t,e) {
                    //opera.postError(t+e);
                }
            });
            return false;    
    }

    function talkbind() {
        $('input`[name=message_send`]').click(function() { 
            return send_talk($('`[name=message`]').val(),false);
        });
    }
    
    function CBwrap() {
        if(fixedHeight)
            $('#Chatterbox form').children(':not(input:not(`[type=chec
+kbox`]))')
                .wrapAll('<div style="height:'+CBHeight+';overflow:aut
+o;"></div>');
    }

    function getCheckboxes(dataObj) {
            $('#Chatterbox input:checked').each(function() {
                if ($(this).attr('name').match(/^deletemsg_/))
                   dataObj`[$(this).attr('name')`] = 'yup';
            });
    }

    function updatecb() {
        $.ajax({
            url: 'http://'+window.location.hostname+'/?',
            data: {
                node: 'chatterbox sidebar upper',
            },
            success: function(data) {
                var dataObj = {};
                getCheckboxes(dataObj);
                var extravisible = $('.cbextra:visible').get(0);
                $('#tempdiv').html(data);
                $('#Chatterbox form').children(':not(input:not(`[type=
+checkbox`]))').remove();
                $('#Chatterbox form').prepend($('#Free_Nodelet form').
+contents());
                CBwrap();
                for (name in dataObj) {
                    $('input`[name=' + name + '`]').attr('checked', 'c
+hecked');
                }
                dateObj = new Date();
                if((dateObj.getTime() - lastPresence) > ((inactiveDela
+y - 60)*1000)) {
                    if(!$('#cb_timeout_warning').get(0)) {
                        $('#Chatterbox .nodelet_body').append(
                          '<div id="cb_timeout_warning" style="color:r
+ed">Updates will stop due to inactivity in < 1 minute.</div>'
                        );
                    }
                } 
                if ((dateObj.getTime() - lastPresence) > (inactiveDela
+y*1000)) {
            $('#cb_timeout_warning').css({fontWeight : 'bold'}).text('
+Updates stopped due to inactivity.');
                    CBUpdating = false;
                } else {
                    CBTimeout = setTimeout("updatecb()", 1000 * refres
+hDelay);
                    CBUpdating = true;
                }
            }
        });
    }
</script>
<div id='tempdiv' style='display:none'>
</div>

[download]

Replies are listed 'Best First'.
Re: Free Nodelet Hack: AJAX-enabled Chatterbox
by tye (Sage) on Mar 13, 2009 at 23:56 UTC

    Please include some "presence" detection such that leaving something like this "up" forever with no interaction times out and stops refreshing.

    Update: Thanks!

    - tye        

[reply]
      Okay, done. If the user doesn't click "Talk" for 10 minutes, the script stops updating.
[reply]

        ++ Really neat. You could instead of tying to it 10 minutes after talk tie it to page interaction. Put a listener on the body or something(?) and only refresh every x while there is page activity. Click or scroll, something. Might be the lightest server-load way to go.

[reply]

Back to Perl Monks Discussion