Problem with AJAX in Firefox

geoko · June 1st, 2006, 11:11 AM

In IE it looks good, but not in Firefox.
Every time I call the info1() or info2() the "Loading..." show up and the content, is placed in the <div id="a"></div>.
This works in both browsers but with a different way.

In IE the previous content in the div is disappeared (this is what I want) and the new one, according to my choice, comes up.

In Firefox the previous content doesn't disappear. It stays on the page and the new one appears below that, and so on....

What's the problem in my code?

I have the folowing code:
<script language="javascript">
var httpRequest;

// for IE
if (window.ActiveXObject)
{
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
// for other browsers
else if (window.XMLHttpRequest)
{
    httpRequest = new XMLHttpRequest();
}

function info1(url)
{
    httpRequest.open('get',url, true);
    httpRequest.onreadystatechange = parseInfo;
    httpRequest.send(null);
}

function info2()
{
    val = document.populate.hidden.value;
    val2 = document.populate.country.options[document.populate.country.selectedIndex].value;
    val3 = document.populate.job.options[document.populate.job.selectedIndex].value;

    httpRequest.open('get','index.php?id=24&action='+v al+'&country='+val2+'&job=' +val3, true);
    httpRequest.onreadystatechange = parseInfo;
    httpRequest.send(null);
}

function parseInfo()
{
    if(httpRequest.readyState == 1)
    {
    document.getElementById('a').innerHTML='Loading... ';
    }
    if (httpRequest.readyState == 4)
    {
        if(httpRequest.status == 200)
        {
            var answer = httpRequest.responseText;
        document.getElementById('a').innerHTML = answer;
        }
        else
        {
            alert("Error loading page\n"+ httpRequest.status +":"+ httpRequest.statusText);
        }
    }
}
</script>

Any help is appreciated.
Georgia

geoko · June 6th, 2006, 09:37 AM

I found the solution!
So the new parseInfo() function is:

function parseInfo()
{
    if(httpRequest.readyState == 1)
    {
        if (document.getElementById && document.getElementById('a'))
        {
            x = document.getElementById('a');
            x.innerHTML = '<div id="a"></div>';
            x.innerHTML = 'Loading...';
        }
    }
    if (httpRequest.readyState == 4)
    {
        if(httpRequest.status == 200)
        {
            if (document.getElementById && document.getElementById('a'))
            {
                x = document.getElementById('a');
                x.innerHTML = '<div id="a"></div>';
                x.innerHTML = httpRequest.responseText;
            }
        }
        else
        {
            alert("Error loading page\n"+ httpRequest.status +":"+ httpRequest.statusText);
        }
    }
}

geoko :D

BinodSuman · June 27th, 2009, 11:57 AM

Here is solution to run ajax code for firefox.

HTML Code:

<script type="text/javascript">
var request; function getName(){
var roll = document.getElementById("roll").value;
var url = "http://localhost:8080/blog_demo/StudentInfo?roll="+roll;
 
if(window.ActiveXObject){
request = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}
 
request.onreadystatechange = showResult;
request.open("POST",url,true);
request.send(null);
}
function showResult(){
if(request.readyState == 4){
if ( request.status == 200 ) {
var response = request.responseXML;
var students = response.getElementsByTagName("Student");
var student = students[0];
 
document.getElementById("NamelH1").innerHTML = student.getElementsByTagName("Name")[0].childNodes[0].data;
document.getElementById("HostelH1").innerHTML = student.getElementsByTagName("Hostel")[0].childNodes[0].data;
document.getElementById("ContactH1").innerHTML = student.getElementsByTagName("Contact")[0].childNodes[0].data;
 
 
}
}
}
</script>

http://binodsuman.blogspot.com/2009/...-does-not.html

Thanks,

Binod Suman

http://binodsuman.blogspot.com