AJAX Problem

HMTKSteve

I am encountering a very strange AJAX problem.


var xmlhttp;

function updateDiv(str) {
xmlhttp=GetXmlHttpObject();
if(xmlhttp==null)
{
alert ("Your browser does not support HTTP Request");
return;
}
var url="url.php";
url=url+"?var="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged () {
if (xmlhttp.readyState==4)
{
document.getElementById("some-div").innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject() {
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// Code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}



This function is set to run as soon as the DOM is ready and sometimes it does run. Sometimes it does not run.

I've tried adding alerts into the code to try and debug it that way but every time I add them in the javascript becomes far less likely to work at all. I'm a bit frayed over this because I can't for the life of me figure out why the script would work sometimes but not all the time.

Apreche

Why aren't you using JQuery?

HMTKSteve

I was having the same problem with jquery.


function updataDiv(str) {
new Ajax.Request("url.php",
{
method: 'post',
postBody: '?uid='+str+'&sid='+Math.random();,
onComplete: showResponse
});
}

function showResponse(req){
$('some-div').innerHTML= req.responseText;
}



I figured using straight javascript and xmlhttprequest would be easier to debug.

BTW, I was able to put an alert in the statechanged function before the document update and it worked every time with the alert window popping up. With the alert after the document update it would never work. I can't leave alerts in for general usage.

Apreche

I figured using straight javascript and xmlhttprequest would be easier to debug.

Use JQuery. You can do this in just a few lines, isntead of a whole bunch, and it's pretty much guaranteed to work exactly the same in all browsers. I hardly know anybody at all who still writes in straight JavaScript other than the people who work on JavaScript libraries like JQuery, Prototype, MooTools, etc.

Also, you clearly have no idea what you are doing. new Ajax.Request ??? try $.ajax();
The documentation is your friend.

HMTKSteve

I noticed that after taking a moment to look over the jquery docs.


function sendRequest(str) {
$.get("url.php", { uid: str, sid: Math.random(); },
showResponse(data){
alert("Data Loaded: " + data);
});
}

function showResponse(req){
$('some-div').innerHTML= req.responseText;
}


Using this it never works. Ideas?

Apreche

Ok, so you have two functions. When are you calling them?

HMTKSteve

window.onDomReady = sendRequest({$ir['userid']});


I call the function for SendRequest as soon as the DOM is ready. ShowResponse is called by the get function after the data is returned.

After looking closer at the jquery docs i tried to use the more elaborate ajax command:


function sendRequest(str) {
alert ( "data is " + str);
$.ajax({
type: "GET",
url: "url.php",
data: "uid=" + str ,
dataType: "script",
success: showResponse(msg){
alert( "Data Saved: " + msg );
}
});
}

function showResponse(msg){
document.getElementById("some-div").innerHTML= msg.responseText;
}


This worked the very first time and then not again.

Apreche

Don't use window.ondomready. If you're going to use JQuery, everything you do should be JQuery.

$(document).ready(function(){
showResponse(sendRequest('string'));
});

Also, something could be wrong with the server-side script that you are ajaxing.

HMTKSteve

Don't use window.ondomready. If you're going to use JQuery, everything you do should be JQuery.

$(document).ready(function(){
showResponse(sendRequest('string'));
});

Also, something could be wrong with the server-side script that you are ajaxing.

I thought about that so I called it directly with parameters and it works fine.

What has me stumped is why it only works sometimes instead of all the time. When I added in the alerts to the non jquery code it always worked and walked me through each state change. When I removed the alerts it only worked some of the time.

I got the original $.get jquery code to work the first time and then it ceased to work at all after that.

When I use this:

function stateChanged () {
if (xmlhttp.readyState==4 && xmlhttp.status==200)
alert ('Document waiting: xmlhttp request state changed to' + xmlhttp.readyState + ' and xmlhttp.status is ' + xmlhttp.status + '.' );
{
alert ('Document ready: xmlhttp request state changed to' + xmlhttp.readyState + ' and xmlhttp.status is ' + xmlhttp.status + '.' );
document.getElementById("some-div").innerHTML=xmlhttp.responseText;
}
}


It always works but it also steps me through each state change. When I remove the alerts it only works some of the time. I'm new to javascript so I don't really now where to go from here.

HMTKSteve

Strangely enough, placing the css before the js appears to have fixed the problem. Now it works about 99% of the time.