jquery와 ajax를 사용하여 채팅 상자 복제하기

Question

친구 목록에서 사용자가 이름을 클릭하면 채팅 상자가 나타나고 채팅 상자를 다음과 같이 많이 만들 수있는 프로그램을 만들려고합니다. 그가 클릭 한 사용자. 그러나 내 문제는, 내가 단 하나의 대화방을 만들 수 있습니다, 어떻게 내가 여러 채팅을 만들 수 있고 그것의 독특한 ID가 무엇입니까?

채팅 목록 :

<id = "chat_lists"> 
    //my friend names goes here. 

    //you can ignore this codes, but i'll put this for 
    those people who want to see what's happening. 

    //selects all the friends of this 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> 

채팅 상자 :

<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 a message.."></textarea> 
     <input type = "submit" value = "SEND" id = "send_button"> 
     </div> 
</div> 

JQuery와 및 아약스 :

여기

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

Answer 1

당신이 가서 여기

내 HTML과 PHP입니다 : jsfiddle 물론 이것은 간단한 해결책 일 뿐이지 만 도움이 될 것입니다. 새 대화방이 열려있을 때마다 openedCheckboxes 숨김 값의 값이 커집니다. 전역 변수를 사용할 수도 있습니다. 그런 다음 채팅 상자를 배치 할 수 있습니다. 그것들을 position: absolute에 추가하고 열려있는 체크 박스를 기반으로 그 위치를 계산할 수 있습니다.

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> 

CSS의 :

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

그리고 jQuery를 :

모든 체크 박스에 대한 고유 ID 년대를 사용할 필요가

<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 with user '+ userId + '</div><div><a href="#" class="close">close</a></div></div>'; 
      $('.chatBoxHolder').append(divToShow); 
      /* 
      * Here you can do what you want with ajax 
      $.ajax({ 
      url: 'plugins/get_chatmate_id.php', 
      data: {id: userId}, 
      success: function(data) { 
      //$('#chat_box_' + userId); //At here, you can access your chat_box like this, but remember, this is a live element, so use 'on' function to manilulate 
      var d = $('#message_area'); 
      d.scrollTop(d.prop("scrollHeight")); // scrolls down the div 
      } 
      }); 
      */ 
     }); 

     $('.chatBoxHolder').on('click', '.close', function() { 
      $(this).closest('.chatBox').remove(); 
     }); 
    }) 
</script>