logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > Javascript and JS frameworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 03-16-2010, 12:36 PM   #1
liverfarm
 
Join Date: Feb 2010
Posts: 23
Default AJAX loading issues

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:
Code:
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=xmlhttp.responseText;
}
and this is the code i have for the rollover:
Code:
<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
liverfarm is offline   Reply With Quote
Old 03-17-2010, 03:25 AM   #2
ranjan
 
Join Date: Dec 2004
Posts: 405
Default I am loading.....

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
Code:
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

Code:
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

Last edited by ranjan; 03-17-2010 at 03:26 AM.. Reason: whitespace
ranjan is offline   Reply With Quote
Old 03-17-2010, 07:27 AM   #3
liverfarm
 
Join Date: Feb 2010
Posts: 23
Default

awesome! thanks for that, ill give it a go and see if i can get it working
liverfarm is offline   Reply With Quote
Old 03-17-2010, 08:19 AM   #4
liverfarm
 
Join Date: Feb 2010
Posts: 23
Default

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
liverfarm is offline   Reply With Quote
Old 03-17-2010, 11:33 PM   #5
ranjan
 
Join Date: Dec 2004
Posts: 405
Default

Code:
<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').innerHTML = http.responseText;}
	}
}
</script>
<a href="#" onclick="fetchIt('home.txt');">Click</a>
<div id="bodyText"></div>
ranjan is offline   Reply With Quote
Old 03-18-2010, 02:20 AM   #6
liverfarm
 
Join Date: Feb 2010
Posts: 23
Default

Ah excellent, thanks alot for that, its working perfectly! Seems i was just messing up the button code for it :P
thanks again!
liverfarm is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 11:37 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com