Why doesn't this simple AJAX script work?

Sim

New member
Hello

I am pretty new to AJAX & I am making a simple program to input new text refresh inside the HTML element that has the id='result'.

My Problem:
- The AJAX script fails when I try to change the text inside 'result' using my code, sometimes a whole new page opens with the text I wanted to put inside the result HTML element. Sometimes I just get a notification that an error occured.
- I believe it is because of my function state_changed & using the parameter element_id with the function getElementById(element_id).innerHTML = ...;
- It should be easy to see where my problem occurs when you look at my code

Any advice on why the script fails & how to fix it would be extremely helpful.

Code:

var xmlHttp;

function ajax_compatible()
{
// Post: Returns an object if browser is AJAX compatible else false.

if (window.XMLHttpRequest)
{
// users web browser can support AJAX
return ( new XMLHttpRequest() );
}
else if (window.ActiveXObject)
{
// users web browser is IE6 and IE5
return ( new ActiveXObject("Microsoft.XMLHTTP") );
}
else {
alert("Unfortunately your browser does not support AJAX.");
return null;
}
}


function get_cookie(cookie_name)
{
if (document.cookie.length > 0)
{
c_start = document.cookie.indexOf(cookie_name + "=");

if (c_start != -1)
{
c_start = c_start + cookie_name.length+1;
c_end = document.cookie.indexOf(";",c_start)

if (c_end == -1)
{
c_end = document.cookie.length;
}

return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}


function add_comment()
{
// Post: Add user comment & rating to database and update new table row.
// DO WE NEED TO SEND COOKIE ASWELL OR IS IT ALREADY DONE???

xmlHttp = ajax_compatible();

if (xmlHttp == null) {
return;
}

var url = 'http://localhost:8000/cgi-bin/main.py';

alert("add_comment() running");

// Extract CGI variables to pass onto python script
var id = document.getElementById('videoID').value;
var video_id = 'videoID=' + id;
var rating = 'rating=' + document.getElementsByName('rating').value;
var comment = 'comment=' + document.getElementById('comment').value;
var add_rating = 'addRating=' + document.getElementById('addRating').value;
//var cookie = document.cookie;

cgi_var = video_id + '&' + rating + '&' + comment + '&' + add_rating; // + '&' + cookie;

// open python script
xmlHttp.open('POST',url,true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

// Error is in below line
xmlHttp.onreadystatechange = state_changed(id);
// if I use the following line then it works
// xmlHttp.onreadystatechange = test;
xmlHttp.send(cgi_var);
}


function state_changed(element_id)
{
// Post: Use one function that will be used for each page update.
// This function sends the text returned by the python server script
// onto the browser(HTML element with the id 'element_id') to be displayed.

if (xmlHttp.readyState == 4)
{
document.getElementById(element_id).innerHTML = xmlHttp.responseText;
}

}

function test()
{
// Post: used to test where the problem occurs
// This function works

if (xmlHttp.readyState == 4)
{
document.getElementById('result').innerHTML = xmlHttp.responseText;
}

}
 
Back
Top