дублирование чата с помощью jquery и ajax

Question

Я пытаюсь создать программу, когда пользователь щелкнет имя из списка своих друзей, появится окно чата, и я хочу, чтобы в моем окне чата было столько же, сколько пользователя, которого он нажал. однако моя проблема в том, что я могу сделать только один чат, как я смогу сделать несколько чатов и иметь уникальный идентификатор?

вот мой HTML и PHP:

чат списки:

<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 и Ajax:

$('.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

Здесь вы идете: 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:

<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>