AJAX Request - Chrome

azzeretti

I have a really simple form that posts to a cgi script. The results get displayed in a results div on the same screen via an AJAX request. While the screen is waiting it shows the spinning wheel image. It is really simple and works well, except in Chrome. IE, Firefox, Opera and Safari all display the image while waiting but FF just ignores it. Is there anything special needed for Chrome? Code below:

<script language="Javascript">
function xmlhttpPost(strURL) {
    var xmlHttpReq = false;
    var self = this;
    // Mozilla/Safari
    if (window.XMLHttpRequest) {
        self.xmlHttpReq = new XMLHttpRequest();
    }
    // IE
    else if (window.ActiveXObject) {
        self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }
    self.xmlHttpReq.open('POST', strURL, true);

    self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    self.xmlHttpReq.onreadystatechange = function() {

        if (self.xmlHttpReq.readyState == 4) {
            updatepage(self.xmlHttpReq.responseText);
        }
        if (self.xmlHttpReq.readyState == 1) {
        document.getElementById("result").innerHTML = '<img src="searching.gif" />';
        }
    }
    self.xmlHttpReq.send(getquerystring());
}

function getquerystring() {
    var form     = document.forms['f1'];
    var shows = form.show.value;
    qstr = 'w=' + escape(shows);  // NOTE: no '?' before querystring
    return qstr;
}

function updatepage(str){
    document.getElementById("result").innerHTML = str;
}

</script>

Webmonkey

It's been a while but...

It looks like you are using GET method indirectly when you open the str URL.

You don't send any post data. ?

If I remember correctly, firefoxs set a limit (as per standards?) of 1024 characters in a URL string? This is a pure guess. It has been 4 years since I looked at this.

Do you think maybe this could be related to the problem.

Apologies if I've read into your code incorrectly. I just skimmed it.

EDIT: Okay I just missed the part you do send it in. Apologies!
Have you tried putting alerts() in various places to debug and check the return values in firefox.

mewso

The only slight possibility I can see from a first glance is innerHtml. innerHtml was always bad practice and even more so if your html page is declared xhtml. I'm not aware of what browsers this may be a problem in as I assumed most are suitably forgiving of this but it's a possibility.

An alternative would be:-

var result = document.getElementById("result");
var resultContent = document.createTextNode(str);
result.appendChild(resultContent);

azzeretti

Thanks for the replies. I couldn't resolve this so I moved towards Jquery Ajax framework and it seems to be working well.

Thanks