I want to display chat data in same page by clicking user name-CodePudding

I have display the user list in contact-list class with a data-id attribute containing user id, I want to click the user from contact-list and display the chat data in direct-chat-messages div, I have written the ajax code but its not displaying anything. I somebody can help me where I am going wrong.

This is the html page(I have removed the styling)

<html>
<head>
<title></title>
</head>
<body>
              <div >
            <div >
              <h3 >Direct Chat</h3>

              <div >
                <span >3</span>
                <button type="button"  data-widget="collapse"><i ></i>
                </button>
                <button type="button"  data-toggle="tooltip" title="Users" data-widget="chat-pane-toggle"><i ></i></button>
              </div>
            </div>
            <!-- /.box-header -->
            <div >
              <!-- Conversations are loaded here -->
              <div >


              </div>
              <!--/.direct-chat-messages-->

              <!-- Contacts are loaded here -->
              <div >
                <ul >

                </ul>
                <!-- /.contatcts-list -->
              </div>
              <!-- /.direct-chat-pane -->
            </div>
            <!-- /.box-body -->
            <div >
              <form action="#" method="post" >
                <div >
                  <input type="text" name="incoming_id" value="" >
                  <input type="text" name="outgoing_id" value="1" >
                  <input type="text" name="message" placeholder="Type Message ..." >
                  <span >
                        <button type="button" >Send</button>
                      </span>
                </div>
              </form>
            </div>
            <!-- /.box-footer-->
          </div>
<script src="../system/ajax/chat/chat.js"></script>
</body>
</html>

and this is the Script chat.js where I have pulled the user list data but I am stuck on onclick function, which pulls the chat record of a particular record.

 const usersList = document.querySelector(".contacts-list"),
element = document.getElementById('#user'),
dataID = $('#elementId').getAttribute('data-id'),
chatBox = document.querySelector(".direct-chat-messages");
element.onclick = ()=>{
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "../system/ajax/chat/getChat.php", true);
    xhr.onload = ()=>{
      if(xhr.readyState === XMLHttpRequest.DONE){
          if(xhr.status === 200){
            let data = xhr.response;
            console.log(data);
            //chatBox.innerHTML = data;
          }
      }
    }
    //let formData = new FormData(form);
    xhr.send(dataID);
}

setInterval(() =>{
  let xhr = new XMLHttpRequest();
  xhr.open("GET", "../system/ajax/chat/getChatUsers.php", true);
  xhr.onload = ()=>{
    if(xhr.readyState === XMLHttpRequest.DONE){
        if(xhr.status === 200){
          let data = xhr.response;
          //console.log(data);
          usersList.innerHTML = data;
          /*if(!searchBar.classList.contains("active")){
            usersList.innerHTML = data;
          }*/
        }
    }
  }
  xhr.send();
}, 500);

this is getChat.php code where I pull the chat record of particular user using data-id attribute from mysql server.

function GetChat()
{
    global $dbc;
    session_start();
    if(isset($_SESSION['username'])){
        $incoming_id = mysqli_real_escape_string($dbc, $_POST['dataId']);
        $output = "";

        $q = " SELECT * FROM chat WHERE (out_msg_id = '1' AND in_msg_id = '$incoming_id') OR (out_msg_id = '$incoming_id' AND in_msg_id = '1') ORDER BY msg_id ";  
        $r = mysqli_query($dbc, $q);
        if(mysqli_num_rows($r) > 0){
            while($row = mysqli_fetch_assoc($r)){
                if($row['out_msg_id'] === $outgoing_id){ //if this is equals to then he is a sender
                    $output .= '<div >
                                    <div >
                                        <span >You</span>
                                        <span >'.date("dM y h:ia", strtotime($row['msg_dt'])).'</span>
                                    </div> 
                                    <!--<img  src="../source/images/you3.png" alt="message user image">-->
                                    <div > '.$row['msg'].' </div>
                                </div>';
                }else{ //he is a receiver
                    $output .= '<div >
                                    <div >
                                        <span >Admin</span>
                                        <span >'.date("dM y h:ia", strtotime($row['msg_dt'])).'</span>
                                    </div>
                                    <!--<img  src="../source/images/admin3.png" alt="message user image">-->
                                    <div > '.$row['msg'].' </div>
                                </div>';
                }
            }
            echo $output;
        }

    }else{
        header('Location: ../');
    }
    exit();
}

CodePudding user response：

In case the problem may be on the client-side:

In document.getElementById('#user'), you don't need to add the hash in front of #user. Simply document.getElementById('user') will do.

Also, unless you've included the jQuery Library in your HTML (which I didn't see), change dataID = $('#elementId').getAttribute('data-id') into dataID = document.getElementById("THE ID OF THE ELEMENT YOU ARE GETTING").getAttribute('data-id').

Hope it can help.

CodePudding user response：

Replace your JS:

const usersList = document.querySelector(".contacts-list"),
element = document.getElementById('user'),
dataID = element.getAttribute('data-id'),
chatBox = document.querySelector(".direct-chat-messages");
element.onclick = ()=>{
    $.ajax({
      url:"../system/ajax/chat/getChat.php",
      cache:false,
      data:"dataId=" encodeURIComponent(dataID),
      type:"post",
      success: function(data){
          console.log(data);
          chatBox.innerHTML = data;
          //whatever you are gonna do
      }
    });
}

setInterval(()=>{
  $.ajax({
      url:"../system/ajax/chat/getChatUsers.php",
      cache:false,
      type:"get",
      success: function(data){
          console.log(data);
          usersList.innerHTML = data;
          if(!searchBar.classList.contains("active")){
            usersList.innerHTML = data;
          }
          //whatever you are gonna do
      }
    });
}, 2000);

Be careful, most of the servers will block your request when you start requests every 500ms to prevent (D)DoS.