打开类似于Twitter的div onclick

Question

I am stuck here and really could use some help. I am trying to create something similar to twitter now i am stuck at the part of when click on message get replies to this message. This is what i have done till now any help please

This function to get the last reply for this message.

function getlastReply()
{
   var reply_id;
var msg_id = $("#flag").val();
$.ajax({ 
    type: "post",
    url: "includes/getLastReplyID.php",
    data: "MsgID="+msg_id,
    success: function(reply_id)
    {
      $("#last_reply_id").val(reply_id);
    }
  });
 }

This function to get the replies and add it to a div

function getReplies(msg_id)
 {

//when clicked show another div 
    var getID   =  msg_id;

    var this_reply = $("#last_reply_id").val();

    /// check if div is already open
    var flag = $('#flag').val();

    // check the flag of msg id, if equal, close it, and set flag to zero 
    if(flag == getID) // hide it
    {
        $('#content2').css("z-index","-1");
        $('#content2').animate( {
          left: '250px',
        },250);

        // set flag to 0
        $('#flag').val(0);
    }
    else // show it
    {

        // check if another msg is opened , if yes, close it first
        if(flag > 0) // hide it
        {
            $('#content2').css("z-index","-1");
            $('#content2').animate( {
              left: '250px',
            },250);
        }
        // end of check if another msg is opened , if yes, close it first


        $('#content2').show();
        $('#content2').animate( {
          left: '730px',
        },250, function() {
            $('#content2').css("z-index","1");
        });

  $.ajax({
  type: "post",
  url: "includes/getReplies.php",
  data: "Msg_ID="+msg_id+"&reply_id="+this_reply,
  dataType: "xml",
  success: function(data)
  {
     $(data).find("message").each(function() {
     var msg_id = $(this).find("msg_id").text();
     var user_id = $(this).find("user_id").text();
     var msg = $(this).find("msg").text();
     var time = $(this).find("date_time").text(); 
     var user_name = $(this).find("user_name").text(); 

     var html  = '<div media="true" class="stream-item " html -item-type="tweet" id="'+msg_id+'">';
     html  += '<div class="more" onclick="getReplies('+msg_id+')">»</div>';
     html  += '<input type="hidden" value=></input>';
     html  += '<div class="stream-item-content tweet stream-tweet " html -user-id="1921671">';
     html  += '<div class="tweet-content">';
     html  += '<div class="tweet-row">';
     html  += '<span class="tweet-user-name">';
     html  += '<a class="tweet-screen-name user-profile-link" html>'+user_name+'</a>';
     html  += '<span class="tweet-full-name"></span></span>';
     html  += '<div class="tweet-corner">';
     html  += '<div class="tweet-meta">';
     html  += '<span class="icons">';
     html  += '<div class="extra-icons">';
     html  += '<span class="inlinemedia-icons"></span>';
     html  += '</div>';  
     html  += '</span>';
     html  += '</div>';
     html  += '</div>';
     html  += '<div class="tweet-row">'+msg+'</div>';
     html  += '<div class="tweet-row">';
     html  += '<a class="tweet-timestamp" title='+time+'><span class="_timestamp" html -time="1302776815000" html -long-form="true">'+time+'</span></a>';
     html  += '<span>';
     html  += '</span>';
     html  += '<span >';
     html  += '</span><b> Msg ID '+msg_id+'</b>';
     html  += '</div><div class="tweet-row">';          
     html  += '</div>';
     html  += '</div>';
     html  += '</div>';
     $("#reply_msg_div").prepend(html);
     $("#last_reply_id").val(0);
     $("#this_msg").val(0);
    });
  }
});
        // set flag to msg id
        $('#flag').val(getID);
    }

Now the problem is that when i click a message ok it gets the replies but when click on a new one it just appends the messages to old messages. So there may be something wrong i am doing i am not sure.

Thanks

Answer 1

I had a similar issue using prototype.js, where I had to clear the div before filling it, from an ajax call.

try and empty the div first:

$("#reply_msg_div").empty();
$("#reply_msg_div").prepend(html);