Infuriating Javascript (Ajax) problems

[Eriedor]

I consider myself a competent coder but for the life of me cannot get Ajax to consistently work on a website i'm developing on localhost.

What's annoying is it works in IE7 but not FF......

I've tried writing the code myself to no avail, now I've tried using jquery's built in ajax support and still it doesn't work. Can it get more simple than:

function insert() {
    var xmlHttp;
    xmlHttp=GetXmlHttpObject();
    var url="insert.php?sid="+Math.random();
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}

In Firefox the first time this runs it works and insert.php runs its SQL, however it will not work again, even after page refreshes, also it reloads the page (why??? it's async!!!) after the code is ran!!!

Tried jquery

function insertPost(){
	$.post('insert.php',{}, function() {
		alert('Your data has been saved.');
	});
}

Didn't work!

Any ideas?

 

[RobH]

Where are you testing it? I don't think firefox allows XMLHTTP open to a 3rd party host, I know I had problems with AJAX when I was using an absolute path rather than a relative one.

 

[psyr33n]

As the page is reloading, post your HTML or event handling JS.

 

[Eriedor]

Where are you testing it? I don't think firefox allows XMLHTTP open to a 3rd party host, I know I had problems with AJAX when I was using an absolute path rather than a relative one.

localhost, as you can see from the code I'm using relative paths, insert.php is in the same directory as the code is being run.

As the page is reloading, post your HTML or event handling JS.

From an AJAX point of view that is the only code, I'm not doing anything with responseText or status change.

 

[ChrisB]

works fine for me in both IE and FF. Is your insert.php actually returning anything? i.e. a xml document. It needs to know that the data has been processed, then it will send you your response code initiating the javascript alert box.

html:

<input type="submit" value="Save Fitting" onclick="PostSomeData();">

JS Function

function PostSomeData(){
        $.post('save.php', {
            text: 'my string',
            number: 23
        }, function() {
            alert('Your data has been saved.');
        });
}

save.php:

header ('Content-Type: text/xml');
echo '<?xml version="1.0"?>';
echo "\n<Results>\n";
        echo "<Call></Call>\n";
echo "</Results>";

Edit:
I prefer to use the $.ajax function, as its a little clearer and you make make a few tweaks here and there. Principle is the same though. http://docs.jquery.com/Ajax

 

[Eriedor]

works fine for me in both IE and FF. Is your insert.php actually returning anything? i.e. a xml document. It needs to know that the data has been processed, then it will send you your response code initiating the javascript alert box.

Atm I'm not returning anything, I will in due time but I deleted the code to rule it out as a problem. The insert.php script it is calling merely runs an sql insert statement on a database. I check the database afterwards to confirm it has been run correctly. I'll try the above code.

 

[psyr33n]

From an AJAX point of view that is the only code, I'm not doing anything with responseText or status change.

Yes but the AJAX is triggered by something, either by inline JS in the HTML or by an event handler. As the page is reloading, this may mean that the it's not being triggered correctly.

 

[Eriedor]

Ah I see what you mean, it is simply

<button onClick='insert()' id='newpostsave'>Save</button>

 

[psyr33n]

Try changing it to:

<button onclick='insert(); return false;' id='newpostsave'>Save</button>

Or make the insert() function return a boolean value of false in the JS.

 

[Eriedor]

Sorry to bump an oldish post (only just got round to working on this) but I had to reply to say thanks so much psy that worked a treat!!

 

[psyr33n]

Non problemos, always the simple things!