Parthipan Natkunam Parthipan Natkunam - 2 months ago 7
Ajax Question

DOM updation through javascript not working

I am just trying to prototype a simple functionality using javascript for learning purpose, but the contents within the

<p>
tag are not updating and I am stuck at this point. My code is as follows:



<!DOCTYPE html>
<html>
<head>
<title> Ajax Search Box </title>
<script>
function LoadList()
{
var searchBox = document.getElementById("txtSearch");
var resultBox = document.getElementById("results");
var searchedChars = "";
var xHttp = new XMLHttpRequest();
searchedChars += searchBox.value;
xHttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200)
{
var xmlContent = this.responseXML;
var nameList = xmlContent.getElementsByTagName("name");
var dispText = "";
for(var i = 0 ; i < nameList.length ; i++)
{
dispText += nameList[i].textContent + "<br/>";
}
resultBox.innerHtml = dispText;
}
};
xHttp.open("GET","AssessorList.xml",true);
xHttp.send();
}
</script>
</head>
<body>
<input id="txtSearch" type="text" placeholder="Search" onkeyup="LoadList();" />
<p id="results">
No Data Available.
</p>

</body>
</html>





Could someone tell me why the innerHtml is not updating? Thanks in advance.

P.S: The code is fetching the data from the xml file as I could see in browser's console, the values being passed to the
dispText
variable.

Answer
 <!DOCTYPE html>    
 <html>     
 <body> 
 <input id="txtSearch" type="text" placeholder="Search" onkeyup="LoadList();" />               
 <p id="results">No data available</p> 
     <script> 
     function LoadList() {   
        var xhttp = new
        XMLHttpRequest();   
        var searchBox = 
        document.getElementById("txtSearch");
        var resultBox =  document.getElementById("results");
        var searchedChars = "";
        searchedChars += searchBox.value;   
        xhttp.onreadystatechange = function() {
         //alert(this.status);
        if (this.readyState == 4 && this.status == 200) {
         var xmlContent = this.responseXML;
                            var nameList = searchedChars;
                            alert(nameList);
                            var dispText = "";
                            for(var i = 0 ; i < nameList.length ; i++)
                            {
                                dispText += nameList[i] + "<br/>";
                            }
                            resultBox.innerHTML = dispText;
        }   
    };   
      xhttp.open("GET", "ajax.txt", true);   
      xhttp.send(); 
     } </script>    
    </body> 
  </html> 

Hope this may help you