Simple 'update text inside HTML tag' fails

[gretty]

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.

 

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;
}

}