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