AJAX doesn't send back

Question

First I want to say that I am a beginner in Ajax. I am just a beginner. I hope you could help me with it.

I want to send an id to the ajax script and there I run a query. Then I want to return the output of the page. I have a page quick_view_page.js in wich i set the id and send it to ajax_project_info.php in which I retrieve the id via the link. If I open ajax_project_info.php and set a variable id in the link, it works well.

I can't get the output of ajax_project_info returned to quick_view_page.js.

My quick_view_page.js.

//Quick view show and hide
    $('a#quick_view').click(function() {
        var projectId = $(this).find($(".qv_id")).attr('id');
        //alert(projectId);

        xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET","ajax/ajax_project_info.php?projectId=" + projectId);
        xmlhttp.send();

        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementByClassName("qvp_bg").innerHTML=xmlhttp.responseText;
        }

My ajax_project_info.php

<?php
require_once("../pages/db.php");
error_reporting(E_ALL);
ini_set('display_errors', 1);
ob_start();

$projectId = $_GET["projectId"];

$query_getinfo = "SELECT * FROM tblProjecten WHERE id = '".$projectId."'";

$result_query_getinfo = mysqli_query($conn,$query_getinfo);

while ($row = mysqli_fetch_array($result_query_getinfo)) {
    $response = $row['projectnaam'];
};
else {
    $response = "Geen info beschikbaar";
}
return $response;

?>

Thanks!

UPDATE: The problem seems to be in the "if (xmlhttp.readyState==4 && xmlhttp.status==200)" When I set an alert between this, the alert doesn't pop up.

UPDATE 2: I now have quick_view_search.js:

        //Quick view show and hide
    $('a#quick_view').click(function() {
        var projectId = $(this).find($(".qv_id")).attr('id');


        //xmlhttp request
        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                document.getElementsByClassName("qvp_bg").innerHTML=xmlhttp.responseText;
            }
        }

        xmlhttp.open("GET","ajax/ajax_project_info.php?projectId=" + projectId, true);
        xmlhttp.send();

        $.ajax({
            'url' : 'ajax/ajax_project_info.php',
            'type' : 'GET',
            'data' : {
            'projectId' : projectId
        },
        'success' : function(data) {
            document.getElementsByClassName("qvp_bg").innerHTML=data;
        }
        });


        $('.quick_view_project').css('display', 'block').hide().fadeIn();
        return false;
    });

ajax_project_info.php:

<?php
/*
require_once("../pages/db.php");
error_reporting(E_ALL);
ini_set('display_errors', 1);
ob_start();

$projectId = $_GET["projectId"];

if ($projectId) {
    $query_getinfo = "SELECT * FROM tblProjecten WHERE id = '".$projectId."'";
    $result_query_getinfo = mysqli_query($conn,$query_getinfo);

    while ($row = mysqli_fetch_array($result_query_getinfo)) {
        $response = $row['projectnaam'];
    }
    else {
        $response = "Geen info beschikbaar";
    }
}
else {
    $response = "Geen info beschikbaar";
}
echo $response;
*/
echo "test";

?>

It gives me the following error: "xmlhttp is not defined".

Answer 1

use echo $response instead of return $response

try also,

xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementByClassName("qvp_bg").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","ajax/ajax_project_info.php?projectId=" + projectId, true);
xmlhttp.send();

Using jQuery

Include jQuery to the project

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

GET request

$('.myButton').click(function() {
  $.ajax({
    'url' : 'ajax/ajax_project_info.php',
    'type' : 'GET',
    'data' : {
      'projectId' : projectId
    },
    'success' : function(data) {
      document.getElementByClassName("qvp_bg").innerHTML=data;
    }
  });
});

hope this helps :-)