the onreadystatechange function is not being triggered

Question

the onreadystatechange function is not being triggered

When trying to call the show_Message function, I expected an alert box to appear. However, the onreadystatechange is not working as expected. All other alert boxes are functioning properly.

Below is my JavaScript function:

 function send_Message(){
  var msg=document.getElementById("msg").value;
if(msg.length===0||msg===""){
    alert("please enter some message");
    return;
}

var sender=document.getElementById("username").value;
var sendto=document.getElementById("chat_id").options[document.getElementById("chat_id").selectedIndex].value;
alert(sender+" "+sendto);
var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function(){
    alert('hello');
    if(xhttp.readyState==4 && xhttp.status==200){
        document.getElementById("chat_logs").innerHTML=xhttp.responseText;
    }
    xhttp.open('GET','send_messages.php?sender='+sender+'&sendto='+sendto+'&message='+msg,true);
    xhttp.send(null);
}
 }

javascript ajax

Answer 1

Answer №1

xhttp.open('GET','send_messages.php?sender='+sender+'sendto='+sendto+'message='+msg,true);
 xhttp.send(null);

Make sure to place it outside of the onreadystatechange function.

Here is the updated version:

function sendMessage(){
  var message=document.getElementById("message").value;
if(message.length===0||message===""){
    alert("Please enter a message before sending.");
    return;
}

var sender=document.getElementById("username").value;
var recipient=document.getElementById("recipient_id").options[document.getElementById("recipient_id").selectedIndex].value;
alert(sender+" "+recipient);
var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function(){
    alert('Request completed');
    if(xhttp.readyState==4 && xhttp.status==200){
        document.getElementById("chat_history").innerHTML=xhttp.responseText;
    }
}
xhttp.open('GET','send_message.php?sender='+sender+'&recipient='+recipient+'&message='+message,true);
    xhttp.send(null);
 }

Answer 2

xhttp.open('GET','send_messages.php?sender='+sender+'sendto='+sendto+'message='+msg,true);
 xhttp.send(null);

Make sure to place it outside of the onreadystatechange function.

Here is the updated version:

function sendMessage(){
  var message=document.getElementById("message").value;
if(message.length===0||message===""){
    alert("Please enter a message before sending.");
    return;
}

var sender=document.getElementById("username").value;
var recipient=document.getElementById("recipient_id").options[document.getElementById("recipient_id").selectedIndex].value;
alert(sender+" "+recipient);
var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function(){
    alert('Request completed');
    if(xhttp.readyState==4 && xhttp.status==200){
        document.getElementById("chat_history").innerHTML=xhttp.responseText;
    }
}
xhttp.open('GET','send_message.php?sender='+sender+'&recipient='+recipient+'&message='+message,true);
    xhttp.send(null);
 }

Answer 3

Answer №2

You made an error in closing the code block. xhttp.onreadystatechange=function(){

The above function should be closed after the if statement.

See the corrected code below:

function send_Message(){
  var msg=document.getElementById("msg").value;
if(msg.length===0||msg===""){
    alert("please enter some message");
    return;
}

var sender=document.getElementById("username").value;
var sendto=document.getElementById("chat_id").options[document.getElementById("chat_id").selectedIndex].value;
alert(sender+" "+sendto);
var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function(){
    alert('hello');
    if(xhttp.readyState==4 && xhttp.status==200){
        document.getElementById("chat_logs").innerHTML=xhttp.responseText;
    }
}; 
    xhttp.open('GET','send_messages.php?sender='+sender+'sendto='+sendto+'message='+msg,true);
    xhttp.send(null);

 }

Answer 4

You made an error in closing the code block. xhttp.onreadystatechange=function(){

The above function should be closed after the if statement.

See the corrected code below:

function send_Message(){
  var msg=document.getElementById("msg").value;
if(msg.length===0||msg===""){
    alert("please enter some message");
    return;
}

var sender=document.getElementById("username").value;
var sendto=document.getElementById("chat_id").options[document.getElementById("chat_id").selectedIndex].value;
alert(sender+" "+sendto);
var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function(){
    alert('hello');
    if(xhttp.readyState==4 && xhttp.status==200){
        document.getElementById("chat_logs").innerHTML=xhttp.responseText;
    }
}; 
    xhttp.open('GET','send_messages.php?sender='+sender+'sendto='+sendto+'message='+msg,true);
    xhttp.send(null);

 }

Answer 5

Answer №3

Perhaps the issue lies in having your open and send functions nested within the onstatechange function.

function sendMessage(){
  var message = document.getElementById("message").value;
  if (message.length === 0 || message === "") {
    alert("Please enter a message");
    return;
  }

  var sender = document.getElementById("sender").value;
  var recipient = document.getElementById("recipient_id").options[document.getElementById("recipient_id").selectedIndex].value;
  
  alert(sender + " " + recipient);

  var request = new XMLHttpRequest();
  request.onreadystatechange = function() {
    alert('Hello');
    if (request.readyState == 4 && request.status == 200) {
      document.getElementById("chat_history").innerHTML = request.responseText;
    }
  }

  request.open('GET', 'send_message.php?sender=' + sender + '&recipient=' + recipient + '&message=' + message, true);
  request.send(null);
}

Answer 6

Perhaps the issue lies in having your open and send functions nested within the onstatechange function.

function sendMessage(){
  var message = document.getElementById("message").value;
  if (message.length === 0 || message === "") {
    alert("Please enter a message");
    return;
  }

  var sender = document.getElementById("sender").value;
  var recipient = document.getElementById("recipient_id").options[document.getElementById("recipient_id").selectedIndex].value;
  
  alert(sender + " " + recipient);

  var request = new XMLHttpRequest();
  request.onreadystatechange = function() {
    alert('Hello');
    if (request.readyState == 4 && request.status == 200) {
      document.getElementById("chat_history").innerHTML = request.responseText;
    }
  }

  request.open('GET', 'send_message.php?sender=' + sender + '&recipient=' + recipient + '&message=' + message, true);
  request.send(null);
}

the onreadystatechange function is not being triggered

Answer №1

Answer №2

Answer №3

Similar questions

In Google Chrome, the edges of hexagons appear jagged and not smooth

Utilize pg-promise for inserting data with customized formatting using the placeholders :name and :

Issues with sending parameters in JQuery Ajax POST request

If the visitor navigated from a different page within the site, then take one course of action; otherwise

What is the best way to target an HTML attribute using jQuery?

Secure your messages with PHP encryption and decrypt them with JavaScript

JavaScript - Utilizing an image file in relation to a URL pathway

Sending the slider value from a website to a program when the slider is adjusted

Error: Attempting to assign a value to the non-existent property 'user' <br> at [file path] on sqlite3

Tips for avoiding redundant AJAX requests

The error message "node Unable to iterate over property 'forEach' because it is undefined" appeared

The accordion feature fails to function properly when incorporated into an ajax response

Using jQuery sortable with the overflow property set to hidden to sort items between two lists

Guide to refreshing extensive dataset using MySQL migration scripts

Apply Jquery to add emphasis to every item on the list

The 'fetch' operation could not be completed on the current window due to a TypeError

Phase 2 "Loading" visual backdrop

Tips for sending an array with all its elements from jQuery to PHP

Looking to retrieve the full browser URL in Next.js using getServerSideProps? Here's how to do

Enhancing the security of various components by utilizing secure HTTP-only cookies