You need to be logged in, then enable the Chatterbox and the Free Nodelet in your Nodelet Settings, and in your Free Nodelet Settings, paste the following, and you get a chatterbox that refreshes itself dynamically, with optional browser notifications! Sending messages also works without reloading the entire page. It now also refreshes the "Other Users" nodelet and the Chatterbox regularly.

Since it was a little quiet in the Monastery when I implemented this, it's currently not 100% tested yet, let me know if you have any issues. (Update: So far, so good...)

<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script> <script src="/?node_id=11116369;displaytype=displaycode;part=2" type="text/javascript"></script>

(If you've already got jQuery loaded from another nodelet hack, you don't need to put that <script> tag twice, of course.)

If you don't want the AJAX CB enabled by default, then put this before the above <script> tags: "<script> AJAXCB_DEFAULTOFF=true; </script>".

I've created a Gist to version-control this code. I'll consider this particular node a "living document", as in I'm not going to add an "Updated" tag every time I make a change - if you want the version history, see the Gist.

"use strict"; $(function () { var CB_FETCHTIME_MS = 15 * 1000; var GERNERAL_REFRESHTIME_MS = 60 * 1000; // AJAX CB Refresh var refresh = function () { $.ajax({ url: '/', dataType: 'html', // testing shows the table rendered here is the same as in + the nodelet data: { node: 'showchatmessages', displaytype: 'raw', tick +er: 'yes' } }) .done(function (data) { var source = $('<div/>').html(data).find('table.cb_tab +le, .cb_quiet'); $('#Chatterbox table.cb_table, #Chatterbox .cb_quiet') +.replaceWith(source); $('#Chatterbox table.cb_table + br, #Chatterbox .cb_qu +iet + br').remove(); $('#Chatterbox .cb_quiet').append('<br/>'); }) .fail(function (jqXHR, textStatus, errorThrown) { console.warn("AJAX error: " + textStatus + " / " + jqX +HR.status + " " + errorThrown); }); }; // Refresh "Other Users" (followed by CB refresh!) var refresh_all = function () { $.ajax({ url: '/', dataType: 'html', // testing shows the body rendered here is the same as in +the nodelet data: { node: 'showotherusers', displaytype: 'raw', ticker +: 'yes' } }) .done(function (data) { // sadly, the <body> tag is not preserved, so we need +to do some funky parsing here var inSection = false; var source = $.grep( $('<div/>').html(data).contents() +.toArray(), function (obj) { if (inSection) { if ( $(obj).is('.update-time') ) inSection = f +alse; return true; } else if ( $(obj).is('.other-users-text') ) { inSection = true; return true; } return false; }); $('#Other_Users .nodelet_body').empty(); $('#Other_Users .nodelet_body').append(source); }) .fail(function (jqXHR, textStatus, errorThrown) { console.warn("AJAX error: " + textStatus + " / " + jqX +HR.status + " " + errorThrown); }) .always(refresh); }; // AJAX Message Fetching var notify_cb = $('<input/>', { type: 'checkbox' }); var ajax_cb = $('<input/>', { type: 'checkbox', checked: !window[" +AJAXCB_DEFAULTOFF"] }); var fetch_timer; var fetchit; var start_fetch = function () { if ( ajax_cb[0].checked ) fetch_timer = setTimeout(fetchit, CB_FETCHTIME_MS); }; var lastid; fetchit = function () { if (fetch_timer) clearTimeout(fetch_timer); fetch_timer = null; if ( !ajax_cb[0].checked ) return; var query = { node_id: '207304', xmlstyle: 'modern', ticker: ' +yes' }; if ( lastid ) query['fromid'] = lastid; $.ajax({ url: '/', dataType: 'xml', data: query }) .done(function (data) { var count = parseInt($("info", data).attr("count")); if ( count>0 ) { refresh(); if ( notify_cb[0].checked ) { var authors = {}; $('message author', data).each(function () { a +uthors[ $(this).text() ] = 1; }); authors = Object.keys(authors).sort().join(", +"); var notification = new Notification('New PerlM +onks Chatter', { body: count+" new messages by "+authors, tag: "PerlMonksChatter", icon: "/favicon.i +co", badge: "/favicon.ico" }); } } var li = $("info", data).attr("lastid"); if ( li ) lastid = li; }) .fail(function (jqXHR, textStatus, errorThrown) { console.warn("AJAX error: " + textStatus + " / " + jqX +HR.status + " " + errorThrown); }) .always(start_fetch); }; var all_refresh_timer; if ( !window["AJAXCB_DEFAULTOFF"] ) { start_fetch(); all_refresh_timer = setInterval(refresh_all, GERNERAL_REFRESHT +IME_MS); } // AJAX Form Submission var form = $('#Chatterbox form'); form.on('submit', function (evt) { evt.preventDefault(); // use the frame from the FullPage Chat as it renders faster var thedata = { op: 'message', node_id: '3193', displaytype: 'raw', message: $('#talkbox').val() }; $(":input",form).prop("disabled", true); $.ajax({ url: form.attr("action"), method: 'post', data: theda +ta }) .done(function (data) { $('#talkbox').val(""); // want to use fetchit() if possible here to update th +e lastid if ( ajax_cb[0].checked ) fetchit(); else refresh(); }) .fail(function ( jqXHR, textStatus, errorThrown ) { alert("CB submission error: "+textStatus+" / "+jqXHR.s +tatus+" "+errorThrown); }) .always(function () { $(":input",form).prop("disabled", false); }); }); // Checkboxes var cb_div = $('<div/>', { style: "font-size: 12px; display: inlin +e-block;" }); cb_div.append( $('<label/>', { text: "AJAX Refresh" }).prepend(aja +x_cb) ); form.after($("<br/>"), cb_div); ajax_cb.change(function () { if ( this.checked ) { start_fetch(); all_refresh_timer = setInterval(refresh_all, GERNERAL_REFR +ESHTIME_MS); refresh_all(); } else { if (fetch_timer) clearTimeout(fetch_timer); fetch_timer = null; if (all_refresh_timer) clearInterval(all_refresh_timer); all_refresh_timer = null; } }); if ( "Notification" in window ) { cb_div.append( $('<label/>', { text: "Notifications" }).prepen +d(notify_cb) ); notify_cb.change(function () { if ( !this.checked ) return; if ( Notification.permission == "default" ) { notify_cb.attr("disabled", true); Notification.requestPermission(function (result) { notify_cb.removeAttr("disabled"); if ( result != "granted" ) notify_cb[0].checked = +false; }); } else if ( Notification.permission != "granted" ) { alert("You've denied this page the ability to send not +ifications, please change this via your browser's settings."); this.checked = false; } }); } });

In reply to [Free Nodelet Hack] AJAX Chatterbox by haukex

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post; it's "PerlMonks-approved HTML":