Jquery chat window with unique id's

[gadgetster]

I managed to create the chat windows open uniquely depending on whatever user is clicked but I cannot send messages on any chat window except the first one.

 

I am trying to achieve this:

 

 

 

  

 

Is there any tutorial on how to achieve exactly that ^ ?

 

Right now the windows minimize but don't open back if I "un-minimize" it. The slide in/out only works for the first chat windows, the rest open weird fold-out from the top.

 

Here is what I have so far:  

 <script> //CHAT SYSTEM

function chatWith(id, status, username){ 

$("#chats").append('<div class="chat_window" id="chat_'+id+'"><div class="chat_top"><span class="chat_username">'+status+username+'</span><span class="chat_x"><a href="javascript:void(0)" onclick="minChat('+id+')">-</a> <a href="javascript:void(0)" onclick="closeChat('+id+')">X</a> </span> </div> <div class="chat_content"></div> <form method="post" name="chat" action=""> <textarea class="chat_text" maxlength="200" name="chat_text" id="chat_text_'+id+'" placeholder="Start typing..."></textarea> </form> </div></dv>'); 

$("#chat_"+id).slideToggle("fast");   

} 

function minChat(id){ 

$("#chat_"+id).animate({'margin-bottom':'-18em'}); 

} 

function closeChat(id){ 

$("#chat_"+id).slideToggle("fast"); 

} 

//send messages

var user_id = '<?php echo $session_user_id;?>';

var auto_refresh = setInterval(function () {

var b = $("#chat_"+user_id+":last").attr("id"); 

$.getJSON("chat.php?user_id="+user_id,function(data){

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

if(b != data.id)  { 

var div_data="<span id='"+data.id+"'>"+data.user_id+": "+data.msg+"</span>"; 

$(div_data).appendTo("#chat_"+user_id);

}

});

});

}, 2000); 

$(document).ready(function(){

$(document).keypress(function(e) {

if(e.which == 13) {

var boxval = $(".chat_text").val(); 

var user_id = '<?php echo $session_user_id;?>';

var dataString = 'user_id='+ user_id + '&msg=' + boxval;



if(boxval.length > 0) { 

$.ajax({

type: "POST",

url: "chat.php",

data: dataString,

cache: false,

success: function(html){ 

$(".chat_content").append(html);

$(".chat_text").val('');

$(".chat_text").focus();

$(".chat_content").animate({scrollTop: $(".chat_text").offset().top}, 500);

}

}); 

}

return false;

}

});

});



</script>

this is my chat.php  

      if($_POST){

     $user_id = $_POST['user_id'];

     $msg = $_POST['msg'];

     

     mysql_query("INSERT INTO chat(user_id, msg) VALUES ('$user_id', '$msg')");

    

     $chat_results = mysql_fetch_assoc(mysql_query("SELECT * FROM `users` WHERE user_id='".$user_id."' LIMIT 1"));

     

     echo '<span style="font-size:0.9em;font-weight:bold;">'.$chat_results['username'].'</span>: <span style="font-size:0.9em;">'.$msg.'</span><br>';

    }

    if($_GET['user_id']){

     $user_id=$_GET['user_id'];

     $row=mysql_fetch_array(mysql_query("SELECT * FROM chat order by id desc limit 1"));

     $user_idx = $row['user_id'];

     $id = $row['id'];

     $msg = $row['msg'];

     if($user_idx != $user_id){

     echo '{"posts": [{ "id":"'.$id.'", "user_id":"'.$user_idx.'", "msg":"'.$msg.'" },]}';

     } 

    }

and the div it all opens on:  

 <div id="chats"> 



    </div>

Will really appreciate any help, been breaking my head on this for weeks now!

[mac_gyver]

if you are trying to do this in ONE instance of one browser, the code will require a lot of work, because you only have one $session_user_id value, no matter how many windows you open in that one instance of one browser.

 

the comment about opening "demo.php ... in a different browser" means in a completely different vendor's/manufacturer's browser type.

 

if you are using the same browser vendor/manufacturer on one computer, i.e. all firefox, you are using only ONE unique session for all instances of that browser and <?php echo $session_user_id;?> is the same value for each instance of the same browser vendor/manufacturer on that one computer.

 

to do this on one computer, you must either use browsers from different vendors/manufactures so that the sessions will be separate or to use one browser vendor/manufacturer on one computer, you must localize the session id to the variation of the url where the session was created (i.e. either use separate host-names/subdomain names or different paths after the domain) and use different url's for each instance/window of the one browser. one way to accomplish this would be to add the user id in the path after the domain (you will need some url rewriting to get this to request your actual file on the server) and set the session.cookie_path for each different browser instance to match the path for the specific user id (i think if you set session.cookie_path to an empty value that it might also match just the variation of the path were it was set at. some testing would verify this.)

 

also, moving this thread to the javascript(jquery) forum section for the time being.

 

edit: ignore what i wrote, it has to do with the interaction with the server for what i thought you were doing for testing, not with the functioning of your javascript/jquery.

 

there a a number of open-source jquery ajax chat scripts like facebook/gmail that you can use or examine to determine how to do this.

Edited March 30, 2014 by mac_gyver

[gadgetster]

The open sources I found don't really do exactly what I am looking for and I wouldn't be able to use them for my business

[jazzman1]

 

Right now the windows minimize but don't open back if I "un-minimize" it.

Really? The animate function isn't part of core JS. Is this a real script, if so, I tested it and the minChat function does't work at all.

[gadgetster]

Really? The animate function isn't part of core JS. Is this a real script, if so, I tested it and the minChat function does't work at all.

It doesn move it down to where I want it but won't open back. I wrote the code myself but I am not good at jquery

[mac_gyver]

when i searched for the title - jquery ajax chat like facebook gmail, i found at least one that LOOKS exactly like the screen shot you posted - http://anantgarg.com/2009/05/13/gmail-facebook-style-jquery-chat/

[gadgetster]

when i searched for the title - jquery ajax chat like facebook gmail, i found at least one that LOOKS exactly like the screen shot you posted - http://anantgarg.com/2009/05/13/gmail-facebook-style-jquery-chat/

Clearly you didn't read my original post. I don't need a ready chat that I have to pay for license. That is why I started my own code and trying to learn too.

[jazzman1]

It doesn move it down to where I want it but won't open back. I wrote the code myself but I am not good at jquery

But, how that happened? The minChat() function is out of jquery scope. It would be much more easier for us if you provide a link to your chat app to see what actually happens.

[mac_gyver]

It doesn move it down to where I want it but won't open back. I wrote the code myself but I am not good at jquery

 

which is why someone suggested that you could -

 

there a a number of open-source jquery ajax chat scripts like facebook/gmail that you can use or examine to determine how to do this.

 

there's no better way of learning the proper usage of a language/library, like jquery, than to examine how working scripts were written using it.