How to call php function when select option changes? Is my designed flawed?-CodePudding

I'm trying to create a simple web chat between users and admins. My idea was to create a php object ChatRoom. Users will have a ChatRoom object, instantiated with their user id, which will load up their previous chats (stored in files on the server). However, I want admins to be able to switch from one chat to another, using the ChatRoom object.

So I created a ChatRoom object, that has a 'load' function, that will go get the users file via an AJAX call to load previous chat, and start a timer interval, to refresh the ChatRoom object every x seconds. This part is working.

Now I started the admin part, and this is where things get tricky. Admins have a list of chats (one for each user) in a 'select' tag, and one instance of the ChatRoom created. Each option of the 'select' has a value corresponding to the user in question.

Now, I want that when I click on a user in the 'select', it calls the 'load' function of my ChatRoom object, and passes the value of the selected user to the load function, to load the logs of the chat with that specific user.

My problem is: how could I detect the change of 'select', get the newly selected value, and call the 'load' function of my ChatRoom object?

My admin page looks like that:

<!DOCTYPE html>
<html>
<head></head>
<body>
  <?php
  // initialize
  if(!isset($_SESSION)) { session_start(); }

  $_SESSION['author'] = 'admin';

  // mysql connection
  require_once('db_connection.php');
  $db_object = new dbConnection;
  $db = $db_object->connect();
  ?>

  <select id="chatlist" name="chatlist" size=20 style="width:15em; display:inline-block;">
  <?php
    // prepare select statement
    $sql = "SELECT userid,chatid FROM chats";

    // bind variables to prepared statement as parameters
    if($stmt = $db->prepare($sql)){

       /* execute statement */
       $stmt->execute();

       /* bind results */
       $stmt->bind_result($userid, $chatid);

       /* fetch values */
       while($stmt->fetch()){
             echo '<option value="'.$chatid.'">'.$userid.'</option>';
       }

      /* close statement */
      $stmt->close();
    }
    ?>
  </select>
  <div id="chatcontent" style="display:inline-block; padding-left: 1em; vertical-align:top;">
    <?php

      require_once('classes/ChatRoom.php');
      $chat = new ChatRoom;
      $chat->load(????????); // Here I want to pass the value of the selected option
     ?>
  </div>
</body>
</html>

As you can see in the code, I make a lookup in mysql between the userid and a chatid, but it's not important here.

Here, the load function is working, I tested it. All I need to know, is how to pass it the right parameter.

I'm not sure how to do that. Is my design flawed?

Thank you.

Edit: Here is the content of the load function

class ChatRoom{

...

  function load($userid){
    $this->setUserId($userid);
    $this->loadHtml();
  }

  function loadHtml(){
    echo '<div id="chatContainer" style="flex-direction: column">';
    echo '  <div id="chat" style="width:100%">';
    if (isset($this->chatid)){
      $this->filename = "logs/".$this->chatid.".html";
      if(file_exists($this->filename) && filesize($this->filename) > 0){
        $contents = file_get_contents($this->filename);
        echo $contents;
      }
    }
    echo '  </div>';
    echo '  <div id="inputContainer" style="flex-direction: row">';
    echo '    <input id="message-box" style="width:80%"><button id="send-button" style="width:10%">Send</button>';
    echo '  </div>';
    echo '</div>';
    echo '<script type="text/javascript">setInterval(loadLog, 2500,"'.$this->filename.'");</script>';
  }
}

Where loadLog is:

function loadLog(page) {
  var oldscrollHeight = $("#chat")[0].scrollHeight - 20; //Scroll height before the request

  $.ajax({
    url: page,
    cache: false,
    success: function (html) {
      $("#chat").html(html); //Insert chat log into the #chatbox div

      //Auto-scroll
      var newscrollHeight = $("#chat")[0].scrollHeight - 20; //Scroll height after the request
      if(newscrollHeight > oldscrollHeight){
        $("#chat").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
      }
    }
  });

CodePudding user response：

inner body and after your content...

<script>
let sel = document.getElementById('chatlist');
sel.addEventListener ("change", function () {
   // your ajaxcall goes here
   let selection = this.value; // selection contains the selected user id

});
</script>

CodePudding user response：

This is a way, your chat class ...

class ChatRoom{

...

  function load($userid){
    $this->setUserId($userid);
    $this->loadHtml();
  }

  function loadHtml(){
    echo '<div id="chatContainer" style="flex-direction: column">';
    echo '  <div id="chat" style="width:100%">';
    if (isset($this->chatid)){
      $this->filename = "logs/".$this->chatid.".html";
      if(file_exists($this->filename) && filesize($this->filename) > 0){
        $contents = file_get_contents($this->filename);
        echo $contents;
      }
    }
    echo '  </div>';
    echo '  <div id="inputContainer" style="flex-direction: row">';
    // Add a hidden field for the id
    echo '    <input id="chat" type="hidden" value="logs/'.$this->chatid.'.html">';
    echo '    <input id="message-box" style="width:80%"><button id="send-button" style="width:10%">Send</button>';

    echo '  </div>';
    echo '</div>';
    echo '<script type="text/javascript">setInterval(loadLog, 2500, document.querySelector("#chat").value);</script>';
  }
}

and my Code ...

<script>
let sel = document.getElementById('chatlist');
sel.addEventListener ("change", function () {
   // your ajaxcall goes here
   let selection = this.value; // selection contains the selected user id
   // update the value of the hidden inputfield with the selection
   document.querySelector("#chat").value = "logs/" selection ".html";
});
</script>