I have problems displaying data with Ajax - php

Question

how you doing, i've been working on this for 2 hours now and I can't seem to get my page to dynamically display information when I change it. Would appreciate if someone can tell me what went wrong.
This is my HTML
<h2>Feedbacks</h2>
<form>
<select onchange="viewFeedback(this.value);">
<option value="unread">View Unread</option>
<option value="all" >View All</option>
</select>
</form>
<div id="feedbackview"></div>
This is my ajax
function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_type = new XMLHttpRequest();
}
return request_type;
}
var http = createObject();
function viewFeedback(condition) {
http.onreadystatechange = function() {
if(http.readyState == 4) {
document.getElementById('feedbackview').innerHTML=http.responseText;
}
http.open("GET",'viewfeedback.php?condition='+condition,true);
http.send(null);
}
}
and here is the php
$condition = $_GET['condition'];
$db = new db();
$query = $db->query("SELECT * FROM feedback");
$rows = $db->countRows($query);
if($rows != 0) {
$results = $db->getRows($query);
foreach($results as $result) {
extract($result);
echo $name;
}
}

Answer 1

The open() and send() calls should not be within the onreadystatechange event, move them outside. You can also move the event outside from the viewFeedback() too because there's no need to keep re-defining it every time your dropdown is changed.
var http = createObject();
http.onreadystatechange = function() {
if(http.readyState == 4) {
document.getElementById('feedbackview').innerHTML=http.responseText;
}
}
function viewFeedback(condition) {
http.open("GET",'viewfeedback.php?condition='+condition,true);
http.send(null);
}
Also note that you don't do anything with $_GET['condition'] on the PHP side, so the response will always be the same regardless of which dropdown item is selected.

Answer 2

First, I don't know if that Ajax creation function is so great. I would comment it out for now and add it back only if it is not working in a supported browser. Instead just do this:
var http = new XMLHttpRequest();
Next, try hitting the PHP web service directly in your browser. Is it working? If so, fix the issues in your Ajax request:
function viewFeedback(condition) {
http.open("GET", 'viewfeedback.php?condition=' + condition, true);
http.onreadystatechange = function() {
if (http.readyState == 4) {
if (http.status == 200) {
document.getElementById('feedbackview').innerHTML = http.responseText;
} else {
console.log(http.response);
}
}
}
http.send(null);
}
Let me know if this doesn't work.