duplicating a chatbox using jquery and ajax -

duplicating a chatbox using jquery and ajax -

i'm trying create programme when user clicked name list of friends, chat box pop up, , want chat box many user clicked. problem is, can create single chatbox, how able create multiple chatbox , have unique id of it?

here html , php:

chat lists:

<id = "chat_lists"> //my friend names goes here. //you can ignore codes, i'll set people want see what's happening. //selects friends of user if($run_query = mysqli_query($con,$query_select)) { while($row = mysqli_fetch_assoc($run_query)) { $chat_name = $row['full_name']; $seen = $row['seen']; $user_id = $row['users_id']; if($seen == 'online') { $color = "green"; } else { $color = "gray"; } if($user_id !=$get_user) { echo "<div id = $user_id class = 'chat_div'><a class = 'chat_name'>".$chat_name."</a>"."<a class = 'seen' style = 'color:$color'>".$seen."</a></div>".'<br/>'; } } } </div>

chat box:

<div id = "chat_box"> <div id = "header"><a id = "close"><i class="fa fa-close"></i></a></div> <div id = "message_area"> <ul id = "updated_text"> </ul> </div> <div id = "bottom"> <textarea id="textarea" name = "message" placeholder="send message.."></textarea> <input type = "submit" value = "send" id = "send_button"> </div> </div>

jquery , ajax:

$('.chat_div').click(function(){ var id = $(this).attr('id'); // gets id of selected user $('#chat_box').show(); // shows chat box $('#updated_text').text(''); //clears info $.ajax({ url: 'plugins/get_chatmate_id.php', data: {id:id}, success: function(data) { var d = $('#message_area'); d.scrolltop(d.prop("scrollheight")); // scrolls downwards div } }); });

here go: jsfiddle of course, simple solution, hope, help you. every time, when new chatbox open, incrase value of openedcheckboxes hidden value. can utilize global variable also. can positioning chatboxes. add together them position: absolute , based on opened checkboxes, can calculate position of them.

the html

<ul> <li><a href="#" class="chat_friend" data-id="1">friend 1</a></li> <li><a href="#" class="chat_friend" data-id="2">friend 2</a></li> <li><a href="#" class="chat_friend" data-id="287">friend 287</a></li> </ul> <input type="hidden" name="openedchatboxes" value="0" /> <div class="chatboxholder"></div>

the css:

<style> div.chatbox {width: 150px; height: 300px; border: 1px solid #f00;} </style>

and jquery:

<script type="text/javascript"> $(function() { $('.chat_friend').click(function(e) { e.preventdefault(); var userid = $(this).data('id'); var divtoshow = '<div class="chatbox" data-id="chat_box_' + userid + '" id="chat_box_' + userid + '"><div>your chat box code here user '+ userid + '</div><div><a href="#" class="close">close</a></div></div>'; $('.chatboxholder').append(divtoshow); /* * here can want ajax $.ajax({ url: 'plugins/get_chatmate_id.php', data: {id: userid}, success: function(data) { //$('#chat_box_' + userid); //at here, can access chat_box this, remember, live element, utilize 'on' function manilulate var d = $('#message_area'); d.scrolltop(d.prop("scrollheight")); // scrolls downwards div } }); */ }); $('.chatboxholder').on('click', '.close', function() { $(this).closest('.chatbox').remove(); }); }) </script>

jquery ajax