Adding different data to different jquery tabs

Question

i have 2 functions
1- addMessage(): save data into database and is called only on click .
2-updateMessage():get data with ajax from database, called when document is ready ,called every 3 seconds for new data, and called on success of addMessage().

function updateMessage()
{   
    $.ajax({
    url:"db.php",
    type:"post",
    dataType:"text/xml",
    success:function(data)
    {
        $(data).find("message").each(function() {
         var msg_id = $(this).find("msg_id").text();
         var date_time = $(this).find("date_time").text();
         var from_user = $(this).find("from_user").text();
         var from_group = $(this).find("from_group").text();
         var to_user = $(this).find("to_user").text();
         var to_group = $(this).find("to_group").text();
         var msg_type = $(this).find("msg_type").text();
         var msg = $(this).find("msg").text();
         var grp_abr = $(this).find("grp_abr").text();

           var html = "<tr class='blue'>";
         html += "<td><a href='#' class='bullet' onclick='changeStatus(\""+msg_id+"\")'><\/a><\/td>";
         html += "<td><a href='#' class='reply' onclick='reply(\""+from_user+"\");'><\/a><\/td>";
          html += "<td>"+date_time+"<\/td>";
           html += "<td>"+from_user+"["+from_group+"]"+"<\/td>";
           html += "<td>"+to_user+"["+to_group+"]"+"<\/td>";
           html += "<td><a href='#' class="+msg_type+"><\/a><\/td>";
            html += "<td><a href='#' class='flag_msg' onclick='flagMsg("+msg_id+")'><\/a><\/td>";
            html += "<td>"+msg_id+msg+"<\/td>";
            html += "<td>"+grp_abr+"<\/td><\/tr>";
            });
        }
  });
  setTimeout('updateMessage()',3000);
}

Now the data retrieved i want to add to different tabs with different names and different containers, how would i do that. My question isn't a matter of code, it is more about logic or sequence of steps. Any help please.

Answer 1

Not sure I understand what you really want. Assuming you are asking how you can add tabs dynamically

Look into the jQuery Tabs add() method and maybe the tabTemplate and panelTemplate options.

At the end of your success function when you have constructed the new tab content append it somewhere suitable in the DOM (e.g. hidden table which holds all tabs) and the just use the add method.

If you have multiple tab-containers just call the add-method on the one you want.