Question

I’m creating a Facebook-Like chat. It gets the latest messages “Not Read” from a JSON file and it appends the text to an “UL” element vía “LI” into a box. If the box doesn’t exist, it creates and attach the text. I want that when I click that div, it hides using margin-bottom negative, and when I click it again it shows by Margin-Bottom:0. Please help me since it’s just not working.
What happens is that when I click on the box, it just doesn’t show/hide like it’s supposed to.

    function showChat(id){
    $(this).animate({marginBottom : "0"}).removeClass("hidden_box").addClass("active_box").removeAttr('onclick').click(function(){
           hideChat(Id);
        });

    }
    function hideChat(id){
    $(this).animate({marginBottom : "-270px"}).removeClass("active_box").addClass("hidden_box").click(function(){
           showChat(Id);
        });

    }

    function getOnJSON(){

    var from;var to;var msg_id;var msg_txt;var new_chat_string;

    //Getting the data from the json file
    $.getJSON("/ajax/chat.json.php",function(data){

    $.each(data.notif, function(i,data){

    from = data.from;to = data.to;msg_id = data.id;msg_txt = data.text;

            if ($("#chat_"+from+"_lp").length === 0){
           new_chat_string = '<div id="chat_'+from+'_lp" class="chat_box hidden_box clickable_box"><div id="'chat_+from+'_nick" class="chat_name">'+from+'</div><ul id="chat_'+from+'_txt" class="chat_txt"><li id="' + msg_id + '">'+ msg_txt+'</li></ul></div>';
            $("#boxes").append(new_chat_string);    
            $('#chat_'+from+'_lp').click(function() {showChat(this);});

        }else{

            $("#chat_"+from+"_txt").append('<li id="' + msg_id + '">'+ msg_txt+'</li>');
            $('#chat_'+from+'_lp').click(function() {showChat(this);});
        }
    });
});
}

Answer 1

The change has been made in the getOnJSON function and the calls to shoqwChat

function showChat(id){
    $(this).animate({marginBottom : "0"}).removeClass("hidden_box").addClass("active_box").removeAttr('onclick').click(function(){
           hideChat(Id);
        });

    }
    function hideChat(id){
    $(this).animate({marginBottom : "-270px"}).removeClass("active_box").addClass("hidden_box").click(function(){
           showChat(Id);
        });

    }

    function getOnJSON(){

    var self = this;     // Added this line, as this changes scope in each()
    var from;var to;var msg_id;var msg_txt;var new_chat_string;

    //Getting the data from the json file
    $.getJSON("/ajax/chat.json.php",function(data){

    $.each(data.notif, function(i,data){

    from = data.from;to = data.to;msg_id = data.id;msg_txt = data.text;

            if ($("#chat_"+from+"_lp").length === 0){
           new_chat_string = '<div id="chat_'+from+'_lp" class="chat_box hidden_box clickable_box"><div id="'chat_+from+'_nick" class="chat_name">'+from+'</div><ul id="chat_'+from+'_txt" class="chat_txt"><li id="' + msg_id + '">'+ msg_txt+'</li></ul></div>';
            $("#boxes").append(new_chat_string);    
            $('#chat_'+from+'_lp').click(function() {showChat(self);});

        }else{

            $("#chat_"+from+"_txt").append('<li id="' + msg_id + '">'+ msg_txt+'</li>');
            $('#chat_'+from+'_lp').click(function() {showChat(self);});
        }
    });
});
}