Question

hey guys last final piece to my jquery/javascript chat box stopped working if i clone my chat
with javascript.

This is my javascript code to clone and change the id of a few divs.

e.g it changes the ch, chat and chatbox ids/classes.

by one for instance

<div class="chat" id="chat">
<div id="ch" class="ch">
               <h2>Chat</h2></div>
               <div class="chatbox" id="chatbox">
               <div class="messages"></div>
               <textarea id="message" class="chatinp" 
               rows="3" cols="27"></textarea>
               <button class="send">Send</button></div>
</div>

and everytime it clones it changes the id of chat,ch and chatbox but keeping the original the same

like so…

clone1

    <div class="chat" id="chat1">
    <div id="ch1" class="ch">
                   <h2>Chat</h2></div>
                   <div class="chatbox" id="chatbox1">
                   <div class="messages"></div>
                   <textarea id="message" class="chatinp" 
                   rows="3" cols="27"></textarea>
                   <button class="send">Send</button></div>

</div>

Clone2

<div class="chat" id="chat2">
<div id="ch2" class="ch">
               <h2>Chat</h2></div>
               <div class="chatbox" id="chatbox2">
               <div class="messages"></div>
               <textarea id="message" class="chatinp" 
               rows="3" cols="27"></textarea>
               <button class="send">Send</button></div>
</div>

var num = new Number();
num = 0



function chat(){
if(!document.getElementById("chat")){
var chatdiv = document.createElement('div');
  chatdiv.id = 'chat';
  chatdiv.className = 'chat';
  chatdiv.innerHTML = 
              ['<div id="ch" class="ch">',
               '<h2>Chat</h2></div>',
               '<div class="chatbox" id="chatbox">',
               '<div class="messages"></div>',
               '<textarea id="message" class="chatinp" ',
               'rows="3" cols="27"></textarea>',
               '<button class="send">Send</button></div>'
              ].join(' ')
  document.body.appendChild(chatdiv); 

} 
else 
{
var obj  = document.getElementById("chat").cloneNode(true),
      children = obj.childNodes;
  num += 1;
//change the id of the cloned element
  obj.id = obj.id+num;

  //traverse the child nodes of obj to
  //change id (call function changeId)
  if (num<16){
      changeId(children,num);
  }

  //now appending obj to the document.body should be sufficient
var p = $(".chat");
var offset = p.offset();
var left = offset.left + 261;
//now appending obj to the document.body should be sufficient
document.body.appendChild(obj);
document.getElementById("chat").style.left = left + "px";

  //demonstrate that the id value has changed
  var nwchatbox = document.getElementById('chatbox'+num)
  nwchatbox.value = 'my id = '+nwchatbox.id;

  //function to add number to id's of a nodelist (recursive)
  //used in the above 
  function changeId(nodes, n){
   for (var i=0;i<nodes.length;i=i+1){
     if (nodes[i].childNodes){
           changeId(nodes[i].childNodes,n);
     }
     //if id value is 'ch' or 'chatbox', change it
     if(nodes[i].id && /^ch$|^chatbox$/i.test(nodes[i].id)) {
      nodes[i].id += String(n);
     }
   }
  }
}
}

ok my question is how do i slideToggle a chat box individuality
and every time i clone a chat box it changes the adds a instance to the jquery so it will open up the clone?

ok you open the chat box by pressing on the “ch” id/class and it pushes the chatbox class/id up. but remember everytime i clone it, it changes the id of the “ch” div

thanks for your help

Answer 1

Right after you clone the chatbox, you need to register another click handler:
$('#ch'+num).click(clickHandler)

You need to make the clickHandler generic. So the handler would look like:

function clickHandler(e){
    var id = this.id.substring(2);
    //Now initiate sliding behavior
    $("#chatbox"+id).slideToggle(...);
}