JQuery append closing tag before data

Question

Hi

I am creating a Adobe Air application with jQuery support. However, the recursive function that I have closes the tag first and writes the data afterwards.

My code is,

function displayTodoItems(id)
{
 id = parseInt(id)

 if(!id)
  $("#todoLists").empty();

 var list = fetchTodoItems(id);
 if(list.data == null)
  return;
 var numRecords = list.data.length;  

 for (var i=0;i<numRecords;i++)
 {  
  dateObj = new Date(list.data[i].date_created);

  time = dateObj.getFullYear()+"-"+ String("0"+dateObj.getMonth()).slice(-2)+"-"+ String("0"+dateObj.getDate()).slice(-2)+" "+  String("0"+dateObj.getHours()).slice(-2)+":"+ String("0"+dateObj.getMinutes()).slice(-2);

   $('#todoLists').append('<div id="list'+list.data[i].id+'" class="listitem '+(id?'listitem-sub':'listitem-main')+'" style="background-color: #' + list.data[i].color + ';' +(list.data[i].color/2 < 0x7FFFFF?' color: #FFF;':'')+ '">'+time+ '<br>' + unescape(list.data[i].data)+ '</div>');
  //get child items
  displayTodoItems(list.data[i].id);
  $('#todoLists').append('</div>');

 } 
}

The reply I get is,

   <div id="todoLists">
  <div id="list1" class="listitem listitem-main" style="background-color: #fff;">2010-07-07 21:01<br>
    Hello Bongo Sister</div>
  <div id="list2" class="listitem listitem-main" style="background-color: #dd9900;">2010-07-07 21:08<br>
    Umer Idiot Thinks that we are using Aptima. Not knowing that we call this Aptana</div>
  <div id="list3" class="listitem listitem-main" style="background-color: #654562; color: #FFF;">2010-07-07 21:42<br>
    asdf asdfa sdfasdf asdf </div>
  <div id="list4" class="listitem listitem-main" style="background-color: #7FFFFF;">2010-07-08 12:40<br>
    Umar is a naughty boy</div>
  <div id="list5" class="listitem listitem-sub" style="background-color: #222; color: #FFF;">2010-07-08 12:46<br>
    Hello Great Boy</div>
  <div id="list6" class="listitem listitem-sub" style="background-color: #000000; color: #FFF;">2010-07-10 20:07<br>
    Farrukh You Idjt</div>
  <div id="list7" class="listitem listitem-main" style="background-color: #FF5500;">2010-07-18 21:45<br>
    Testing new Item</div>
</div>

This is wrong, in that list5, list 6 are childs of list 4, so they should be in its div.

I am really struggling. It seems that the jquery is calling append before the recursive function. Is there a way around this.

Kind Regards,

Khuram Javaid

Answer 1

.append() is used for full elements, you can't add partial strings or just closing tags. There are many ways to go about fixing this, I'll show a minimal change version here:

function displayTodoItems(id, parent)
{
 id = parseInt(id);
 parent = parent || $("#todoLists");

 if(!id) parent.empty();

 var list = fetchTodoItems(id);
 if(list.data == null)
  return;
 var numRecords = list.data.length;  

 for (var i=0;i<numRecords;i++)
 {  
  var dateObj = new Date(list.data[i].date_created),
      time = dateObj.getFullYear()+"-"+ String("0"+dateObj.getMonth()).slice(-2)+"-"+ String("0"+dateObj.getDate()).slice(-2)+" "+  String("0"+dateObj.getHours()).slice(-2)+":"+ String("0"+dateObj.getMinutes()).slice(-2),
      elem = $('<div id="list'+list.data[i].id+'" class="listitem '+(id?'listitem-sub':'listitem-main')+'" style="background-color: #' + list.data[i].color + ';' +(list.data[i].color/2 < 0x7FFFFF?' color: #FFF;':'')+ '">'+time+ '<br>' + unescape(list.data[i].data)+ '</div>')
                .appendTo(parent);         
  displayTodoItems(list.data[i].id, elem);
 } 
}

This just passes the element you're creating as the parent parameter into the function recursively, since that's what you want to append to, and appends the child elements to that instead of #todoLists directly.