PDA

View Full Version : AJAX loading issues


liverfarm
03-16-2010, 01:36 PM
Hi all,
i posted a similar thread in another forum here but just realised maybe this is a better place to ask.

Im playing around with AJAX to get some rollover buttons inside a DIV to load text from a .TXT file into another DIV. At the moment its working fine, but the text isnt staying, it appears then vanishes in a split second.
Any ideas how to make it stay until the next button is clicked?

here is the ajax code im using:
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
document.getElementById('bodytext').innerHTML=xmlh ttp.responseText;
}
and this is the code i have for the rollover:
<a href="" onclick="loadXMLDoc('home.txt')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('courses','','../assets/courseBtnO.png',1)"><img src="../assets/courseBtn.png" alt="language courses" name="courses" width="119" height="17" border="0" id="courses" /></a>thanks in advance, this really has me stumped haha

ranjan
03-17-2010, 04:25 AM
xmlhttp.responseText is empty (since its still loading) when you are trying to populate bodytext...

There are a few problems with your code:

1. Your function loadXMLDoc creates a new ActiveX/XMLHttpRequest object whenever your invoke the function. You should create the object just once

var XHRFactory = (function () {
if (window.XMLHttpRequest) {
return function () {
return new XMLHttpRequest;
}
}
else if (window.ActiveXObject) {
return function () {
var xhr, axo, ex, objects;
objects = ['Microsoft', 'Msxml2', 'Msxml3'];
for (var i = 0; i < objects.length; i++) {
axo = objects[i] + '.XMLHTTP';
try {
xhr = new ActiveXObject(axo);
return xhr;
}
catch (ex) {};
}
throw 'Unable to create XHR object.';
}
}
else {
return function () {
throw "XMLHttp is not supported.";
}
}
})();


Then to use the factory to get your data


function updateBodyText(url) {
var http = XHRFactory();
if (http) {
http.open("GET", url, false);
http.onreadystatechange = function(){
document.getElementById('bodytext').innerHTML=http .responseText;
};
http.send(null);
}
}


So you will notice we are checking onreadystatechange before we populate bodytext

PS: This was done extempore, scripts were not tested, there may be typos etc, but it will teach you the basics of ajax

liverfarm
03-17-2010, 08:27 AM
awesome! thanks for that, ill give it a go and see if i can get it working

liverfarm
03-17-2010, 09:19 AM
i have tried using the code but im not sure where its meant to go. I am assuming that it is placed within the <head>, but then what do i add to the rollover to load it?

i have tried adding bothe parts of the code you suggested into the <head> and in the rollover space i replaced the LoadXMLDoc('home.txt') with updateBodyText('home.txt') but it didnt seem to work

Sorry, im really new at this. This is my first attempt at using AJAX , go easy on me :P

ranjan
03-18-2010, 12:33 AM
<body>
<script>
var XHRFactory = (function () {
if (window.XMLHttpRequest) {
return function () {
return new XMLHttpRequest;
}
}
else if (window.ActiveXObject) {
return function () {
var xhr, axo, ex, objects;
objects = ['Microsoft', 'Msxml2', 'Msxml3'];
for (var i = 0; i < objects.length; i++) {
axo = objects[i] + '.XMLHTTP';
try {
xhr = new ActiveXObject(axo);
return xhr;
}
catch (ex) {};
}
throw 'Unable to create XHR object.';
}
}
else {
return function () {
throw "XMLHttp is not supported.";
}
}
})();


function fetchIt(url) {
var http = XHRFactory();
if(http) {
http.open('GET', url, true);
http.send(null);
http.onreadystatechange = function(){document.getElementById('bodyText').inn erHTML = http.responseText;}
}
}
</script>
<a href="#" onclick="fetchIt('home.txt');">Click</a>
<div id="bodyText"></div>

liverfarm
03-18-2010, 03:20 AM
Ah excellent, thanks alot for that, its working perfectly! Seems i was just messing up the button code for it :P
thanks again!