Update Content Dynamically

[eternal]

Hi Guys,

I have a situation where I need to use Ajax to re-load data into a div without refreshing the page.

We are using JSTL/Java to suck out results from a database and display those records in a pop out div where the user can then sort these results alphabetically. When they click a link to "Sort Alphabetically" it needs to load in the div without the page refreshing [as it is a pop out div and on page load it is set to display:none;].

So, I guess I need to know how to request for the data to be sent again and how to populate the div with the data once again. The results are in a <ul> <li> type of list structure.

Any ideas on where I need to start here?

Thanks.

[cmarshall]

I'll SM you something. I've sent a few of these today. Busy day for AJAX.

It addresses the issue here [webmasterworld.com].

[eternal]

Thanks for your reply.

I had a look at your ajax_queue.js and the code seems pretty crazy. I need something really simple to display a text file of certain results and load another text file of certain results upon a link being clicked. Ideally I want the results in an unordered list.

Just to show me how I would load something using the HTTPRequest dynamically into html using javascript. If I can see an example of that in its simplest form I could then adapt it for the more complex code the java is doing.

Many thanks.

[cmarshall]

Well, it's a class. It's actually a relatively simple class, compared to all those frameworks out there.

AJAX is a crazy environment. Many things can happen, and the queue class handles them all.

Actually, if you use SimpleAJAXCall(), I've never seen anything easier. Check out the SimpleAJAXCall() demo. It's just a few lines of code.

You might want to try that code I sent the lady doing the glossary. I believe that it is a drop-in solution for exactly what you are doing.

[eternal]

Its not more simple than this though;

function getPage(){
var xmlhttp=false; //Clear our fetching variable
try {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP'); //Try the first kind of active x object…
} catch (e) {
try {
xmlhttp = new
ActiveXObject('Microsoft.XMLHTTP'); //Try the second kind of active x object
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest(); //If we were able to get a working active x object, start an XMLHttpRequest
}
xmlhttp.open("GET", "test.txt", true); //Open the file through GET
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) { //Check if it is ready to recieve data
var content = xmlhttp.responseText; //The content data which has been retrieved ***
if( content ){ //Make sure there is something in the content variable
document.getElementById('1').innerHTML = content; //Change the inner content of your div to the newly retrieved content ****
}
}
}
xmlhttp.send(null) //Nullify the XMLHttpRequest
return;
}

[cmarshall]

Have you tested this on Gecko-based browsers?

[eternal]

Works fine on Firefox and Netscape 7.

[cmarshall]

You are correct, and I was mistaken. Due to the way WebmasterWorld flattens all indenting, I missed the fact that you did do a regular new XMLHTTPRequest if the ActiveX ones failed. Basically, just a slightly modified take on the standard swik.net demo.

In any case, have fun. Simple is in the eye of the beholder. I went through a great deal of back and forth to get that class, and there's still more to go. I'll be adding timeouts to it in the near future. If all you are doing is one thing at a time, then you are better off using a dead simple routine. If, however, you expect to be having more than one request going at the same time, or have a reaction to multiple requests; that's where the fun begins. Try banging on a whole bunch of the little green men, and see if you can trip it up.

AJAX is a pretty chaotic world, and there really is no simple way to properly address it; merely abstractions of complexity, which is what Object Programming is all about.