Append/Prepend Malfunctions
I am creating a small, dynamic chat widget using the Pusher App service. Below I have posted the code that initializes separate tabs for different chat "Channels," but I'm having issues in a couple different places.
- var channels = new Array( 'global', 'local', 'help' );
-
- for( var i = 0; i < channels.length; i++ )
- {
- var chat_log = $('#tab_chat .ui-widget-content').prepend('<div id="ui-chat-tabs-' + 2 * i + '"><div class="chatroom" id="' + channels[ i ] + '"></div></div>').find('.chatroom');
- $('#chat').tabs("add", "#ui-chat-tabs-" + 2 * i, channels[ i ].charAt( 0 ).toUpperCase() + channels[ i ].slice( 1 ));
- chat.bind(channels[ i ], function( data )
- {
- var ele = '<br /><span class="time">' + data.time + ': </span><span class="message">' + data.message + '</span>';
- chat_log.append(ele);
- });
- }
First off, the prepend in the loop acting on the '#tab_chat .ui-widget-content' element is not working correctly. While it should be adding the specified HTML to the top of the #chat>#tab_chat>.ui-widget-content element, it is instead prepending the HTML to the #chat element, effectively making it an "uncle" (i.e. the parent's sibiling) to the .ui-widget-content element. What's more interesting is that if I run the prepend function as coded (with variable substitutions, of course) in firebug, it works as it should!
My second problem has to do with the chat.bind function. This function is from the Pusher API, and is an initialization function that attaches the provided function as a callback to the reception of a message. This is all well and good and functions as it should, as I have seen by calling console.log(ele); right before line 11. However, regardless of the fact that the function is firing correctly, the chat_log.append(ele) function call does not seem to be working at all. The specified HTML is not appended anywhere in the DOM, let alone in the location specified. Yet at the same time, no errors are being thrown, and the script reaches the end of its execution with no reported problems.
If you would like to see the code in action for yourself, a live version can be found at http://kanoa.elementalsouls.com/
Thank you in advance for your help, and let me know if I can do anything to clarify my questions :)