Ajax not working. Output not showing up

Question

I am having a problem using ajax in my code. How it is supposed to work is that index.php would pass values through to ajax.js, then go to further.php. In further.php a tree diagram will be generated and is supposed to be presented in a div in the index.php page. This should be done when I click "Go further" on index.php. However, when I try this, the output is now showing up. The div is was given a border, so I see that the div shows up empty, when it should have the tree diagram from further.php. Below are before and after images of the process, where I click "go further", to get the diagram from further.php.

Image 1: index.php before the link is click and the ajax function is called.

Image 2:The empty div screen shot.(Under the text:"Go further"). The partial diagram above the empty div is what the tree should look like. After ajax function is called. The empty div, that is that bordered area below the number 1, is where the tree diagram from further.js is supposed to show up.

The figure 1 seen in the image, that is under the text:Go further in image 2, is a test to see if the data is being passed successfully from index.html, through ajax.js to further.php. This figure appearing, says that data is being passed successfully. But the required output is not showing up, the div is coming up empty.

How do I fix this?

So why doesn't the tree diagram in the javascript code of further.php show up?

Answer 1

Where exactly is the problem? Just that the ajax isn't working? I would suggest you take some time to learn jQuery, it is much simpler for handling ajax and many other javascript functions. And develop a testing routine to test your ajax responses; create a and make sure that a simple string is passing there before trying to pass more complex function generated results. And fix the SQL injection issues.

One line of code that doesn't make sense: $row2['Pid']; what is this supposed to do?

Answer 2

Why ajax was not working in your code . A small bug in your code on handling ajax response .

   function handleAjaxResponse()
{
    if (xmlhttp.readyState==4)
    {
        document.getElementById("output").innerHTML = xmlhttp.responseText;

    }else{
        document.getElementById("main").innerHTML = "";
    }
}

There is no xmlhttp variable should be resolved in handleAjaxResponse method this is the reason for error . Please refer the below code .

xmlhttp.onreadystatechange = handleAjaxResponse(xmlhttp);

function handleAjaxResponse(xhr){
    console.log(xhr);   
}