<div>
Well a bit clunky like the original, but this seemed to work. 
 
1) Used the simple XHConn.js library as the helper application to manage the external connection(s). 
<a href="http://xkr.us/code/javascript/XHConn/" rel="ugc">http://xkr.us/code/javascript/XHConn/</a> 
 
2) Set up a function that initiated one connection after the other. 
 
Far from efficient or pretty, but works so far. 
 
 

<pre><code class="code-10 nolinks" id="code-262913">
&lt;head&gt;
 
&lt;script type=&quot;text/javascript&quot; src=&quot;XHConn.js&quot;&gt;&lt;/script&gt;
 
&lt;script type=&quot;text/javascript&quot;&gt;
 
function Load(what1,where1,what2,where2) {
Update(what1,where1);
Update(what2,where2);
}
 
function Update(what,where)
{
var myConn = new XHConn();
 
if (!myConn) alert(&quot;XMLHTTP not available. Try a newer/better browser.&quot;);
 
var fnWhenDone = function (oXML) {document.getElementById(where).innerHTML =oXML.responseText;};
 
myConn.connect(what, &quot;GET&quot;, &quot;&quot;, fnWhenDone);
 
}
 
&lt;/script&gt;
&lt;/head&gt;
 
&lt;body&gt;
&lt;a href=&quot;#&quot; onclick=&quot;Load('TextA.php','content1','TextB.php','content2');&quot;&gt;A-top B-bottom&lt;/a&gt;
&lt;a href=&quot;#&quot; onclick=&quot;Load('TextB.php','content1','TextA.php','content2');&quot;&gt;B-top A-bottom&lt;/a&gt;
 
&lt;div id=&quot;content1&quot;&gt;Box1 &lt;/div&gt;
&lt;div id=&quot;content2&quot;&gt;Box2 &lt;/div&gt;
 
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>

<div>
try this 

<pre><code class="code-10 nolinks" id="code-262914">&lt;head&gt;
 
&lt;script language=&quot;javascript&quot;&gt;
 
var mapArray = new Array();
mapArray.push({ &quot;what&quot; : &quot;FileA.php&quot; , &quot;where&quot; : &quot;content1&quot; } );
mapArray.push({&quot;what&quot; : &quot;FileB.php&quot; , &quot;where&quot; : &quot;content2&quot; } );
 
function updateContents()
{
 alert(&quot;here&quot;);
 for(var count = 0; count &lt; mapArray.length -1 ; count++)
 getData(mapArray[count][&quot;what&quot;] ,mapArray[count][&quot;where&quot;]);
}
 
 
var ajaxdestination=&quot;&quot;;
 
function getdata(what,where) { // get data from source (what)
 try {
 xmlhttp = window.XMLHttpRequest?new XMLHttpRequest():
 new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);
 }
 catch (e) { /* do nothing */ }
 
 document.getElementById(where).innerHTML =&quot;&lt;center&gt;&lt;img src='loading.gif'&gt;&lt;/center&gt;&quot;;
// we are defining the destination DIV id, must be stored in global variable (ajaxdestination)
 ajaxdestination=where;
 xmlhttp.onreadystatechange = triggered; // when request finished, call the function to put result to destination DIV
 xmlhttp.open(&quot;GET&quot;, what);
 xmlhttp.send(null);
 return false;
}
 
function triggered() { // put data returned by requested URL to selected DIV
 if (xmlhttp.readyState == 4) if (xmlhttp.status == 200) 
 document.getElementById(ajaxdestination).innerHTML =xmlhttp.responseText;
}
&lt;/script&gt;
&lt;/head&gt;
 
&lt;body&gt;
 
&lt;a href=&quot;#&quot; onclick=&quot;updateContents();&quot;&gt;Click to update&lt;/a&gt;
 
&lt;div id=&quot;content1&quot;&gt;Box 1 Contents&lt;/div&gt;
&lt;div id=&quot;content2&quot;&gt;Box 2 Contents&lt;/div&gt;
 
&lt;/body&gt;
</code></pre>
</div>

<div>
sumitkchawla: 
 
Thanks! 
 
All seemed like it should work, but when I ran your code, (correcting a few letters), I kept getting the following error: document.getElementById(ajaxdestination) is null--the final line of the getData script. So nothing there? 
 
I Like the array approach, so I will try rewrite my revised approach to import array values from the onclick event then loop them out as you did to what I know call the Update function. 
 
 
 

</div>

<div>
sumitkchawla, 
 
Works great. Just need to have the &quot;what&quot; and &quot;where&quot; values in the onclick event as opposed the script itself, and will be set. But I can sort that if need be. &nbsp; 
 
Any ideas why iterating things at the end of your new script through the conditional proved to work whereas the for loop at the top of your original script did not? 
 
Also, mind if I give myself a few points to reflect the functionality of my revised script? 
 
 

</div>

<div>
Since we have a async callback to the server, so the next getdata needs to be called only when the first has completed. Thats why i have removed the loop. Loop will only work if all the XmlHttp requests can be fired parallel. 
 
 

</div>

<div>
Ended up sticking with the XHConn solution with a modification to eliminate the need for hardcoding What/Where pairs in the function itself--thus an unlimited number of pairs could be processed by just entering the filenames and destination DIVs into the onclick event--separated by semicolons. Final code below 
 
But since sumitkchawla stuck with the initial code and came up with a fine solution, will still award him most of the points. 

<pre><code class="code-10 nolinks" id="code-263017">&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;
&lt;title&gt;Update DIVs&lt;/title&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;XHConn.js&quot;&gt;&lt;/script&gt;
&lt;!--download from: http://xkr.us/code/javascript/XHConn/--&gt;
 
&lt;script type=&quot;text/javascript&quot;&gt;
 
function Load(data) {
 /*Data comes in from the onlcick event in one string with values separated by semicolons(;) (filename;DIV;filename2;DIV2;filename3;DIV3;...) This string is processed two values (one fliname/DIV pair) at a time. */ 
 var inputArray = data.split(&quot;;&quot;);
 for (var i = 0; i &lt; ((inputArray.length +1)/2 + 1);i+=2) 
 	 {/
		updateDIV(inputArray[i],inputArray[i+1]);
 }
}
 
function updateDIV(what,where)
{
var myConn = new XHConn();
 
if (!myConn) alert(&quot;XMLHTTP not available. Try a newer/better browser.&quot;);
 
var fnWhenDone = function (oXML) {document.getElementById(where).innerHTML =oXML.responseText;};
 
myConn.connect(what, &quot;GET&quot;, &quot;&quot;, fnWhenDone);
 
}
 
&lt;/script&gt;
&lt;/head&gt;
 
&lt;body&gt;
&lt;a href=&quot;#&quot; onclick=&quot;Load('TextA.php;content1;TextB.php;content2');&quot;&gt;A-top B-bottom&lt;/a&gt;
&lt;a href=&quot;#&quot; onclick=&quot;Load('TextB.php;content1;TextA.php;content2');&quot;&gt;B-top A-bottom&lt;/a&gt;
 
&lt;div id=&quot;content1&quot;&gt;Box1 &lt;/div&gt;
&lt;div id=&quot;content2&quot;&gt;Box2 &lt;/div&gt;
 
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>

<div>
The Author has not assigned any points for this question.
</div>

<div>
sumitkchawla: 
 
Did indeed assign points, and they were noted on the notice of closure. Why they've not shown up yet, no idea. 
</div>

<div>
I think you need to accept the solution.
</div>

<div>
<div class="content wysiwyg-content">
New to ajax and have been using the following script to update the contents of a single div with separate onclick events. Now I would like to know how to modify the script to handle updates to both (or more) divs with a SINGLE onclick event? Thanks. 

<pre><code class="code-10 nolinks" id="code-262766">&lt;head&gt;
 
&lt;script language=&quot;javascript&quot;&gt;
var ajaxdestination=&quot;&quot;;
 
function getdata(what,where) { // get data from source (what)
	 try {
 xmlhttp = window.XMLHttpRequest?new XMLHttpRequest():
 		new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);
	 }
	 catch (e) { /* do nothing */ }
 
 		document.getElementById(where).innerHTML =&quot;&lt;center&gt;&lt;img src='loading.gif'&gt;&lt;/center&gt;&quot;;
// we are defining the destination DIV id, must be stored in global variable (ajaxdestination)
	 ajaxdestination=where;
 	xmlhttp.onreadystatechange = triggered; // when request finished, call the function to put result to destination DIV
 	xmlhttp.open(&quot;GET&quot;, what);
 	xmlhttp.send(null);
 return false;
}
 
function triggered() { // put data returned by requested URL to selected DIV
 if (xmlhttp.readyState == 4) if (xmlhttp.status == 200) 
 document.getElementById(ajaxdestination).innerHTML =xmlhttp.responseText;
}
&lt;/script&gt;
&lt;/head&gt;
 
&lt;body&gt;
 
&lt;a href=&quot;#&quot; onclick=&quot;getdata('FileA.php','content1');&quot;&gt;Click to update Box 1&lt;/a&gt;
&lt;a href=&quot;#&quot; onclick=&quot;getdata('FileB.php','content2');&quot;&gt;Click to update Box 2&lt;/a&gt;
 
&lt;div id=&quot;content1&quot;&gt;Box 1 Contents&lt;/div&gt;
&lt;div id=&quot;content2&quot;&gt;Box 2 Contents&lt;/div&gt;
 
&lt;/body&gt;
</code></pre>
</div>
</div>

New to ajax and have been using the following script to update the contents of a single div with separate onclick events. Now I would like to know how to modify the script to handle updates to both (or more) divs with a SINGLE onclick event? Thanks. 

Update 2 divs with one onclick event

Asynchronous JavaScript and XML (AJAX) is a group of interrelated Web development techniques used on the client-side to create asynchronous Web applications. With AJAX, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. HTML and CSS can be used in combination to mark up and style information. The Document Object Model (DOM) is accessed with JavaScript to dynamically display and allow interaction with the information presented.