Difficult Jquery <div> question, need expert advice

Question

Hey guys, I have a bit of a weird problem. I have a jquery script that basically prepends messages from data in a php script in descending chronological order one by one so that latest messages are on the top. What I want to do is somehow put a div container around two or more these messages as they come out so I decided to check which message is oldest and prepend that message with a tag and the newest message with the tag since each message comes out one by one. This however has not worked because the div does not seem to detect the enclosure and only partially encloses the 2 test messages (only the first one is enclosed). If anyone has any recommendations on how to accomplish this I would love to hear them.

     function prepare(response) {
          count++;

//function in another doc
nicetime = handleDate(response.timestamp);

if (response.replydiv=='start'){
    var list_name='<div id="chunk">start';
}
else{
    var list_name='';
}
  if (response.creator!==''){
        var list_name=list_name+'<li class="message-list-creator" id="list-'+count+'">'
    }
    else{
        var list_name=list_name+'<li class="message-list" id="list-'+count+'">'
    }




            var string = ''+list_name+''

              + '<span class="message-list-nick"><a href="statistics.php?user='+response.user+'">'+response.user+'</a></span>'
              + ' <span class="date" id='+response.timestamp+'>'+nicetime+'</span><br>'
              + '<span class="msg">'+response.message+'</span>'
              + '<span class="clear"></span>'
              if(response.reply!='null'){
               var string = string +'<a message_id="'+response.reply_chunk_id+'" id="reply">reply</a></li>';
              }
              else {
                 var string=string+'</li>';
              }


              if (response.replydiv=='end'){
            var string=string +'</div>end';
        }

          return string;
        }

$.getJSON(files+"message.php?action=view&load=initial&topic_id="+topic_id+"&username="+username+"&t=" + (new Date()), function(json) {  
            if(json.length) {
              for(i=0; i < json.length; i++) {
                  json.sort(function(a,b) { return parseFloat(a.timestamp) - parseFloat(b.timestamp) } );
                $('#message-list').prepend(prepare(json[i]));
                $('#list-' + count).fadeIn(1500);
              }

            }

          });

Answer 1

You have a stray (and unmatched) </li> in there probably throwing your markup off, at this part:

+'</li>';

Also when you call .prepend() with the first unclosed <div> you'll have issues...it's not just adding HTML it's making DOM elements, so you need to get your entire HTML string together then .prepend() it at once.

You can optimize this much further, but the basic fixed version would be something like this:

function prepare(response) {
  count++;
  //function in another doc
  var nicetime = handleDate(response.timestamp), string="";

  if (response.div=='start'){
    string = '<div id="chunk">start div';
  }

  string += list_name;
  string += '<span class="message-list-nick">'+response.message+'</span>';

  if (response.div=='end'){
   string += '</div>end div';
  }
  return string;
}

And the ajax call:

$.getJSON(files+"script.php?action=view&load=initial&topic_id="+topic_id+"&username="+username+"&t=" + (new Date()), function(json) { 
  var output = "";
  for(i=0; i < json.length; i++) {
    json.sort(function(a,b) { return parseFloat(a.timestamp) - parseFloat(b.timestamp) } );

     output += prepare(json[i]);
     $('#list-' + count).fadeIn(1500);
  }
  $('#messagelist').prepend(output);
});

The important difference here is that we're not appending to the DOM until the string's complete...jQuery will complete the elements immediately (or attempt to) when calling .prepend() the first time.