I have a table in my HTML that contains names, and I want to implement a feature where clicking on a name will trigger an 'Alert' popup with additional details about the person. To achieve this, I am planning to use XMLHttpRequest to send the name to a PHP file for processing. While I can successfully retrieve the name from the table, I am facing issues with triggering the XMLHttpRequest using the onreadystatechange method. Here is the code snippet responsible for fetching the name:
function getDetails(x){
var tr1 = x.parentNode.rowIndex;
var td1 = x.cellIndex;
var table = document.getElementById("selectedTeams");
player = table.rows[tr1].cells[td1].innerHTML;
player = player.replace("<b>", "");
player = player.replace("</b>", "")
player = player.trim();
getName(player);
}
The above function effectively retrieves the player's name. However, upon passing it to the getName() function, I observed that the onreadystatechange is not triggered as expected. Are there any better methods to accomplish this task, or do I need to make corrections in the existing code? Here is the implementation of the getName() function:
function getName(str){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200){
alert(this.responseText);
}
xmlhttp.open("GET", "playerDetails.php?q= " + str, true);
xmlhttp.send();
}
}