asked on

How can i get elements from an ajaxed page?

Hello i have a select drop down box that is display using httpxml ajax method so when trying to ajaxed other part of the page based on the drop down value i can't get the drop box value ! even if i use the method document.getElementById("section").value it didn't get it as it not exist!
Here are the code take a look
thanks in advance.

main section 
--------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Audiominds</title>
<style type="text/css">
.style1 {
	border: 1px solid #FFFFFF;
	border-collapse:collapse;
}
.font {
	color: #dddddd;
	font-family: Tahoma;
	font-size: small;
}
.box {
	color: #999999;
	font-family: Tahoma;
	font-size: small;
	background:black;
	border: 1px solid #4E4868;
}
a:link {
	color: #E7DBB1;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #999999;
}
a:hover {
text-decoration:underline;
}
a:active {
	text-decoration: none;
	color: #FFFFFF;
}
</style>
</head>
<?php include('includes/get.php') ?>
<body style="background-color: #000000">
 
 
 
<table align="center" style="width: 700px" cellspacing="4" cellpadding="3" class="style1">
	<tr>
		<td>
		<!--start in-main table-->
		<table class="font" style="width: 100%" cellspacing="3" cellpadding="2">
	<tr>
		<td style="width: 511px" >
		<img alt="Audiominds logo -load content" src="image/logocontent.jpg" width="450" height="78" onclick="get('index')"/></td>
		<td align="center"><div id="notification"></div>
		&nbsp;</td>
	</tr>
	<tr>
		<td colspan="2" style="border-bottom:thin;border-bottom-style:dotted; border-bottom-color:#555555;color:black;border-top:thin;border-top-style:dotted; border-top-color:#555555"><div align="right" id="mainsection"></div></td>
	</tr>
	<tr>
		<td colspan="2">
		<div id="subcategory"></div></td>
	</tr>
	<tr>
		<td colspan="2"><table  cellpadding="3"  cellspacing="3" width="100%" class="style1"><tr><td><div id="content"></div></td></tr></table></td>
	</tr>
	<tr>
		<td align="right" style="border-top:thin" colspan="2"><a href="http://www.audiominds.net"><strong>www.audiominds.net</strong></a><strong> -admin 
		panel application soft version 1.0</strong>0</td>
	</tr>
</table>
 
		<!--end in-main table-->
		
		</td>
	</tr>
</table>
 
 
</body>
 
</html>
 
 
 
 
 
ajax code
------------------------
<script type="text/javascript">
var xmlHttp
var strprod
 
function get(section)
 
{ 
		if ( section == "index" )
		{
		var page="default"
		var url="verifyindex.php?sid=" + Math.random()+"&page="+page
		xmlHttp=GetXmlHttpObject(setcategory)
		xmlHttp.open("GET", url , true)
		xmlHttp.send(null)
		}
		//--------------------------------------------------------------------------
		//--------------------------------------------------------------------------
		if ( section == "subcategory" )
		{
		var subcategory;
		subcategory=document.getElementById("boxcategory").value ; 
		var url="verifyindex.php?sid=" + Math.random()+"&page=subcategory&id="+subcategory ;
		xmlHttp=GetXmlHttpObject(setsubcategory)
		xmlHttp.open("GET", url , true)
		xmlHttp.send(null)
		}
		
} 
 
 
 
function setcategory() 
{
	if (xmlHttp.readyState==3 || xmlHttp.readyState==2 || xmlHttp.readyState==1)
	{ 
	document.getElementById("notification").innerHTML="<img src=image/ajax-loader.gif>";
	}
 
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
	{ 
		document.getElementById("notification").innerHTML="Category loaded";
		document.getElementById("content").innerHTML="<font color=FF0000>Please select a category to proceed!</font>";
		document.getElementById("mainsection").innerHTML=xmlHttp.responseText
	} 
} 
//############################################################################################
 
 
function setsubcategory() 
{
	if (xmlHttp.readyState==3 || xmlHttp.readyState==2 || xmlHttp.readyState==1)
	{ 
	document.getElementById("notification").innerHTML="<img src=image/ajax-loader.gif>";
	}
	
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
	{ 
		document.getElementById("notification").innerHTML="Subcategory loaded";
		document.getElementById("content").innerHTML="<font color=FF0000>Please select a subcategory to proceed!</font>";
		document.getElementById("subcategory").innerHTML=xmlHttp.responseText
	} 
} 
//#############################################################################################
 
 
 
 
 
 
 
 
function GetXmlHttpObject(handler)
{ 
var objXmlHttp=null
 
if (navigator.userAgent.indexOf("Opera")>=0)
{
alert("This example doesn't work in Opera") 
return 
}
if (navigator.userAgent.indexOf("MSIE")>=0)
{ 
var strName="Msxml2.XMLHTTP"
if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
{
strName="Microsoft.XMLHTTP"
} 
try
{ 
objXmlHttp=new ActiveXObject(strName)
objXmlHttp.onreadystatechange=handler 
return objXmlHttp
} 
catch(e)
{ 
alert("Error. Scripting for ActiveX might be disabled") 
return 
} 
} 
if (navigator.userAgent.indexOf("Mozilla")>=0)
{
objXmlHttp=new XMLHttpRequest()
objXmlHttp.onload=handler
objXmlHttp.onerror=handler 
return objXmlHttp
}
}
</script>
 
 
 
 
 
 
------------------------
php code 
--------------------------
<?php
session_start();
include_once("includes/sql.php");
if ( $_GET['page'] == "default" )
{
?>
<table class="font" width="100%"><tr><td align="left"> <b>ADD CONTENT | ADD CATEGORY | ADD SUBCATEGORY</b></td>
<td align="right">
<select class="box" id="boxcategory" onchange="get('subcategory')">
<option >Select a category</option>
<?php
//get the category from database
$sqlcategory=sql("tblitems");
while($rowcategory=mysql_fetch_array($sqlcategory))
{?>
<option value"<?php echo $rowcategory['id']; ?>" ><?php echo $rowcategory['name']; ?> </option>
<?php }?>
</select>
</td></tr></table>
 
<?php
}
?>
 
<!--------------------------------------------------------------------------------------------------------------------------SUBCATEGORY-->
 
<?php
if ( $_GET['page'] == "subcategory" )
{
?>
	<table border="1" class="font"  cellpadding="3" cellspacing="3" bgcolor="#666666" style="border-collapse:collapse "><tr>
	<?php echo "<td>testing </td>"; ?>
	<?php 
	$sqlsubcategory=sql("tblvalues" , "parent_id='$_GET[id]' ");
	while($rowsubcategory=mysql_fetch_array($sqlsubcategory))
		{
		?>
		<td><b><?php echo $rowsubcategory['name'] ; ?></b></td>
		<?php
		}
		?>
	</tr></table>
 
<?php
}
?>

Open in new window

GO-87

At first glance, I think there is an = sign missing in your PHP code here:
<option value"<?php echo $rowcategory['id']; ?>" >
should probably be
<option value="<?php echo $rowcategory['id']; ?>" >

Have you viewed the source HTML that is generated by your PHP page? Does the Select drop down look healthy?

Audiominds

ASKER

The page is displayed correctly ! but i did'nt find a way to get the value of drop down box labeled id="category"

GO-87

I might be missing something ... but I can't seem to find any id="category" in your code.
Do you mean boxcategory?
Did you try adding the = sign?

Audiominds

ASKER

yes boxcategory what do you mean by sign ! ?

GO-87

If you re-read my first post, I've suggested that you insert an equals sign into your PHP code, after the word Value. It appears on line 225 of the code snippet.
I also suggested that you inspect the source HTML (in other the words, the code) of the generated page, to see whether it looks reasonable. You might notice a glaring omission.

Audiominds

ASKER

for used this equal sign its only an echo string !

GO-87

If you take a CAREFUL look at the following URL, you'll see that the HTML SELECT tag needs to have an equals sign after the VALUE:
http://www.w3schools.com/TAGS/tag_select.asp
so for example this would work:
<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value ="opel">Opel</option>
<option value ="audi">Audi</option>
</select>
but this would not:
<select>
<option value "volvo">Volvo</option>
<option value "saab">Saab</option>
<option value "opel">Opel</option>
<option value "audi">Audi</option>
</select>
Do you see the difference?
Now assuming your categories are
id = 1, name = One
id = 2, name = Two
id = 3, name = Three
then your code on line 225 will generate something like this:
<select class="box" id="boxcategory" onchange="get('subcategory')">
<option >Select a category</option>
<option value "1">One</option>
<option value "2">Two</option>
<option value "3">Three</option>
</select>
which will not work the way you want it to. You need to have equals signs.

Audiominds

ASKER

Man if you look carefully in my code i didn't miss any = sign if that the case please show me where is there any other real method to get this ajaxed select be retrieved by other ajax request ?

ASKER CERTIFIED SOLUTION

GO-87

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Audiominds

ASKER

Thanks man appreciated sorry for any missunderstanding

GO-87

No worries ... I didn't mean for you to award me all the points, I merely wanted you to confirm whether you'd tried my suggestion.
Thank you for the points though ;-) and I hope your solution works.
G