[RESOLVED] AJAX: Load multiple files into multiple divs

[scrupul0us]

heres my current code:

<script type="text/javascript">
function ajaxFunction()
  {
  var xmlHttp;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      try
        {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      catch (e)
        {
        alert("Your browser does not support AJAX!");
        return false;
        }
      }
    }
    xmlHttp.onreadystatechange=function()
      {
      if(xmlHttp.readyState==4)
        {
		document.getElementById("myDIV").innerHTML = xmlHttp.responseText;
        }
      }
    xmlHttp.open("GET","time.php",true);
    xmlHttp.send(null);
  }
</script>

and that loads a div called 'myDIV' with file 'time.php' when the body loads

now, what i need to happen is have many different files load into their corresponding div's all at once when the body loads BUT still be able to call each one individually so when the user mouse's over a given area i can use the eventhandler and update that div accordingly...

ive been googling a bit about this and havent found much of a solution... now of course i could recreate that ENTIRE structure to make all the calls but thats just wasteful and not right (As id assume)

please help! tutorials and examples are welcome, solutions and such are appreciated!

ill also add that i do have this working currently with one caveat.... in firefox when i mouseover the div it reloads just fine, but in IE i just get a flashing busy cursor, but it never updates... i suspect maybe i have an issue with my DOM statement for the innerHTML portion... any help there too is appreciated

[bpat1434]

Sounds like you need to start using Objects 😉 With the use of objects you can make many calls to fill different areas. The book "Ajax In Action" has a pretty good model of it. Or you could use one of the pre-built systems already out there.

[greenie2600]

scrupul0us -

I'd do something like this:

function myWindowOnLoadFunction() {
    loadDiv( "div1", "stuff.php" );
    loadDiv( "div2", "other_stuff.php" );
    loadDiv( "div3", "more_stuff.php" );
}

function loadDiv( div_id, source_url ) {
    // ...your ajaxFunction() modified to work with these two parameters...
}

Then your onmouseover events would just trigger loadDiv() with the appropriate parameters.

By the way, all of this could be handled in about three lines of JavaScript with the Prototype library 🙂

[scrupul0us]

greenie2600 wrote:

scrupul0us -

I'd do something like this:

function myWindowOnLoadFunction() {
    loadDiv( "div1", "stuff.php" );
    loadDiv( "div2", "other_stuff.php" );
    loadDiv( "div3", "more_stuff.php" );
}

function loadDiv( div_id, source_url ) {
    // ...your ajaxFunction() modified to work with these two parameters...
}

Then your onmouseover events would just trigger loadDiv() with the appropriate parameters.

good answer!

greenie2600 wrote:

By the way, all of this could be handled in about three lines of JavaScript with the Prototype library 🙂

im not familiar with this... can you provide more information

[scrupul0us]

ok... i got this:

<script type="text/javascript">
function onPageLoad()
{
loadModules ("weather");
}
function loadModules(id)
{
	var xmlHttp;
	try
	{
	// Firefox, Opera 8.0+, Safari
	xmlHttp=new XMLHttpRequest();
	}
	catch (e)
	{
		// Internet Explorer
		try
		{
		xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		}

	catch (e)
	{
		try
		{
		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch (e)
		{
		alert("Your browser does not support AJAX!");
		return false;
		}
	}
}

xmlHttp.onreadystatechange=function()
{
	if(xmlHttp.readyState==4)
	{
	document.getElementById(""+id+"").innerHTML = xmlHttp.responseText;
	}
}
xmlHttp.open("GET","modules/"+id+"/"+id+".php",true);
xmlHttp.send(null);
}
</script>

works great... i had the div named wrong 🙂

[greenie2600]

http://www.google.com/search?q=prototype

You're interested in the Ajax.Request and Ajax.Updater methods.

How, exactly, is your revamped script broken? Assuming that you've set appropriate IDs on the <div>s, and that you're calling the correct URL from your Ajax function ("modules/weather/weather.php"), it looks like it should work.