Placing data returned by ajax in new html div

I'm having trouble placing some data returned by an ajax function in the page where I want it.

I've included the relevant html and the javascript function below. There is some php code included which works but is not relevant to this question. The first ajax part of the function works. I have tested it with positive results in another context.

The part starting with "var x . . ." is the part that is not working. This part is supposed to generate the following html:

<div id="1">{content returned by ajax function}</div>

inside of the <div id="circ_1">

It doesn't.

Help!

Here is the html that calls the function:

<div id="circ_1">
<table cellspacing="0">
<tr>
<td class="bg" height="100" align="center" valign="middle" onMouseOver="showHidePage('circ_1', 'page-1')" ><? if (!empty($row['title_short'])) echo $row['title_short']; ?></td>
</tr>
</table>
</div>

Here's the function:

function showHidePage(objID, page) {

//Set remote php location.
var serverPage = 'pages/' + page + '.php';

//Assign the container div to a variable
var obj = document.getElementById(objID);

//Implement ajax request.
xmlhttp.open("GET", serverPage);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

//Create new html objects and include ajax results.
var x = document.createElement('div');
x.setAttribute("id","1");
var text = xmlhttp.responseText;
var y = document.createTextNode(text);
x.appendChild(y);

//Append to container object
obj.appendChild(x);

}

 

An ID cannot be just a number.
Use global variables for the ID's.
The open call is missing the "true" attribute.
The "send" method is missing.

When posting code in these forums, use the code tags. It's the # on the tool bar.
It doesn't hurt to write "please" and "thank you," either. You omitted both of them. And "plz" is not the same as "please," it's juvenile and asinine, it's tells me that you are a lazy child, trying manipulate someone in to doing your work.

You should use a different function for the onmouseout part. Trying to make that one function do all the work wouldn't be efficient.

	var AdminResponse = "";
	var containerID= "";
	var contentID = "";

	function parseSettings(){

		if (document.getElementById(contentID))
			{
			 return;
			}
		var nContainer = document.getElementById(containerID);
		var nContent = document.createElement('div');
		nContent.id = contentID;
		nContent.innerHTML = AdminResponse;
		nContainer.appendChild(nContent);		
	}

	function obtainSettings(objID,page){

		var AdminRequest = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();  
		containerID = objID;
		contentID = "div"+parseInt(page);
		var serverPage = 'pages/' + page + '.php';
		AdminRequest.onreadystatechange = function()
			{
		 	 if (AdminRequest.readyState == 4)
				{
		 	 	 if (AdminRequest.status == 200)
					{
			 	 	 AdminResponse = AdminRequest.responseText;
			 	 	 parseSettings();
					}
		 	 	 else 	{
				 	 alert('Error serverPage '+ AdminRequest.statusText);
					}
				}
			}
		var forceGET = "?n="+ parseInt(Math.random()*999999999);
		AdminRequest.open("GET", serverPage+forceGET, true);
		AdminRequest.send(null); 
	}

Code (markup):

 

Mike -- Thanks for the tips. Sorry for not including the appreciative words you suggest. I got tangled up in the copying and pasting and inadvertently failed to communicate the appreciation in advance that I, in fact, feel.

I'll check out your suggestions, especially the coding suggestions.

Don't worry about my using abbreviations; I'm not yet part of the text messaging generation and always stumble over them myself. I'm pretty plain English.

Thanks,

--Kenoli