Problem with avatars on memberslist in chatbox javascript

Hello,
I am facing a problem with a javascript which it was displayed the avatars on memberslist of chatbox suddenly stopped working.

JavaScript:

Code:


/**************************************************************************
    * Module: cb_avatar
    * Description: Add avatar on chat user list!
    * Author: Made and Optimizations by JScript - 2015/02/05
    * Version: RC1 (Release candidate 1!)
    ***************************************************************************/

    // Redefine function!
    function insertChatBox(chatbox_id, chatbox_url) {
      return insertChatBoxNew(chatbox_id, chatbox_url);
    }
    // Redefine function!
    function insertChatBoxNew(chatbox_id, chatbox_url) {
      // Put the chat box on top of widgets!
      // $('#' + chatbox_id).parent().detach().prependTo('#wrapper');

      document.getElementById(chatbox_id).innerHTML = '<iframe src="/chatbox/index.forum?archives=0" id="frame_chatbox" scrolling="no" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="0"></iframe>';

      $('#frame_chatbox').load(function(){
          var oIframe = (document.getElementById("frame_chatbox").contentWindow || document.getElementById("frame_chatbox").contentDocument),
            script = oIframe.document.createElement("script");

          script.type = "text/javascript";
          script.innerHTML =
            'Chatbox.prototype.refresh = function(data) {\n' +
            '  if (data.error) {\n' +
            '      $("body").html(data.error)\n' +
            '  } else {\n' +
            '      if (this.connected && !this.archives) {\n' +
            '        $("#chatbox_footer").css("display", "block");\n' +
            '        $("#chatbox_messenger_form").css("display", "block");\n' +
            '        $("#chatbox_messenger_form").css("visibility", "visible")\n' +
            '      } else {\n' +
            '        $("#chatbox_footer").css("display", "none");\n' +
            '        $("#chatbox_messenger_form").css("display", "none");\n' +
            '        $("#chatbox_messenger_form").css("visibility", "hidden")\n' +
            '      }\n' +
            '      if (this.connected) {\n' +
            '        $("#chatbox_display_archives").show();\n' +
            '        $("#chatbox_option_co").hide();\n' +
            '        $("#chatbox_option_disco, #chatbox_footer").show();\n' +
            '        $(".format-message").each(function() {\n' +
            '            var name = $(this).attr("name");\n' +
            '            var value = my_getcookie("CB_" + name);\n' +
            '            $(this).prop("checked", parseInt(value) ? true : false)\n' +
            '        });\n' +
            '        this.format();\n' +
            '        if (data.lastModified) {\n' +
            '            this.listenParams.lastModified = data.lastModified\n' +
            '        }\n' +
            '      } else {\n' +
            '        $("#chatbox_option_co").show();\n' +
            '        $("#chatbox_option_disco, #chatbox_footer").hide()\n' +
            '        $("#chatbox_display_archives").hide()\n' +
            '      }\n' +
            '      if (data.users) {\n' +
            '        this.users = [];\n' +
            '        $(".online-users, .away-users").empty();\n' +
            '        $(".member-title").hide();\n' +
            '        for (var i in data.users) {\n' +
            '            var user = data.users[i];\n' +
            '            this.users[user.id] = user;\n' +
            '            if (user.avatar) {\n' +
            '              var username = "<span class=\'cb-avatar\'><img src=\'" + user.avatar + "\' style=\'height: 24px; width: 24px; margin-right: 4px;\'/></span>" + "<span style=\'color:" + user.color + "\'>" + (user.admin ? "@ " : "");\n' +
            '            } else {\n' +
            '              var username = "<span style=\'color:" + user.color + "\'>" + (user.admin ? "@ " : "")\n' +
            '            }\n' +
            '            username += "<span class=\'chatbox-username chatbox-user-username\' data-user=\'" + user.id + "\' >" + user.username + "</span></span>";\n' +
            '            var list = user.online ? ".online-users" : ".away-users";\n' +
            '            $(list).append("<li>" + username + "</li>")\n' +
            '        }\n' +
            '        if (!$(".online-users").is(":empty")) {\n' +
            '            $(".member-title.online").show()\n' +
            '        }\n' +
            '        if (!$(".away-users").is(":empty")) {\n' +
            '            $(".member-title.away").show()\n' +
            '        }\n' +
            '      }\n' +
            '      if (data.messages) {\n' +
            '        var scroll = !this.messages || this.messages.length != data.messages.length;\n' +
            '        this.messages = data.messages;\n' +
            '        $("#chatbox").empty();\n' +
            '        if (this.messages) {\n' +
            '            var cb_content = "",\n' +
            '              message = "",\n' +
            '              html = "",\n' +
            '              msg = "";\n' +
            '            for (var j = 0, len = this.messages.length; j < len; j++) {\n' +
            '              message = this.messages[j];\n' +
            '              html = "<p class=\'chatbox_row_" + (j % 2 == 1 ? 2 : 1) + " clearfix\'><span class=\'right desc\'><span class=\'date-and-time\' title=\'" + message.date + "\'>(" + message.datetime + ")</span></span>";\n' +
            '              if (message.userId == -10) {\n' +
            '                  html += "<span class=\'msg\'><span style=\'color:" + message.msgColor + "\'><strong> " + message.msg + "</strong></span></span>"\n' +
            '              } else {\n' +
            '                  html +=\n' +
            '                    "<span class=\'user-msg\'>";\n' +
            '                        if (this.avatar) {\n' +
            '                          html += "  <span class=\'cb-avatar\'><img src=\'" + message.user.avatar + "\' /></span>";\n' +
            '                        }\n' +
            '                    html +=\n' +
            '                        "<span class=\'user\' style=\'color:" + message.user.color + "\'>" +\n' +
            '                          "<strong> " + (message.user.admin ? "@ " : "") +\n' +
            '                              "<span class=\'chatbox-username chatbox-message-username\' data-user=\'" + message.userId + "\' >" + message.username + "</span> :&nbsp;" +\n' +
            '                          "</strong>" +\n' +
            '                          "<span class=\'msg\'>" + message.msg + "</span>" +\n' +
            '                        "</span>"\n' +
            '                    "</span>";\n' +
            '              }\n' +
            '              html += "</p>";\n' +
            '              cb_content += html;\n' +
            '            }\n' +
            '            $("#chatbox").append(cb_content);\n' +
            '            if (scroll) {\n' +
            '              $("#chatbox")[0].scrollTop = $("#chatbox").prop("scrollHeight") * 2\n' +
            '            }\n' +
            '        }\n' +
            '      }\n' +
            '  }\n' +
            '};';
          oIframe.document.getElementsByTagName("head")[0].appendChild(script);
      });
    }


Probably the technicians change something and now is not working. Can you help me please?

Yes, they changed the JSON format of the messages...

But cheer up: This is not a problem since I already have the solution, see:

Link: https://help.forumotion.com/t138790-new-chat-box-a-brief-analysis#944373

So long,

JS

JScript wrote:Yes, they changed the JSON format of the messages...

But cheer up: This is not a problem since I already have the solution, see:

Link: https://help.forumotion.com/t138790-new-chat-box-a-brief-analysis#944373

So long,

JS

Hello @JScript,
I have replace the chatbox code with the new one but it is displaying the text "undefined" after refreshing page like this picture:



I have replace the variable value into /chatbox/index.forum?archives=0 for the default value instead 1.

Okay, I'll check the chatbox8.js code and then I will post a new modified code ok?

JS

Hello @JScript,
Ok I am waiting for the new update code.

Black-Shadow wrote:Hello @JScript,
Ok I am waiting for the new update code.

Here's the new code:

Code:


/**************************************************************************
 * Module: cb_avatar
 * Description: Add avatar of members in the "Online / Away" user list
 * Author: Made and Optimizations by JScript - 2015/02/17
 * Version: RC1 (Release candidate 1!)
 ***************************************************************************/

// Redefine function!
function insertChatBox(chatbox_id, chatbox_url) {
   return insertChatBoxNew(chatbox_id, chatbox_url);
}
// Redefine function!
function insertChatBoxNew(chatbox_id, chatbox_url) {
   // Put the chat box on top of widgets!
   // $('#' + chatbox_id).parent().detach().prependTo('#wrapper');

   document.getElementById(chatbox_id).innerHTML = '<iframe src="/chatbox/index.forum?archives=1" id="frame_chatbox" scrolling="no" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="0"></iframe>';

   $('#frame_chatbox').load(function(){
      var oIframe = (document.getElementById("frame_chatbox").contentWindow || document.getElementById("frame_chatbox").contentDocument),
         script = oIframe.document.createElement("script");

      script.type = "text/javascript";
      script.innerHTML =
         'chatbox.init();\n' +
         'var interval = setInterval(function() {\n' +
         '   chatbox.init();\n' +
         '}, 5000);\n' +
         'Chatbox.prototype.refresh = function(data) {\n' +
         '   if (data.error) {\n' +
         '      $("body").html(data.error)\n' +
         '   } else {\n' +
         /*
         '      if (this.connected) {\n' +// && !this.archives) {\n' +
         '         $("#chatbox_footer").css("display", "block");\n' +
         '         $("#chatbox_messenger_form").css("display", "block");\n' +
         '         $("#chatbox_messenger_form").css("visibility", "visible")\n' +
         '      } else {\n' +
         '         $("#chatbox_footer").css("display", "none");\n' +
         '         $("#chatbox_messenger_form").css("display", "none");\n' +
         '         $("#chatbox_messenger_form").css("visibility", "hidden")\n' +
         '      }\n' +
         */
         '      if (this.connected) {\n' +
         '         $("#chatbox_footer").css("display", "block");\n' +
         '         $("#chatbox_messenger_form").css("display", "block");\n' +
         '         $("#chatbox_messenger_form").css("visibility", "visible")\n' +
         '         \n' +
         '         $("#chatbox_display_archives").show();\n' +
         '         $("#chatbox_option_co").hide();\n' +
         '         $("#chatbox_option_disco, #chatbox_footer").show();\n' +
         '         $(".format-message").each(function() {\n' +
         '            var name = $(this).attr("name");\n' +
         '            var value = my_getcookie("CB_" + name);\n' +
         '            $(this).prop("checked", parseInt(value) ? true : false)\n' +
         '         });\n' +
         '         this.format();\n' +
         '         if (data.lastModified) {\n' +
         '            this.listenParams.lastModified = data.lastModified\n' +
         '         }\n' +
         '      } else {\n' +
         '         $("#chatbox_footer").css("display", "none");\n' +
         '         $("#chatbox_messenger_form").css("display", "none");\n' +
         '         $("#chatbox_messenger_form").css("visibility", "hidden")\n' +
         '         \n' +
         '         $("#chatbox_option_co").show();\n' +
         '         $("#chatbox_option_disco, #chatbox_footer").hide()\n' +
         '         $("#chatbox_display_archives").hide()\n' +
         '      }\n' +
         '      if (data.users) {\n' +
         '         this.users = [];\n' +
         '         $(".online-users, .away-users").empty();\n' +
         '         $(".member-title").hide();\n' +
         '         for (var i in data.users) {\n' +
         '            var user = data.users[i];\n' +
         '            this.users[user.id] = user;\n' +
         //'            var username = "<span style=\'color:" + user.color + "\'>" + (user.admin ? "@ " : "") + "<span class=\'chatbox-username chatbox-user-username\' data-user=\'" + user.id + "\' >" + user.username + "</span></span>";\n' +
         '            var username = "";\n' +
         '            for (var j in data.messages) {\n' +
         '               var message = data.messages[j];\n' +
         '               if (message.userId == user.id) {\n' +
         '                  if (message.user.avatar) {\n' +
         '                     username = "<span class=\'cb-avatar\'><img src=\'" + message.user.avatar + "\' style=\'height: 24px; width: 24px; margin-right: 4px;\'/></span>";\n' +
         '                  }\n' +
         '               }\n' +
         '            }\n' +
         '            username += "<span style=\'color:" + user.color + "\'>" + (user.admin ? "@ " : "") + "<span class=\'chatbox-username chatbox-user-username\' data-user=\'" + user.id + "\' >" + user.username + "</span></span>";\n' +
         '            var list = user.online ? ".online-users" : ".away-users";\n' +
         '            $(list).append("<li>" + username + "</li>")\n' +
         '         }\n' +
         '         if (!$(".online-users").is(":empty")) {\n' +
         '            $(".member-title.online").show()\n' +
         '         }\n' +
         '         if (!$(".away-users").is(":empty")) {\n' +
         '            $(".member-title.away").show()\n' +
         '         }\n' +
         '      }\n' +
         '      if (data.messages) {\n' +
         '         var scroll = !this.messages || this.messages.length != data.messages.length;\n' +
         '         this.messages = data.messages;\n' +
         '         $("#chatbox").empty();\n' +
         '         if (this.messages) {\n' +
         '            var cb_content = "",\n' +
         '               message = "",\n' +
         '               html = "",\n' +
         '               msg = "";\n' +
         '            for (var j = 0, len = this.messages.length; j < len; j++) {\n' +
         '               message = this.messages[j];\n' +
         '               html = "<p class=\'chatbox_row_" + (j % 2 == 1 ? 2 : 1) + " clearfix\'><span class=\'right desc\'><span class=\'date-and-time\' title=\'" + message.date + "\'>(" + message.datetime + ")</span></span>";\n' +
         '               if (message.userId == -10) {\n' +
         '                  html += "<span class=\'msg\'><span style=\'color:" + message.msgColor + "\'><strong> " + message.msg + "</strong></span></span>"\n' +
         '               } else {\n' +
         '                  html +=\n' +
         '                     "<span class=\'user-msg\'>";\n' +
         '                        if (this.avatar) {\n' +
         '                           html += "   <span class=\'cb-avatar\'><img src=\'" + message.user.avatar + "\' /></span>";\n' +
         '                        }\n' +
         '                     html +=\n' +
         '                        "<span class=\'user\' style=\'color:" + message.user.color + "\'>" +\n' +
         '                           "<strong> " + (message.user.admin ? "@ " : "") +\n' +
         '                              "<span class=\'chatbox-username chatbox-message-username\' data-user=\'" + message.userId + "\' >" + message.username + "</span>&nbsp;:&nbsp;" +\n' +
         '                           "</strong>" +\n' +
         '                        "</span>" +\n' +
         '                        "<span class=\'msg\'>" + message.msg + "</span>" +\n' +
         '                     "</span>";\n' +
         '               }\n' +
         '               html += "</p>";\n' +
         '               cb_content += html;\n' +
         '            }\n' +
         '            $("#chatbox").append(cb_content);\n' +
         '            if (scroll) {\n' +
         '               $("#chatbox")[0].scrollTop = $("#chatbox").prop("scrollHeight") * 2\n' +
         '            }\n' +
         '         }\n' +
         '      }\n' +
         '   }\n' +
         '};';
      oIframe.document.getElementsByTagName("head")[0].appendChild(script);
   });
}


So long,

JS

Thank you very much @JScript its solved.