CODEWITHSUNDEEP
javascript
TheDoc
TheDoc

Reputation: 151

Javascript tags being ignored?

I am trying to refresh the new messages in my website thing (it's a messaging system) and when I put the javascript in the console (browser dev tool) it works fine. But when I put it in my file, not only does it not get called, the setInterval function doesn't do anything. Here is my code:

    <script type="text/javascript">
    function load_messages(){
      var id = document.getElementById('group_id').value;
      var fullurl = "loadmessages.php?id=" + id;
        var request = new XMLHttpRequest();
        request.open("GET",fullurl,false);
        request.onload = function(){
            if(request.status == 200){
                document.getElementById("groupchat").innerHTML = this.responseText;
            }
        }
        request.send();
    };
    setInterval(load_messages(), 3000);
    </script>

The script's home page :

<style>
@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@200&display=swap');
</style>
<?php session_start();
      include_once "../backend/messaging-functions.php";
      foreach (showGroupMembers($_GET['id']) as $auserId) {
        $userid = $auserId['user_id'];
        if ($_SESSION['user-id'] == $userid) {
?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div class="group-chat" id="groupchat" style=" height: calc(100vh - 175px); position: fixed; overflow:scroll; top:100px; background-color: rgb(47, 49, 54); margin-bottom: 75px;   transition: all 0.3s ease-in-out;">
      <?php

            $sender = "";
            $date = "";
            $pp = "";
            $yearmonthday = "";
              foreach (getMessages($_SESSION['user-id'], $_GET['id']) as $message) {
                foreach (transformIdToUsername($message['user_id']) as $usernames) {
                $username = $usernames['username'];
                foreach (findUserAvatar($message['user_id']) as $avatarr) {
                  $avatara = $avatarr['avatar'];
                }
                }
                if ($message['filetype'] == "text") {
                  $year = date_create("{$message['date_time']}");
                  $yearr = date_format($year, "Y-m-d");
                  if ($yearr == $yearmonthday) {
                    $pe = date_create("{$message['date_time']}");
                    $pee = date_format($pe, "h:i a");
                    if ($username == $sender && $pee == $date) {
                      echo "<p style='margin-left: 5px; font-size:15px; float: left; line-height:17px; width:100%; color: #c1c1c1; white-space: normal;'>{$message['message']}</p>";
                      $sender = $username;
                      $yearmonthday = $yearr;
                    } else {
                      $pp = date_create("{$message['date_time']}");
                      $newdate = date_format($pp, "h:i a");
                      echo "<img src='$avatara' width='25px' height='25px' style='float: left;'><h1 style='margin-left: 5px; font-size:15px; color: #c1c1c1; margin-top: 5px;line-height:15px; float: left;'>{$username} </h1><h2 style='margin-top: 5px;margin-left: 5px; color: #c1c1c1; font-size: 15px;line-height: 17.5px; float: left;' >{$newdate}</h2>
                      <p style='margin-left: 5px; font-size:15px;  float: left;line-height:17px; width:100%; color: #c1c1c1; white-space: normal;'>{$message['message']}</p>";
                      $sender = $username;
                      $date = $newdate;
                      $yearmonthday = $yearr;
                    }
                  } else {
                    $bruh = date("M jS, Y", strtotime("$yearr"));
                    echo "<br><p style='color: white; font-size: 20px; font-family: arial; float:left; width: 100%;'>$bruh</p><br>";
                    $pe = date_create("{$message['date_time']}");
                    $pee = date_format($pe, "h:i a");
                      $sender = $username;
                      $pp = date_create("{$message['date_time']}");
                      $newdate = date_format($pp, "h:i a");
                      echo "<img src='$avatara' width='25px' height='25px' style='float: left;'><h1 style='margin-top: 5px; margin-left: 5px; font-size:15px; color: #c1c1c1; line-height:15px; float: left;'>{$username} </h1><h2 style='margin-top: 5px; margin-left: 5px; color: #c1c1c1; font-size: 15px;float: left;line-height: 17.5px;' >{$newdate}</h2>
                      <p style='margin-left: 5px; font-size:15px; line-height:17px;  float: left;width:100%; color: #c1c1c1; white-space: normal;'>{$message['message']}</p>";
                      $sender = $username;
                      $date = $newdate;
                      $yearmonthday = $yearr;
                  }
                }
             }

       ?>
    </div>
    <?php
      echo "<a href='settings.php?id=" . $_GET['id']. "'target= '_blank' style='background-image: url(../images/settings.png); background-position: center; background-repeat: no-repeat; height: 50px; width: 50px; position: fixed; top: 25px; right: 25px; z-index: 100;'></a>";
     ?>
    <div id="message_area" class="group-chat" onKeyPress="return detect_message(event)">
      <input type="text" id="message_input" name="message" placeholder="Send a message">
      <input type="hidden" id="group_id" name="group_id" value="<?php echo "{$_GET['id']}";?>">
    </div>
    <script type="text/javascript">
    function load_messages(){
      var id = document.getElementById('group_id').value;
      var fullurl = "loadmessages.php?id=" + id;
        var request = new XMLHttpRequest();
        request.open("GET",fullurl,false);
        request.onload = function(){
            if(request.status == 200){
                document.getElementById("groupchat").innerHTML = this.responseText;
            }
        }
        request.send();
    };
    setInterval(load_messages(), 3000);
    </script>
  </body>
</html>
<?php

} else {
  echo "You ain't a member of this group!";
}
}



 ?>

Upvotes: 0

Views: 67

Answers (2)

Dragas
Dragas

Reputation: 1311

setInterval accepts a function, not a result of a function. In setInterval(refreshMessages(), 1000) you invoke refreshMessages and pass that result as if it was a function.

Upvotes: 0

Alberto
Alberto

Reputation: 12919

To setInterval you have to pass a callback, not the result of your function (since it doesn't return a callback), so instead of

setInterval(load_messages(), 3000);

you need

setInterval(load_messages, 3000);

Upvotes: 3

Related Questions